React native 实战 --导航篇 React Navi

官方文档地址

• https://reactnavigation.org/docs/intro/

React native 导航使用

• 安装：yarn add react-navigation

StackNavigator 的使用

StackNavigator(RouteConfigs, StackNavigatorConfig)

RouteConfigs 导航的路径，名称等

const App = StackNavigator({ Main: {screen: MainScreen}, });

StackNavigatorConfig 导航的配置项

• ****一大堆（建议看官方文档）
• navigationOptions 一些配置选项（如果在初始化的时候使用，会覆盖你在组件里面单独的设置）
  • title 标题名称
  • header 可以单独设置 returns a React Element
  • headerTitle 标题名称
  • headerTitleAllowFontScaling 标题字体是否可以缩放，默认为 true
  • headerBackTitle 返回按钮旁边的文字
  • headerTruncatedBackTitle
  • headerRight header右边的一个 Element
  • headerLeft header左边的一个 Element
  • headerStyle header的style 比如 headerStyle: { backgroundColor:'#fff' }
  • headerTitleStyle 标题的 style
  • headerBackTitleStyle 返回标题文字，注意是文字的style
  • headerTintColor header图标的颜色
  • headerPressColorAndroid Android>5.0 点击时波纹的颜色
  • gesturesEnabled 是否可以用手势打开这个屏幕 IOS (true) Android (flase)
  • gestureResponseDistance 从屏幕边缘覆盖的触摸距离 horizontal （默认 25） vertical （默认135）

还有tab导航跟抽屉导航，建议看文档

导航的一些事件

• navigate - 简单理解就是跳转到另外一个导航页面
• state - 导航的state
• setParams - 传递参数
• goBack - 关闭当前页面，导航回退
• dispatch - 发起一个 dispatch

导航的一些 action

• Navigation Actions
  Navigate - 导航到另外一个
  Reset - 把state状态替换（可以理解为重置router）
  Back - 回退
  Set Params - 参数
  Init - 设置初始化（除非你没设置，或者undefined的时候）