react native 强大的navigation V2.0+

前言

笔者在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,

})

欢迎 ❤️ 关注 你们的认可是我写作最大的动力,如果有什么错误的地方或者疑问欢迎在评论区留言讨论,我看到后会尽快回复大家。

你可能感兴趣的:(react native 强大的navigation V2.0+)