react-native第二弹来了！

距离上次发表文章已过去两月半，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文件，在原生中做了请求处理才解决。所以慎重使用。

这次的文章先总结到这里，希望大佬们提出指正和批评。谢谢！