react-navigation 学习笔记

文档地址

报错

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

你可能希望将用户的位置保存在应用程序中, 以便在应用程序重新启动后立即返回到同一位置。

这在开发过程中特别有用，因为它允许开发人员在刷新应用程序时保持在同一页面上。