react-native第二彈來了！

小太陽本尊發表於2018-09-28
React

距離上次發表文章已過去兩月半，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檔案，在原生中做了請求處理才解決。所以慎重使用。

這次的文章先總結到這裡，希望大佬們提出指正和批評。謝謝！

相關文章