react-native 0.6x升級適配說明

react-native 0.6x升級適配說明

RN0.6x已經發布有一段時間了，react-navigation也在前不久進入了5x的時代。爲了讓大家少踩坑，現已將課程升級適配到RN0.6x以及react-navigation5x，另外，包括友盟分享和統計在內的所有插件也已升級是配到最新版。

爲了幫助到大家順利的學習使用新版本RN與react-navigation等相關庫，我將整個的升級適配過程總結出以下文檔供小夥伴們學習參考：

1. react-native 0.6x升級適配說明
2. 新版react-navigation升級適配說明
3. 友盟分享和統計最新版升級適配說明
4. 其他升級適配說明
5. FAQ

1.react-native 0.6x升級適配說明

本次爲了將項目從0.59.9升級適配到0.6x，由於變更跨度比較大，顧採用了“創建一個新的RN項目，然後將代碼移植到這個RN項目”的方式進行升級適配的，變更了那些代碼，可查看提交記錄：c0d8d0b5

1.1 0.6x版本重大特性

• 0.61.0
  • react版本採用16.9
  • 採用了use_frameworks!來更好的支持CocoaPods
  • 默認打開"Fast refresh"，可以通過devtool關閉
  • 其他changelog
• 0.60：0.60標誌着RN進入了又一個新的里程碑，本次更新焦距在提效與與時俱進，比如：自動link、默認支持CocoaPods等
  • 支持了Android X，如果你用的RN是0.6x那麼對應的三方插件請用適配了Android X的版本（可去插件的官庫上看change log）
  • 移除了WebView和Geolocation，用到這些組件時需要單獨引入對應的獨立插件
    • react-native-webview
    • react-native-geolocation
  • iOS項目默認支持CocoaPods，所以打開ios目錄下的項目時記得選擇xxx.xcworkspace文件
  • 支持自動link，之前npm安裝完還需要手動link的插件現在RN腳手架能夠自動幫你link，釋放了雙手
  • 其他changelog

1.2 新版本帶來的小技巧

更簡潔的運行指令

新版本RN腳本中引入了android和ios簡化命令：

"scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    ...
  },

現在通過npm run android、npm run ios就可以運行項目了。

升級助手

RN社區提供了一個查看不同版本間升級變更的小助手：叫 upgrade helper webtool，通過它你能快速查看你當前的RN版到你要升級到的RN版本間的所有變更和需要注意的點，比如：從0.59.9到0.61.0-rc.0的變更內容：0.59.9 -> 0.61.0-rc.0。

2. 新版react-navigation升級適配說明

• 傳送門：新版react-navigation升級適配說明

  3.友盟分享和統計最新版升級適配說明

現已將項目中所用到的友盟分享、登錄和統計相關的庫和代碼升級到了最新版，並且做了相應適配。

大家在集成適配最新友盟分享、登錄和統計時可參考這次提交：6cc61494

重要變更

統計方法由track 變成了 onEvent使用時需要留意：

//新版本友盟SDK 時間統計方法由 track -> onEvent
AnalyticsUtil.onEvent("SearchButtonClick");

4. 其他升級適配說明

AsyncStorage 導入方式發生變化

react-native中的AsyncStorage在未來的版本迭代中將會被從react-native中移除，官方推薦使用 react-native-community/async-storage來代替：

安裝方式：

yarn add @react-native-community/async-storage

然後：

cd ios/ && pod install

使用方式：

//將
import {AsyncStorage} from 'react-native';
//改成
import AsyncStorage from '@react-native-community/async-storage';

其他API不變。

5.FAQ

Cannot get property 'supportLibVersion' on extra properties extension as it does not exist

問題描述

升級到rn 0.61.0後報上述錯誤

解決辦法

在android/build.gradle中添加supportLibVersion：

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 28
        supportLibVersion = "28.0.0"
    }

Unsupported Modules Detected

問題描述

Unsupported Modules Detected.
Compilation is not supported for following modules: react-native-vector-icons

解決辦法

刪除android下的./idea 目錄然後重新打開項目。

Update is invalid - A JS bundle file named "null"

問題描述

 "react-native": "0.60.5",
 "react-native-code-push": "^5.7.0",

Codepush jsbundle下載完成，跟新時報錯，如下：

 com.microsoft.codepush.react.CodePushInvalidUpdateException: Update is invalid - A JS bundle file named "null" could not be found within the downloaded contents. Please check that you are releasing your CodePush updates using the exact same JS bundle file name that was shipped with your app's binary.
        at com.microsoft.codepush.react.CodePushUpdateManager.downloadPackage(CodePushUpdateManager.java:241)
        at com.microsoft.codepush.react.CodePushNativeModule$3.doInBackground(CodePushNativeModule.java:217)
        at com.microsoft.codepush.react.CodePushNativeModule$3.doInBackground(CodePushNativeModule.java:211)
        at android.os.AsyncTask$2.call(AsyncTask.java:333)
        at java.util.concurrent.FutureTask.run(FutureTask.java:266)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1162)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:636)
        at java.lang.Thread.run(Thread.java:764)
2019-09-03 14:52:57.952 10010-10045/com.github_rn I/ReactNativeJS

解決辦法

在MainApplication.java中添加：CodePush.getJSBundleFile()：

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

        @Override
        protected String getJSBundleFile() {
        return CodePush.getJSBundleFile();
        }
        ...

Error in getting binary resources modified time

問題描述

 "react-native": "0.60.5",
 "react-native-code-push": "^5.7.0",

Codepush檢測更新，logcat上述錯誤。

解決辦法

在android/app/build.gradle添加：

apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

參考：https://github.com/Microsoft/react-native-code-push/issues/1046

Android不顯示矢量圖標

問題描述

版本信息：

 "react-native": "0.60.5",
 "react-native-vector-icons": "^6.6.0",

不報錯但是不顯示圖標。

解決辦法

在android/app/build.gradle添加：

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

參考：https://github.com/oblador/react-native-vector-icons#option-with-gradle-recommended

Unrecognized font family 'Ionicons' or 'MaterialIcons'

問題描述

啓動iOS APP報錯，無法加載字體文件：

版本信息：

 "react-native": "0.60.5",
 "react-native-vector-icons": "^6.6.0",

無論是自動link還是手動link都包這個錯誤。

解決辦法

第一步：

切換到ios目錄執行install：

cd ios
pod install

第二步：

將下面配置粘貼到info.plist：

<key>UIAppFonts</key>
<array>
  <string>AntDesign.ttf</string>
  <string>Entypo.ttf</string>
  <string>EvilIcons.ttf</string>
  <string>Feather.ttf</string>
  <string>FontAwesome.ttf</string>
  <string>FontAwesome5_Brands.ttf</string>
  <string>FontAwesome5_Regular.ttf</string>
  <string>FontAwesome5_Solid.ttf</string>
  <string>Foundation.ttf</string>
  <string>Ionicons.ttf</string>
  <string>MaterialIcons.ttf</string>
  <string>MaterialCommunityIcons.ttf</string>
  <string>SimpleLineIcons.ttf</string>
  <string>Octicons.ttf</string>
  <string>Zocial.ttf</string>
</array>