7.React Native之StackNavigator实现页面跳转及navigationOptions参数说明；

目录

 

1.StackNavigator介绍

2.StackNavigator属性介绍

2.1RouteConfigs

2.2StackNavigatorConfig

3.StackNavigator使用示例

3.1添加react-navigation库几种方式

3.2引入react-navigation库

3.3创建StackNavigator组件

3.4调用StackNavigator显示

3.5效果图

4.StackNavigator页面跳转及参数传递

4.1页面跳转

4.1.1导航跳转介绍

4.1.2导航跳转示例

4.2参数传递和接收

4.2.1传递参数

4.2.2接收参数

目录

1.StackNavigator介绍

2.StackNavigator属性介绍

2.1RouteConfigs

2.2StackNavigatorConfig

3.StackNavigator使用示例

3.1添加react-navigation库几种方式

3.2引入react-navigation库

3.3创建StackNavigator组件

3.4调用StackNavigator显示

3.5效果图

4.StackNavigator页面跳转及参数传递

4.1页面跳转

4.1.1导航跳转介绍

4.1.2导航跳转示例

4.2参数传递和接收

4.2.1传递参数

4.2.2接收参数

5.StackNavigator配置navigationOptions说明

---

 

---

1.StackNavigator介绍

StackNavigator为我们开发的应用提供一种在屏幕之间转换的方式，其中每个新启动屏幕都放置在堆栈顶部。

默认情况下，堆栈导航器配置我们熟悉的iOS和Android页面切换效果：新启动的的屏幕从iOS右侧滑入，从Android底部淡入。在iOS上，堆栈导航器也可以配置为模式(Modal)样式，屏幕从底部滑入。

2.StackNavigator属性介绍

createStackNavigator(RouteConfigs, StackNavigatorConfig);

2.1RouteConfigs

RouteConfigs对象是从路由名称到路由配置的映射，它告诉导航器为该路由提供什么。简单说就是定义了页面的映射关系，为每个界面定义一个名字，以便导航器可以通过名字跳转到该页面；

createStackNavigator({
      //为了每个你要导航到的页面（组件）创建一个入口，定义了一个名为Profile入口，如下：
      Profile: {
        // `ProfileScreen` is a React component that will be the main content of     the screen.
        //`ProfileScreen`是一个React组件，它将成为屏幕的显示的主要内容
        screen: Pro