react-native导航栏StackNavigator

        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为下个页面的页面参数:

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容