React Native 官方推荐导航头（react-navigation）使用教程
目前react-navigation已经有了正式版本，下面简单介绍一下createStackNavigator+createBottomTabNavigator的使用方法：
1.打开终端，进入项目根目录，执行npm install --save react-navigation命令，完成后，打开package.json，看到react-navigation,说明安装成功。
2.利用createStackNavigator函数来创建导航页面，函数包含两个参数：RouteConfigs和StackNavigatorConfig
RouteConfigs：各个页面路由的配置
const routeConfigs = {
Controller1:{ //相当于页面的id 字符串
screen:VC1, //需要展示的页面
navigationOptions:() //导航头的样式配置，如果在页面中进行导航头样式静态配置，在这里配置可能会覆盖页面中的配置
}
}
StackNavigatorConfig：导航头的具体样式，可以在每个页面中进行静态的配置，主要参数格式：
const StackNavigatorConfig = {
initialRouteName: 'Controller1', //初始页面的展示
initialRouteParams: {initPara: '初始页面参数'}, //传递给页面的参数， 可以在this.props中读取到
navigationOptions: {
title: '首页', //导航头title，这个可能会与tabbar显示的title同步，推荐使用headerTitle
headerTitleStyle: {fontSize: 18, color: 'red'}, //导航头title样式
headerStyle: {height: 44, backgroundColor: 'white'}, //导航头的具体样式
headerTintColor:'red', //导航头按钮的颜色
// headerLeft:<Text style={{color: 'red', fontSize: 18}} onPress={this.leftBtnClicked.bind(this)}>返回</Text>, //导航头左右按钮控件
// headerRight:<Text style={{color: 'red', fontSize: 18}} onPress={this.rightBtnClicked.bind(this)}>编辑</Text>
},mode: 'card',
headerMode: 'screen',
cardStyle: {backgroundColor: "#ffffff"},
onTransitionStart: (() => {
console.log('页面跳转动画开始');
}),
onTransitionEnd: (() => {
console.log('页面跳转动画结束');
}),
}
以上是每个StackNavigator设置的方法，这里我们先设置五个StackNavigator，具体实现如下：
3，可以在每个页面中单独的进行导航头的静态配置：
4，配置底部TabNavigator：
通过以上的操作，我们配置了一个底部的TabBar，包含5个Item，每个Item页面包装成了一个StackNavigator，这样的话也可以正常显示，但是如果有页面跳转的话，就需要在每个StackNavigator中配置跳转的Route，但是这样如果页面跳转，底部的Tabbar不会消失，不合理，所以我们要把当前的TabNavigator和需要跳转的页面一起再封装到一个StackNavigator中，这样即可以单独的配置每个页面的导航头信息，又可以在页面跳转时隐藏底部的Tabbar。
5，封装Tabbar和需要跳转的页面到StackNavigator，在tab的navigationOptions中需要将tab的header设置为null，否则会出现两个导航头，Detail配置的页面就是我们需要跳转的页面
经过以上操作，在app.js或者配置的rootView中的render直接渲染TabNav即可实现页面。
运行程序时，可能会出现'Warning: isMounted(...) is deprecated'等一些警告，可以通过YellowBox库来解决：
以上是 React Native 官方推荐导航头（react-navigation）使用教程 的全部内容， 来源链接： utcz.com/z/383966.html
