Github 項(xiàng)目 HybridApp

這是一個(gè)在Android原生應(yīng)用中集成React Native 的項(xiàng)目。在原生應(yīng)用中集成了一個(gè)仿豆瓣客戶端（很久之前寫(xiě)的，UI已經(jīng)不怎么像了o(╯□╰)o）的React Native應(yīng)用。

效果圖

top250

yuanxian

更多效果圖可參考HybridApp

集成React Native到原生應(yīng)用

其實(shí)，關(guān)于怎么把React Native集成到原生應(yīng)用中，React Native的官方文檔Integration with Existing Apps已經(jīng)有了詳細(xì)的說(shuō)明，嚴(yán)格的照著文檔一步一步執(zhí)行下來(lái)，基本上是沒(méi)有什么問(wèn)題的。

這里再補(bǔ)充一點(diǎn)官網(wǎng)沒(méi)有提及的內(nèi)容吧，就是如果在React Native 應(yīng)用中使用到了原生應(yīng)用的組件，比如常見(jiàn)的react-native-camera/react-native-image-picker 等，這個(gè)時(shí)候該如何正確的把這寫(xiě)原生組件集成到原生項(xiàng)目中呢？

其實(shí),如果你用AS打開(kāi)過(guò)React Native項(xiàng)目下Android目錄的話，可以發(fā)現(xiàn)其實(shí)原生組件（比如react-native-camera）就是一個(gè)主工程(app）依賴的子module.在React Native的項(xiàng)目中，我們通過(guò)執(zhí)行react-native link 這個(gè)命令，React Native框架會(huì)自動(dòng)幫我們實(shí)現(xiàn)整個(gè)依賴過(guò)程，在這中間主要做了三件事：

• 在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 結(jié)點(diǎn)中添加依賴

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（）方法中，為我們添加組件所對(duì)應(yīng)的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";
        }
    };

不得不說(shuō)，這幾個(gè)自動(dòng)實(shí)現(xiàn)的步驟的確很牛逼，不知道內(nèi)部是咋實(shí)現(xiàn)的？?(???????)?

稍顯遺憾的是，把React Native集成到原生項(xiàng)目中后，再次執(zhí)行react-native link后上述步驟是無(wú)法自動(dòng)實(shí)現(xiàn)的，因此這就需要我們?nèi)ナ謩?dòng)添加原生組價(jià)的依賴。其實(shí)這個(gè)過(guò)程也很簡(jiǎn)單，理解了node_modules目錄和項(xiàng)目目錄之間的相對(duì)路勁關(guān)系即可。這里以此項(xiàng)目中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')

這里其實(shí)和原生應(yīng)用中子module是一個(gè)意思，只不過(guò)在原生項(xiàng)目中，子module一般都是直接創(chuàng)建在項(xiàng)目根目錄中，就省去了寫(xiě)projectDir 的步驟了。有了這個(gè)自module，剩下的兩個(gè)步驟就很簡(jiǎn)單了，這里就不再贅述，直接看代碼就明白了。

更多細(xì)節(jié)源碼，有興趣的同學(xué)可參考github源碼了解。

更多

這里集成在項(xiàng)目中React Native應(yīng)用的源碼在這里React Native 仿豆瓣電影，對(duì)React Native應(yīng)用感興趣的童鞋可以觀摩一下O(∩_∩)O哈哈~。

應(yīng)用中用到的數(shù)據(jù)，抓取自豆瓣API及豆瓣開(kāi)發(fā)平臺(tái)，僅供學(xué)習(xí)

更多React Native 學(xué)習(xí)整理，請(qǐng)看ReactNativePractice 歡迎fork & star

放假前人都走光了，不想工作，玩耍了一上午，終于寫(xiě)完了，回家過(guò)年！O(∩_∩)O哈哈~