前言
笔者在V2版之前使用的版本是 1.5.1，现项目中升级到2.6.2。以下是我使用这两个版本的一些经验，分享给大家，希望节省大家一些宝贵的时间。
注意/优化项
导航器导出名字改变
升级前：
import { StackNavigator, TabNavigator, DrawerNavigator} from 'react-navigation'
升级后：
import { createStackNavigator, createBottomTabNavigator, createDrawerNavigator } from 'react-navigation'
新增getParam('id', '默认值');
通过navigate传餐到下一个界面可以设置默认值了，再也不用在接受的界面使用三元表达式判断传入值是否存在了。
let {navigation} = this.props;
this.state = {
id: navigation.getParam('id', 0) //如果没有接收到id，给id赋值为0
}
正文
我在使用 1.5.1版的时候遇到过下面这样的需求：
需求一：界面跳转：需要实现 A——>B B——>C C——>A，甚至更深层次的界面跳转到A。
需求二：需要使用多个导航器，而且相互之间不影响。(引导页，登陆，注册，忘记密码的等界面的实现)。
需求三：一个界面多次被使用，（比如一个社交的帖子详情，点击头像进入个人主页，在个人主页中点击帖子，又进入到帖子详情，然后再点击帖子中的头像进入到个人主页。这样帖子详情 个人主页两个界面会被无限循环调用）。
需求四：快速点击时跳转下个界面，不要跳转多个相同的界面（这应该算V1+的一个缺陷）。
接下来我就根据上面的几个需求来分析在 V1.0+ 和V2.0+ 分别是如何实现的。
需求一 V1.0+：
我的实现思路是：
使用DeviceEventEmitter在B界面注册了一个返回上一个界面的goback事件, 事件触发时执行this.props.naviagtion.goBack();，然后在C界面先调用DeviceEventEmitter.emit('B界面注册的事件名')，然后再调用 this.props.naviagtion.goBack()就能达到 C——>A的效果。虽然实现了，但是心里暗地里说了一句mmp。
需求一V2.0+：
直接在C界面调用this.props.naviagtion.navigate('A')就可以实现 C——>A的效果，如果A是首页的话可以调用this.props.naviagtion.popToTop()。
需求二V1.0+：
登陆注册界面：使用的是Modal组件，自定义的全屏悬浮窗。
需求二V2.0+：
在V2.0中提供了一个createSwitchNavigator,这个组件的作用个人的理解是导航器分离，永远只展示一个导航器，你可以设置多个导航器，并且当多个导航器相互切换的时候都会销毁掉其他导航器。（如何嵌套实现请看最后面的代码）
需求三V1.0+：
正常使用this.props.navigation.navigate('A')可以实现这种效果（但是点击太快会多次导航到同一个界面）。
需求三V2.0+：
需要注意的是V2.0+实现这种效果需要调用 this.props.navigation.push('A'),如果调用了this.props.navigation.navigate('A')你会发现当A已经在导航栈中界面跳转效果是返回到这个界面的效果；如果A是当前界面，再次调用navigate('A')没有任何效果，但是push('A')还可以继续导航到A界面。
需求四V1.0+：
解决方案：在你配置导航器的.js文件最下面 export default xxx之前粘贴下面的代码
/**解决点击太快跳转连续跳转多个界面**/
//主要是这一步
const navigateOnce = (getStateForAction) => (action, state) => {
const {type, routeName} = action;
return (
state &&
type === NavigationActions.NAVIGATE &&
routeName === state.routes[state.routes.length - 1].routeName
) ? null : getStateForAction(action, state);
};
//这是第二步
MainStackNavigator.router.getStateForAction = navigateOnce(MainStackNavigator.router.getStateForAction);
需求四V2.0+：
只需要正常调用this.props.navigation.navigate('A')就可以了，官方已经修复了这个bug。
各种导航器嵌套代码
import {
createStackNavigator,
createBottomTabNavigator,
createDrawerNavigator,
createSwitchNavigator,
} from 'react-navigation'
const navigationOptions = {
headerStyle:{
backgroundColor: '#fff'
},
headerTintColor: '#666666',
headerBackTitle: null,
headerTitleStyle: {
fontWeight: 'bold',
},
drawerLockMode:'locked-closed'
};
//首页导航器
const HomeStack = createStackNavigator(
{
Home: HomeScreen,
HomeDetail: HomeDetailScreen,
//其他首页导航栈下的界面
},
{
navigationOptions:navigationOptions
});
//新闻导航器
const NewsStack = createStackNavigator({
News: NewsScreen,
NewsDetail: NewsDetailScreen,
//其他新闻导航栈下的界面
},
{
navigationOptions:navigationOptions
});
//登陆、注册等导航器
const LoginStack = createStackNavigator(
{
Login: LoginScreen,
Register: RegisterScreen,
Bind: BindScreen,
UserProtocol: UserProtocolScreen
//其他登陆导航栈下的界面
},
{
navigationOptions:navigationOptions
});
//tab点击切换导航器
const Tab = createBottomTabNavigator({
Home: HomeStack,
News: NewsStack
},{
initialRouteName: 'Home',
tabBarOptions: {
showLabel: false,
style:{
height:0 //隐藏底部切换
}
}
});
//侧滑导航器
const drawerNavigator = createDrawerNavigator({
bottomTab: Tab,
},{
drawerWidth: width-120,
contentComponent: CustomDrawerContentComponent
});
//最后导出Switch导航器
export default createSwitchNavigator({
drawerNavigator: drawerNavigator,
loginStack: LoginStack,
})
