距离上次发表文章已过去两月半，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传给子级才能使用。例如
//父级传参数//子级调用this.props.nav.navigate('',{params:params});复制代码
接下来比较重要的就是goback。 goback()就是简单的返回到上级页面，可是有时候我们需要返回到指定页面该怎么办呢？这里有一个最简单的key值。
例如有五个页面：A index setting setPass setSuccess
流程是这样的A->index->setting->setPass->setSuccess->indexlet {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文件，在原生中做了请求处理才解决。所以慎重使用。
这次的文章先总结到这里，希望大佬们提出指正和批评。谢谢！