- 下面是 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)
- routerName：将要进行跳转的路由名：
- goBack()
关于
页面切换的回调函数:相关参考文章：
http://blog.csdn.net/sinat_17775997/article/details/70176688
