React-native~UIWebView完美切換至WKWebView

親愛的小夥伴兒們你們好:

        今天上傳ipa到appstore在預審覈的時候收到一份郵件，才知道Apple在2020年4月份中止接受使用UIWebView api的APP，因此你們在上傳APP的過程當中也許會收到相似內容的郵件，如圖：

這裏要着重說一下，已經上線的app雖然會收到這封提示郵件，可是並不影響發版（前提app要審覈經過）。若是是第一次上線的話，那影響就大了，直接被拒。因此 仍是要把這個問題完全解決，不能留下技術債。

1、環境簡介

    咱們的項目是一個React-native 項目，我先把項目的依賴軟硬件環境描述一下：

react-native：'0.50.0'
node: '10.16.3'
JDK: '1.8.0_73'
MACOS: '10.14.6'
Xcode: '11.3'
androidStudio: '3.5'
vscode: '1.38.0'

全局安裝：react-native-cli  、yarn
複製代碼

2、問題排查：

        在根目錄下 執行grep -r UIWebView . 檢測使用 uiwebview 的組件和sdk。

3、選擇的方案：

採用react-native-webview：’8.0.0‘ 來替換代碼中Webview組件。

yarn add react-native-webview --save  
react-native link react-native-webview     
import { WebView } from 'react-native-webview';
複製代碼

      替換以後，發現項目依賴的sdk，由於版本有些老，依賴的仍是UIWebview。這個時候下載最新的sdk直接替換 就能夠了。

4、遇到的坑：

     (1)運行ios模擬器 報錯找不到模擬器Could not find iPhone * simulator  。

找到項目中node_modules/react-native/local-cli/runIOS/findMatchingSimulator.js
      一、if (version.indexOf('iOS') !== 0 )  替換成    if (!version.includes("iOS" ))
      二、if(simulator.availability!=='(available)')  替換成  if(simulator.isAvailable!== true)
      三、使用 react-native run-ios --simulator="iPhone *"  指定模擬器運行
複製代碼

        若是不想指定模擬器，能夠在Xcode中設置一下，iphone-6版本的模擬器。而後可直接運行react-native run-ios便可。

     (2)運行react-native run-ios 報config.h 報錯。

cd node_modules/react-native/third-party/glog-0.3.4
運行../../scripts/ios-configure-glog.sh
複製代碼

       (3)遇到PCH was compiled with module cache path問題。

這個問題是由 copy 工程 引發的緩存cache衝突

須要把ios/build文件刪除 而後從新build  
rm -rf ios/build
複製代碼

      (4)android項目的兼容問題,若是您的項目中使用了androidx，能夠忽略此問題。

           須要把依賴androidx的類，按照下面寫法作一下修改：

import android.support.annotation.RequiresApi;
     import android.support.v4.content.ContextCompat;
     import android.support.v4.content.FileProvider;
複製代碼

      (5)android項目DexArchiveMergerException: Unable to merge dex 問題      

在主工程的gradle種添加
           defaultConfig {
                multiDexEnabled true
           }
  添加 google()
複製代碼

結束語：

      由於每一個工程，所依賴的軟硬件環境都不同。若是小夥伴 在按照以上方案操做以後，遇到其餘問題，能夠留言。咱們一塊兒研究分析。