文档地址
报错
react-navigation 使用这个的时候会报错 （evaluating 'RNGestureHandlerModule.State'）需要link一下
npm install --save react-navigation
npm install --save react-native-gesture-handler
react-native link
react-navigation 的使用
跳转
销毁上面所有页面 如果当前栈最后一个是details 就不做处理
this.props.navigation.navigate('Details')
不管最后一个是什么都跳转
this.props.navigation.push('Details')
返回上一个栈
this.props.navigation.goBack()
参数传递
this.props.navigation.navigate('RouteName', { /* params go here */ })
读取页面组件中的参数的方法：
this.props.navigation.state.params。
or
const { navigation } = this.props;
const itemId = navigation.getParam('itemId', 'NO-ID');
配置路由
页面设置标题
普通标题设置
获取参数标题设置
当前页面内容给变当前页面标题
this.props.navigation.setParams({ otherParam: 'Updated!' })}
设置标题的样式
给单独页面设置标题样式
通过defaultNavigationOptions 给所有页面设置
mode 页面切换方式
mode 有两种
1. card 从右向左
2.modal 从下向上
如果需要 全屏模式 或是不喜欢自带的头部 可以 headerMode 设置为none
如果内部组件也想拿到 props 可以用 withNavigation
你可能希望将用户的位置保存在应用程序中, 以便在应用程序重新启动后立即返回到同一位置。
这在开发过程中特别有用，因为它允许开发人员在刷新应用程序时保持在同一页面上。
