阅读 327

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或者什么可以拿到就行。

alt

网络监测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文件,在原生中做了请求处理才解决。所以慎重使用。


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

关注下面的标签,发现更多相似文章
评论