react-navigation 组件详解

react-navigation 介绍

随着react-navigation逐渐稳定，Navigator也被光荣的退休了。在React Native生态环境中需要一款可扩展且易于使用的导航组件，Navigator 自然胜任不了，这时React Native社区便孕育出了一个开源导航组件react-navigation。

react-navigation的出现替代了Navigator、 Ex-Navigation等老一代的导航组件，react-navigation可以说是Navigator的加强版，不仅有Navigator的全部功能，另外还支持底部导航类似于与iOS中的UITabBarController，此外它也支持侧拉效果方式的导航类似于Android中的抽屉效果。

 

 

安装 react-navigation

yarn add react-navigation

如果是比较高版本3.x以上的还需要安装一个依赖

yarn add react-native-gesture-handler

 

 

什么是导航器？

导航器也可以看成一个是普通的React组件，你可以通过导航器来定义你的App的导航结构。 导航器还可以渲染通用元素，例如可以配置的标题栏和选项卡栏。

在react-navigation中有以下三种类型的导航器：

• StackNavigator: 类似于普通的Navigator，屏幕上方导航栏；
• TabNavigator: 相当于iOS里面的TabBarController，屏幕下方的标签栏；
• DrawerNavigator: 抽屉效果，侧边滑出；

你可以通过以上三种导航器来创建你APP，可以是其中一个也可以多个组合，这个可以根据具体的应用场景并结合每一个导航器的特性进行选择。在开始学习三种导航器之前，我们需要先了解两个和导航关于概念：

• Screen navigation prop(屏幕导航属性)：通过navigation可以完成屏幕之间的调度操作，例如打开另一个屏幕；
• Screen navigationOptions(屏幕导航选项)： 通过navigationOptions可以定制导航器显示屏幕的方式（例如：头部标题，选项卡标签等）；

 

 

 

导航器所支持的Props

const SomeNav = StackNavigator/TabNavigator/DrawerNavigator({
  // config
});

<SomeNav
  screenProps={xxx}
  ref={nav => { navigation = nav; }}
  onNavigationStateChange=(prevState, newState, action)=>{
  	
  }
/>

ref：可以通过ref属性获取到navigation；

onNavigationStateChange(prevState, newState, action)：顶级节点除了ref属性之外，还接受onNavigationStateChange(prevState, newState, action)属性，每次当导航器所管理的state发生改变时，都会回调该方法；

• prevState：变化之前的state；
• newState：新的state；
• 导致state变化的action；

screenProps：向子屏幕传递额外的数据，子屏幕可以通过this.props.screenProps获取到该数据。