react native 强大的navigation V2.0+

2018-10-10

前言

笔者在V2版之前使用的版本是 1.5.1，现项目中升级到2.6.2。以下是我使用这两个版本的一些经验，分享给大家，希望节省大家一些宝贵的时间。

注意/优化项

导航器导出名字改变

升级前：

1	import { StackNavigator, TabNavigator, DrawerNavigator} from 'react-navigation'

升级后：

1	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,

})

本次写作到此，欢迎❤️⭐️👏指出错误或者发布自己的见解探讨，共勉。🤝

本文原创出自 https://giantss.github.io/blog/2018/10/10/react-native-强大的navigation-V2-0/ 翻版必究