Rect Naviagtion-StackNavigator

川长思鸟来 2022-05-13 01:10 166阅读 0赞

## 一、用途 ##

官方文档介绍StackNavigator的用途是：**为你的应用程序提供一种在每个新屏幕放置在堆栈顶部的屏幕之间转换的方法。**

举个例子：你在头条浏览一个新闻列表，这个新闻列表页面可以认为是一个StackNavigator，当你点击某一条新闻进入详情页面时，这个详情页面也是一个StackNavigator。这时，你可以在详情页面执行返回操作返回到新闻列表页面。

## 二、使用API和配置 ##

React-navigation 2.x版本以前使用StackNaviagator这个方法创建StackNaviagator，React-navigation 2.x以后新增了createStackNavigator方法来创建StackNaviagator。这两个方法的参数配置并无二致，都是一样的。createStackNavigator方法定义如下：

createStackNavigator(RouteConfigs, StackNavigatorConfig);

（1）RouteConfigs：路由配置对象是从路由名称到路由配置的映射。下面来看一段Demo代码：

const MyStackNavigator1 = createStackNavigator(
        {
            LanuchPage:LanuchPage,
            MainPage:MainPage,
            LoginPage:LoginPage,
        },
        {
            initialRouteName:"LanuchPage",      //初始化页面
        }
    );

其中的LanuchPage、MainPage和LoginPage就是配置页面的映射，使用this.props.navigation.navigate(“routeName”)方法可跳转到指定页面，跳转到登录页面就是this.props.navigation.navigate(“LoginPage”)。

（2）StackNavigatorConfig：页面切换的配置，包括页面布局和切换效果等。

initialRouteName：初始化显示的路由名称，即页面。

naviagationOptions：用于页面的默认导航选项。

文中介绍的是基础的用法，RouteConfigs和StackNavigatorConfig还有其他的配置，详情请看官方文档。（https://reactnavigation.org/docs/zh-Hans/stack-navigator.html）

## 三、页面参数传递 ##

页面参数传递可在跳转页面方法进行添加，第一个参数为页面名称，第二个参数为传递的参数，API定义如下：

this.props.navigation.navigate('RouteName', \{ /\* params go here \*/ \});

Demo代码如下：

//跳转页面并传递参数
    this.props.navigation.navigate("LoginPage",{
        account:"chenliwu",
    });

那么，参数传递过来后，该如何获取参数值呢？

页面传递过来的参数，可通过this.props.navigation.getParam(key,defaultValue)方法获取。

render(){
            //const { navigation } = this.props;
            const account = this.props.navigation.getParam("account");
            return (
                <View style={
       {flex:1,justifyContent:'center',alignItems:'center'}}>
                    <Text>主页</Text>
                    <Text>
                        页面传递过来的参数值：{account}
                    </Text>
                </View>
            );
        }

## 四、Demo ##

Demo代码下载地址：

[https://download.csdn.net/download/qq\_33721382/10654997][https_download.csdn.net_download_qq_33721382_10654997]