react-native-navigation 简单分析和跨页跳转
虽然 react-native-navigation 是 Facebook React Native 官方文档推荐的导航库之一 ,但我也不得不说使用它做 APP 导航主框架的体验简直糟糕透了。当然,这本身可能就是 React Native 自身的问题。
1 react-native-navigation 简单分析
使用 react-native-navigation 首先得理解下它的实现。它独立于 RN Component 的 componentWillMount
/componentWillUnmount
接口实现了一套自己的事件机制,最重要的可能是 willAppear
/willDisappear
。它提供了一套页面堆栈操作和切换动画, push
可以将目标页面切换到最上方,pop
可以返回上一页。
可能是为了性能或者设计使然,push
的时候不会销毁当前页。也就是说,在 A 页面里 push
跳转到B 页面,不会 Unmount A 页面的Component
。 不过在 B 页面 pop
回 A 页面时,的确会 Unmount B 页面的Component
。这也意味着,整个导航路径是一个页面堆栈,只要在堆栈里页面的 Component
,都不会被 Unmount。
2 页面堆栈的问题
这有时候会导致一些很严重的问题。有些情况下,特定的 Component
可能会占用唯一的系统资源,比如:麦克风、照相机等。这些 Component
在实现的时候往往只考虑了 React Native 的接口,在 componentWillUnmount
的时候释放占用的资源。它们不会预料到与 react-native-navigation 的结合,专门提供一个 willDisappear
时释放资源的接口,而且有些情况下也未必能这样做。
如果 A 页面在使用这些 Component
已经占用了麦克风或者相机,B 页面也要使用这些 Component
,那么从 A push
跳转到 B 时,A 页面的资源不会被释放,B 页面就可能会遇到麦克风不可用,或者相机无法初始化等问题。
解决这个问题,最简单的办法是调整页面交互顺序,保证使用这些独占系统资源的页面永远在堆栈的最顶端,或者使用 Modal Stack,把独占资源的 Component
放到 Modal 里去 present 然后 dismiss。
3 跨页跳转实现
react-native-navigation 只能支持页面堆栈,而且看起来只能支持 push/pop 一个页面,也就是说整个切换过程是串行的,push 顺序是 A->B->A->D ,那么 pop 顺序也只能是 D->A->B->A。
但很可惜地是,在产品经理眼中,是不存在串行页面切换这种限制的。TA 们有时候要求跳转的过程中没 A,但返回的时候要有 A;或者要求跳转的过程中有 A,但返回的时候可以跳过 A,或者甚至直接返回到堆栈最底端。
直接返回栈底很容易,react-native-navigation 提供了 popToRoot 接口,但它没有提供一下子 push 多个页面,或者一下子 pop 多个页面的功能。它也没有类似于 HTML5 的 history API,我们直接对堆栈进行操作,是不太可能的。只能通过它现有的接口想办法。
3.1 跨页 push
跳转的过程没有 A,但返回的时候要有 A,这只是一个产品需求。在实现上,是可以变成跳转过程中有 A,但是 A 被快速跳过,返回的时候才会被真正渲染。这样从用户体验上来看,并没有看到 A。代码实现上,可以考虑两种方法:
willAppear 结合 didDisappear 做状态控制
在 A 的 state
里放一个 isFirstEntry
状态,默认是 true
。willAppear
里判断 isFirstEntry
则直接跳转到下个页面,render
里判断 isFirstEntry
则只渲染一个背景 View
,否则才渲染正常页面。这样就实现了在页面切换过程中跳过 A。在 的 didDisappear
里将 isFirstEntry
置为 false
。这样在返回的时候 willAppear
和 render
表现就和正常返回一样了。
willAppear = () => { if (this.state.isFirstEntry) { this.props.navigator.push(...); return; } ... }; render() { if (this.state.isFirstEntry) { // 返回背景 View } else { // 返回正常 View } } didDisappear = () => { this.setState({isFirstEntry: false}); };
willAppear 页面计数
在需要更复杂逻辑的地方,可以在 state
里放一个 appearTimes
计数器。在 willAppear
里给计数器加一,这样每次进入页面都会增加计数。通过判断计数器的值,来决定如何 render
或者跳转。
willAppear = () => { this.setState({appearTimes: this.state.appearTimes + 1}); if (this.state.appearTimes === 1) { this.props.navigator.push(...); return; } ... }; render() { if (this.state.appearTimes === 1) { // 返回背景 View } else { // 返回正常 View } }
3.2 跨页 pop
跳转的过程中有 A,但返回的时候要跳过 A,相当于可以自己操作 pop 的步长。很遗憾,react-native-navigation 没有提供这样的接口。不过我们可以采用一个 trick 的手段,来实现这个逻辑。
假设从 Root->A->B,在 A 的 state
里放一个 relayPop
,默认是 false
。 在 A 跳转到 B 时,通过 props
传入一个回调:setParentRelayPop
,B 可以通过这个回调修改 A 的 state relayPop
为 true
; 在 A 的 willAppear
中,首先判断 relayPop
是否为真,如果是真的话,代表是从 B 返回且 B 要求接力返回,那么 A 就直接 pop
返回到 A 的上级。 B 在返回时,首先通过回调设置 relayPop
为 true
,然后再调用 pop
接口,就实现了跨页返回。
// Screen A willAppear = () => { if (this.state.relayPop) { this.props.navigator.pop(); // 接力返回 return; } ... }; ... // 跳转逻辑某处 this.props.navigator.push({..., passProps: { setParentRelayPop: () => this.setState({relayPop: true}) }}); // Screen B // 返回逻辑某处 this.props.setParentRelayPop(); this.props.navigator.pop();
建议继续学习:
- React入门:关于虚拟DOM(Virtual DOM) (阅读:2563)
- React初探 (阅读:2560)
- React 高效开发环境的搭建 (阅读:1975)
- 从零开始React服务器渲染 (阅读:1869)
- 用 Virtual DOM 加速开发 (阅读:1577)
- 从工程化角度讨论如何快速构建可靠React组件 (阅读:1574)
- 一个“三端”开发者眼中的React Native (阅读:1488)
- React 应用的架构模式 Flux (阅读:1331)
- 前端路由实现与 react-router 源码分析 (阅读:1225)
- React一线问题十问十答 (阅读:1188)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:Solrex 来源: Solrex Shuffling
- 标签: react 跨页
- 发布时间:2019-03-28 22:20:17
- [55] Oracle MTS模式下 进程地址与会话信
- [55] IOS安全–浅谈关于IOS加固的几种方法
- [53] 如何拿下简短的域名
- [53] android 开发入门
- [51] Go Reflect 性能
- [50] 图书馆的世界纪录
- [48] 读书笔记-壹百度:百度十年千倍的29条法则
- [46] 【社会化设计】自我(self)部分――欢迎区
- [38] 程序员技术练级攻略
- [32] 视觉调整-设计师 vs. 逻辑