一文讀懂ReactNative0.60的 Autolinking 新特性

React Native 0.60是一個重要的版本更新，帶來一些很是有用的變化，其中Autolinking 就是一個很是實用的特性。 看看官方的描述：

Native Modules are now Autolinked

The team working on the React Native CLI has introduced major improvements to native module linking called autolinking! Most scenarios will not require the use of react-native link anymore. At the same time, the team overhauled the linking process in general. Be sure to react-native unlink any preexisting dependencies as mentioned in the docs above.

當咱們使用第三方原生依賴時，再也不須要執行額外react-native link的命令，就能夠自動關聯三方庫。

更深一層，之前引入原生庫時會侵入項目自己的代碼（想一想安卓上每次都要修改MainApplication.java文件吧），而有了Autolinking後，咱們能夠有一個更加乾淨的項目代碼。

Autolinking特性官方說明

咱們此次在項目中也嘗試了這個新特性，整體感受很是不錯，安利一下。

若是你是已有項目升級RN到0.60，記得要使用react-native unlink 移除現有的關聯，再體驗Autolinking新特性

1、引入第三方庫方法上帶了的變化

Before

# install
yarn add react-native-webview
react-native link react-native-webview
# run
yarn react-native run-ios
yarn react-native run-android
複製代碼

After

# install
yarn add react-native-webview
cd ios && pod install && cd .. # CocoaPods on iOS needs this extra step
# run
yarn react-native run-ios
yarn react-native run-android
複製代碼

能夠看到，有了autolink特性後，咱們不須要再手動執行link命令來連接原生庫。 可是在ios平臺上，咱們須要使用pod install命令來安裝原生依賴。 也就是說，在安卓平臺上，RN會自動幫咱們處理原生依賴，ios則使用了pod來管理。

2、autolink對項目代碼的影響

ios

當使用react-native link命令關聯原生依賴時，會自動執行以下操做

1.將三方庫的.xcodeproj文件加入到工程的Libraries分組中

2.將三方庫的.a文件引入到項目的Link Binary With Libraries組內

而在使用了autolink後，ios平臺統一使用CocoaPods來管理三方庫，第三方依賴都在pods中管理，不在影響咱們原來的工程代碼。

安卓

當使用react-native link命令關聯原生依賴時，會自動修改三個文件

• settings.gradle
• app/build.gradle
• MainApplication.java

以React Native DateTimePicker爲例

// setting.gradle
include ':react-native-datetimepicker'
project(':react-native-datetimepicker').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/datetimepicker/android')

// app/build.gradle
dependencies {
    ...
    implementation project(':react-native-datetimepicker')
}

// MainApplication.java
+ import com.reactcommunity.rndatetimepicker.RNDateTimePickerPackage;

public class MainApplication extends Application implements ReactApplication {

  @Override
  protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
+   packages.add(new RNDateTimePickerPackage());
    return packages;
  }
}
複製代碼

而在使用了autolink後，這三個文件都不要修改。是的，MainApplication.java中也不須要手動添加package了，由於框架會自動去發現原生依賴，並自動調用構造函數來引入包。

經過以上分析，能夠看到，在使用了新的autolink特性後，減小了第三方庫對項目代碼的侵入，簡化了項目管理，確實是一個很是好的改進。

3、autolink能夠解決全部問題嗎

autolink這麼好，是否是能夠徹底拋棄手動link了呢？

固然不是，跟全部自動化工具同樣，總有一些特殊狀況是沒法覆蓋的，因此autolink也提供了相應的方法來處理這些問題。 以極光的分享組件jshare-react-native爲例，若是使用autolink，那麼在安卓上面就會報錯

java:84: 錯誤: 沒法將類 JSharePackage中的構造器 JSharePackage應用到給定類型;

這是由於autolink在引入第三包時，老是默認調用無參數的構造函數，而jshare的構造函數確是這樣寫的：

public class JSharePackage implements ReactPackage {

    public JSharePackage(boolean toastFlag, boolean logFlag) {
         Logger.SHUTDOWNTOAST = toastFlag;
         Logger.SHUTDOWNLOG = logFlag;
    }

....
}
複製代碼

因此，這種場景下是沒法自動處理的。 固然，咱們能夠在

node_modules/jshare-react-native/android/src/main/java/cn/jiguang/share/reactnative/JSharePackage.java

中直接修改JSharePackage的構造函數，可是會帶來維護不便的問題：不只每次更新node_modules都須要手動改，並且這個改動須要做爲項目約定，團隊每一個人時刻都須要注意並處理，維護成本過高。

因此更優雅的方法應該是使用官方提供的react-native.config.js 配置來解決這個問題：

config中有一個android.packageInstance參數，用來自定義三方庫的實例化方法，以下 platforms.android.packageInstance

Custom syntax to instantiate a package. By default, it's a new AwesomePackage(). It can be useful when your package requires additional arguments while initializing.

所以咱們在項目根目錄下添加一個react-native.config.js文件，並填入以下配置

// react-native.config.js

module.exports = {
  dependencies: {
    'jshare-react-native' : {
      platforms: {
        android: {
          packageInstance: 'new JSharePackage(false, false)'
        }
      }
    }
  }
}
複製代碼

而後從新run-android便可

關於react-native.config.js的說明，react native CLI cofiguration

歡迎留言交流~

---

關於咱們

深圳市淺海科技有限公司

咱們是一個高效、熱情、有責任的技術團隊，承接各類軟件系統定製需求。

長期招聘遠程開發者，若是您喜歡嘗試新技術，有一點代碼潔癖，可以使用文檔進行高效的溝通，React/nodejs/ES6任意一種玩的飛起，那麼，歡迎來撩~（想賺快錢的請繞道，謝謝）

簡歷請發送到：service@qianhaikeji.cn

固然，也歡迎甲方爸爸把項目甩咱們臉上。