记一次createMaterialTopTabNavigator和createStackNavigator的使用

React Navigation是目前使用最多的一个RN导航模块，React Navigation 提供了简单易用的跨平台导航方案，在 iOS 和 Android 上都可以进行翻页式、tab 选项卡式和抽屉式的导航布局。

在开始之前，我们可以先假定两个需求：

1. 做一个类似于豆瓣电影的app，首页顶部有两个tab，其中一个tab显示正在上映的电影列表。

2. 点击列表的每一项进入电影的详细信息页面。

回到我们要使用的两个工具：createMaterialTopTabNavigator和createStackNavigator

需求1就不多说了，肯定要用到createMaterialTopTabNavigator

需求2是典型的路由跳转，但手机端不同于web端，在手机上两个页面的跳转最直观的感受就是后一个页面“覆盖”了前一个页面（Andorid和IOS会有不同的动画效果），有点像“栈”的结构：

所以最终我们的实现方法是：用createMaterialTopTabNavigator配置两个tab，并返回一个变量保存起来，然后再将这个tab变量和要跳转的详情页一起配置到createStackNavigator里，即createStackNavigator是createMaterialTopTabNavigator的父容器。

createMaterialTopTabNavigator

接收两个参数：

第一个参数是配置路由，即两个tab页面分别映射到路由对象，每个路由对象可以通过navigationOptions属性单独进行设置，比如tab的title（tabBarLabel），tab的图标（tabBarIcon，这里我引入了react-native-vector-icons下面的MaterialCommunityIcons），以及tab上的点击事件（tabBarOnPress）

第二个参数可以看成是对tab的全局配置，包括初始路由（initialRouteName），是否点击返回到初始tab（backBehavior，默认为initialRouteName设置的初始页面），是否开启动画（swipeEnabled，animationEnabled）。此外还有tabBarOptions，它是一个对象，包含了一些tab的样式设计（背景色，高度，是否显示图标和标题等）

createStackNavigator

配置方法和createMaterialTopTabNavigator基本一致，也是接受两个参数，并且个别属性还可以接收自定义组件，比如上图中的HeaderComponent组件，这是一个自定义的顶部样式组件，接收一个id作为参数传递给组件。headerStyle用来设置标题栏的整体样式，headerTitle用来设置title组件的样式，headerBackTitleStyle用来设置返回标题（文字部分）的样式，headerRightContainerStyle用来设置当heaerRight接收一个组件的时候的容器样式。

实际效果（抱歉没有动图）：

首页

电影详情页

以上只是对React Navigation的一个简单的使用介绍，当中涉及到的诸如路由传参（this.props.navigation）没有做详细解释，这一部分可以在官网上自行学习理解（reactnavigation.org/docs/en/nav…）。另外，文章若有出入，请以官网为准。

初学RN，不喜勿喷

转载于:https://juejin.im/post/5c7245916fb9a04a0379d864