距离上次发表文章已过去两月半,react-native构建的app已经差不多要上线了,总结一下自己填的坑,希望对大家能有所帮助。
页面跳转使用官方推荐react-navigation
这里涉及到比较常用的几个api:navigate,goback,reset以及携带参数的页面跳转。接下来我们详细了解一下我如何使用这几个API。
navigate:最简单的页面跳转,使用方法如下:
this.props.navigation.navigate('路由页面注册名',{
headerTitle:'使用说明', //设置跳转页面的routeName
params:params //下个页面通过let {params}=this.props.navigation.state.params解构取值即可
})
复制代码
这里涉及到一个问题,如果我们到了某个页面并不想让他回去呢?即要将当前页面设为初始页面,这时候要用到reset了。我简单封装了一下。
import {StackActions, NavigationActions} from 'react-navigation';
//路由重定向reset封装
export function resetNavigation(index = 0, routeName, params = {}) {
return StackActions.reset({
index: index,
actions: [
NavigationActions.navigate({
routeName: routeName,
params: params
})
],
});
}
使用的时候要注意在页面中需要
this.props.navigation.dispatch(resetNavigation(0,'App',{params:params});
复制代码
注意多级子页面需要从父级把this.props.navigation传给子级才能使用。例如
<Me nav={this.props.navigation}/> //父级传参数
//子级调用
this.props.nav.navigate('',{params:params});
复制代码
接下来比较重要的就是goback。 goback()就是简单的返回到上级页面,可是有时候我们需要返回到指定页面该怎么办呢?这里有一个最简单的key值。
例如有五个页面:A index setting setPass setSuccess
流程是这样的A->index->setting->setPass->setSuccess->index
如果用navigate从setSuccess->index,那么index的goback会去哪里呢?这就形成了一个不好的环状。
goback()只能回到setPass页面
故而我们需要goback(key)来实现,有这么一个独一无二的key可以实现。
let {key}=this.props.navigation.state; \\这个key就实现了
我们只要在setSuccess页面拿到index页面的key即可goback回去。我是通过一级一级跳转传参传过去的,你也可以存本地、存redux或者什么可以拿到就行。
网络监测NetInfo是个坑
不知道大家有没有遇到过NetInfo的使用会出现判断错误的情况,我当时查了react-native isssus才发现这个api是有问题的,而且还未修复,即只能生效一次。后来找到一个取巧的办法就是fetch(百度)或者webview访问百度,根据返回状态来判断网络状态。如果大家有更好的办法希望给我留言。
webview
这是一个大坑。首先webview通信需要在web端绑定一个开通信道的方法,而且只调用一次就可以了。在一次大厂面试中也问过相关webview的疑惑,大佬说是本身性能存在问题,所以建议慎重选择。
(function() {
function awaitPostMessage() {
var isReactNativePostMessageReady = !!window.originalPostMessage;
var queue = [];
var currentPostMessageFn = function store(message) {
if (queue.length > 100) queue.shift();
queue.push(message);
};
if (!isReactNativePostMessageReady) {
var originalPostMessage = window.postMessage;
Object.defineProperty(window, 'postMessage', {
configurable: true,
enumerable: true,
get: function () {
return currentPostMessageFn;
},
set: function (fn) {
currentPostMessageFn = fn;
isReactNativePostMessageReady = true;
setTimeout(sendQueue, 0);
}
});
window.postMessage.toString = function () {
return String(originalPostMessage);
};
}
function sendQueue() {
while (queue.length > 0) window.postMessage(queue.shift());
}
};
awaitPostMessage(); // *Call this only once in your Web Code.*
window.postMessage(JSON.stringify({ status: 'ready' }));
})
复制代码
但是在后期使用中遇到了通信延迟几十秒的状态,大家应该明白这个是很大的一个问题,后来我通过定位发现是web给rn端发消息时在信道中传输时间太慢,react-native issue中也有很多相关问题未解决。后来是我们后端go大神把需要web端处理的问题写在.arr和.framework文件,在原生中做了请求处理才解决。所以慎重使用。
这次的文章先总结到这里,希望大佬们提出指正和批评。谢谢!