StackNavigator是react-native的页面路由配置控制器,是一个堆栈导航器,由于它是一个堆栈导航器,所以它的使用上和iOS上的navigationvontroller导航栏一样,具备push和pop的功能。 与iOS一样,一个bottom tab的按钮,对应一个配置好的StackNavigator页面。
1、配置StackNavigator,使用createStackNavigator()方法:
如上代码,HomeScreen为主要页面,DetailsScreen为二级页面。通过按钮操作,可以push到二级页面。使用this.props.navigation.navigate('Details')导航到相应的页面,而其中 'Details' 相对应createStackNavigator中的Details。如下按钮设置:
2、返回,可以是导航栏自带的返回按钮返回,也可以使用this.props.navigation.goBack()来返回。
3、阅读屏幕组件中的参数:this.props.navigation.getParam(paramName, defaultValue)。如下图,itemId和otherParam为下个页面的页面参数: