在Android原生應用中整合React Native版本的豆瓣電影

IAM四十二發表於2018-02-13
AndroidReact Native

Github 專案 HybridApp

這是一個在Android原生應用中整合React Native 的專案。在原生應用中整合了一個仿豆瓣客戶端（很久之前寫的，UI已經不怎麼像了o(╯□╰)o）的React Native應用。

效果圖

top250

yuanxian

更多效果圖可參考HybridApp

整合React Native到原生應用

其實，關於怎麼把React Native整合到原生應用中，React Native的官方文件Integration with Existing Apps已經有了詳細的說明，嚴格的照著文件一步一步執行下來，基本上是沒有什麼問題的。

這裡再補充一點官網沒有提及的內容吧，就是如果在React Native 應用中使用到了原生應用的元件，比如常見的react-native-camera/react-native-image-picker 等，這個時候該如何正確的把這寫原生元件整合到原生專案中呢？

其實,如果你用AS開啟過React Native專案下Android目錄的話，可以發現其實原生元件（比如react-native-camera）就是一個主工程(app）依賴的子module.在React Native的專案中，我們通過執行react-native link 這個命令，React Native框架會自動幫我們實現整個依賴過程，在這中間主要做了三件事：

  • 在setting.gradle 檔案中新增依賴元件的別名及路徑
include ':react-native-camera'
project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')
複製程式碼
  • 在app/build.gradle dependencies 結點中新增依賴
dependencies {
    compile project(':react-native-camera')
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
}
複製程式碼
  • 在MainApplication.java 的getPackages（）方法中，為我們新增元件所對應的Package。
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new RCTCameraPackage()
            );
        }

        @Override
        protected String getJSMainModuleName() {
            return "index";
        }
    };
複製程式碼

不得不說，這幾個自動實現的步驟的確很牛逼，不知道內部是咋實現的？୧(๑•̀◡•́๑)૭

稍顯遺憾的是，把React Native整合到原生專案中後，再次執行react-native link後上述步驟是無法自動實現的，因此這就需要我們去手動新增原生組價的依賴。其實這個過程也很簡單，理解了node_modules目錄和專案目錄之間的相對路勁關係即可。這裡以此專案中setting.gradle 中的路勁為例：

include ':app'
include ':react-native-camera'
project(':react-native-camera').projectDir = new File(rootProject.projectDir, 'node_modules/react-native-camera/android')
include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, 'node_modules/react-native-video/android')
include ':react-native-image-crop-picker'
project(':react-native-image-crop-picker').projectDir = new File(rootProject.projectDir, 'node_modules/react-native-image-crop-picker/android')
複製程式碼

這裡其實和原生應用中子module是一個意思，只不過在原生專案中，子module一般都是直接建立在專案根目錄中，就省去了寫projectDir 的步驟了。有了這個自module，剩下的兩個步驟就很簡單了，這裡就不再贅述，直接看程式碼就明白了。

更多細節原始碼，有興趣的同學可參考github原始碼瞭解。

更多

這裡整合在專案中React Native應用的原始碼在這裡React Native 仿豆瓣電影，對React Native應用感興趣的童鞋可以觀摩一下O(∩_∩)O哈哈~。

應用中用到的資料，抓取自豆瓣API及豆瓣開發平臺，僅供學習

更多React Native 學習整理，請看ReactNativePractice 歡迎fork & star

相關文章