ReactNative升級0.56.0注意問題

wayne214發表於2019-03-04
React

當前專案react-native的版本是0.53.3，因為最近在做一系列效能優化的工作，於是計劃升級一下RN的版本，升級至0.56.0。
先看一下ReactNative0.56.0版本更新的內容：
github.com/react-nativ…
中文版：[0.56] React Native 中文更新日誌
步驟及遇到的問題如下：

1.使用https://reactnative.cn/docs/upgrading/中基於Git的自動合併更新方式：

首先全域性安裝react-native-git-upgrade工具模組：

$ npm install -g react-native-git-upgrade
複製程式碼

2.接下來進行更新操作

$ react-native-git-upgrade
# 這樣會直接把react native升級到最新版本

# 或者是：

$ react-native-git-upgrade X.Y.Z
# 這樣把react native升級到指定的X.Y.Z版本
複製程式碼

那麼更新到0.56.0就是

$ react-naitve-git-update 0.56.0
複製程式碼

3.等待升級結束後，需要解決衝突, 下面的這些檔案的衝突都需要進行解決一下

image.png
檔案中的衝突會以分隔線隔開，並清楚的標記出處，例如下面這樣：

13B07F951A680F5B00A75B9A /* Release */ = {
  isa = XCBuildConfiguration;
  buildSettings = {
    ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
<<<<<<< ours
    CODE_SIGN_IDENTITY = "iPhone Developer";
    FRAMEWORK_SEARCH_PATHS = (
      "$(inherited)",
      "$(PROJECT_DIR)/HockeySDK.embeddedframework",
      "$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
    );
=======
    CURRENT_PROJECT_VERSION = 1;
>>>>>>> theirs
    HEADER_SEARCH_PATHS = (
      "$(inherited)",
      /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
      "$(SRCROOT)/../node_modules/react-native/React/**",
      "$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
    );
上面程式碼中的"ours"表示你自己的程式碼，而"theirs"表示 React Native 的官方程式碼。然後你可以根據實際情況判斷，選擇某一方晉級，另一方出局。
複製程式碼

注意問題

一、0.56.0以上的RN使用Babel 7

React Native now uses Babel 7
When upgrading to 0.56, make sure to bump your babel-preset-react-native package.json dependency to 5.0.2 or newer (but still as fixed value).
React Native 現在使用 Babel 7，升級到 0.56 後，請確保將 babel-preset-react-native package.json 依賴項升級到 ^5.0.2 或更高版本。
那麼就需要升級一下babel-preset-react-native版本

yarn add babel-preset-react-native@5.0.2 --dev
複製程式碼

二、升級後遇到react native version mismatch問題

reactnativeversionmismatch.png

參考了https://stackoverflow.com/questions/47763824/react-native-version-mismatch中的解決方案：
1.IOS
進入專案中：

cd ios && pod install
複製程式碼
For others with the same problem on iOS with CocoaPods:

I tried all of the solutions above, without luck. I have some packages with native dependencies in my project, and some of those needed pod modules being installed. The problem was that React was specified in my Podfile, but the React pod didn`t automatically get upgraded by using react-native-git-upgrade.

The fix is to upgrade all installed pods, by running cd ios && pod install.
複製程式碼

2.Android

image.png

第三方庫使用的buildToolsVersion版本太低，不需要手動修改庫內容，在android/build.gradle中新增以下內容，強制所有依賴使用相同版本。

subprojects {
   afterEvaluate {project ->
       if (project.hasProperty("android")) {
           android {
               compileSdkVersion 26
               buildToolsVersion `26.0.3`
           }
       }
   }
}
複製程式碼

其他升級問題可參考這篇文章,也可在評論區與我進行溝通。

ReactNative從0.47 升級到0.56遇到的問題

相關文章