StackNavigator 页面跳转

• 下面是 StackNavigator的使用案例：

//定义
const Navigator = StackNavigator(
    {
        Tab: {
            screen: Tab,
            navigationOptions: {
            }
         },

         GoodsList: {
            screen: GoodsListScene,
         },

         GoodsDetail: {
            screen: GoodsDetailScene,
         },

         Login: {
              screen: LoginScene,
              navigationOptions: {
                title:"登录"
              }
         }

    },
    {
        navigationOptions: {
             //headerStyle: { backgroundColor: color.theme },
            headerBackTitle: null,
            headerTintColor: '#333333',
            showIcon: true,
        },
    }
);

• navigation
  在StackNavigator中注册后的组件都有navigation这个属性. navigation又有以下5个参数:

  • navigate（函数）

  • goBack（函数）

    • 返回上一页

  • state（属性）：json对象，拥有以下key-value属性对

    • routerName：路由名
    • key：路由身份识别
    • params：传递给该界面的参数

  • setParams（函数）

    • 该方法允许界面更改router中的参数，可以用来动态的更改导航栏的内容

  • dispatch（函数）

    • reset() 重置路由
    • navigate() 变更路由，该方法类似于直接调用this.props.navigation.navigate(routerName, {})来进行跳转

• 关于跳转,都是通过 this.props.navigation 这个对象的以下方式进行切换页面的：

  • goBack() 后退界面
  • navigate(routerName, paramsJson) 跳转界面
    • routerName：将要进行跳转的路由名：

        例如上面定义的 "Login" 名
        Login: {
          screen: LoginScene,
          navigationOptions: {
            title:"登录"
          }
      
      }
      

    • paramsJson：传递给routerName界面的json格式参数，例如

        //（1）将参数传递给Login界面
        let loginInfo  = {
            username:"xx",
            password:"vv"
        };
        this.props.navigation.navigator("Login", loginInfo)
      
        //（2）在Login界面进行接收
        let loginInfo = this.props.navigation.state.params
        console(" username: " + loginInfo.username)
        console(" password: " + loginInfo. password)
      

• 关于页面切换的回调函数:

• 相关参考文章：
  http://blog.csdn.net/sinat_17775997/article/details/70176688