前言
笔者在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
传餐到下一个界面可以设置默认值了,再也不用在接受的界面使用三元表达式判断传入值是否存在了。1
2
3
4let {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
之前粘贴下面的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14 /**解决点击太快跳转连续跳转多个界面**/
//主要是这一步
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。
各种导航器嵌套代码
1 |
|
本次写作到此,欢迎❤️⭐️👏指出错误或者发布自己的见解探讨,共勉。🤝
本文原创出自 https://giantss.github.io/blog/2018/10/10/react-native-强大的navigation-V2-0/ 翻版必究