剛建立的React Native 微信公眾號，歡迎微信掃描關注訂閱號，每天定期會分享react native 技術文章，移動技術乾貨,精彩文章技術推送。同時可以掃描我的微信加入react-native技術交流微信群。歡迎各位大牛,React Native技術愛好者加入交流！

今天分享一篇關於混合開發的文章： 如何在現有的Android專案中整合React Native。

我會以流水賬的形式來向大家詳細介紹如何實現，仔細看清楚步驟即可。

1.建立Android工程：ReactNativeApp

    關於如何建立Android工程就不再多述了。

2.工程建立完畢後，切換到Android Studio左下角的Terminal視窗，執行npm init命令。

   

   

   

    npm init 命令的作用是生成package.json檔案，即RN的配置檔案，當輸入npm init命令回車後，會提示讓你輸入一些基本的資訊，選擇填寫即可。

3.執行npm install --save react react-native 命令

  

   install --save react react-native命令用於安裝 React、React Native 相關檔案。

4.建立.flowconfig檔案

   .flowconfig檔案可以從facebook的github上覆制，然後在工程的根目錄建立.flowconfig檔案，將其內容複製進去即可。

   

5.此時，你的工程中已經生成了package.json檔案，然後將“start": "node node_modules/react-native/local-cli/cli.js start"新增到scripts節點下

   

6.新增index.android.js檔案，也就是你的RN介面到根目錄下

   

7.在App的build.gradle檔案下新增facebook react 依賴包

   

    注意最新版本中支援的是23，即需要你修改編輯SDK的版本為23，以及appcompat-v7:23.0.1，同時將minSDK改為16.

8.在project的build.gradle檔案下新增如下

  

9.新增網路許可權管理

  

10.新增NDK的支援

  

  

11.在App的build.gradle檔案的android節點下新增：

12.以上配置完成後，React Native就算整合到了我們現有的專案，接下來需要用Activity來展示RN，所以需要編寫如下程式碼：

     RN舊版本中，主要使用了兩個類來完成介面的渲染工作：ReactRootView，ReactInstanceManager。顧名思義，ReactRootView代表了載入進來的RN介面，ReactInstanceManager用來構建React執行環境，管理React的屬性配置。

有兩點需要注意：

        （1）除錯模式下，需要將setUseDeveloperSupport的值設定為true，否則報錯。

        （2）startReactApplication中的第二個引數，名稱需要與index.android.js中AppRegister的名稱相同。

新版本RN中只需要自定義一個Activity，並繼承ReactActivity，實現getMainComponentName方法，在getMainComponentName方法中返回RN註冊的名稱即可，名稱需要與index.android.js中AppRegister的名稱相同。通過原始碼可以看到，其實在ReactActivity中已經幫助我們實現了ReactRoow的新增和ReactInstanceManager的預設配置。

/**
 * Created by Song on 2017/2/13.
 */
public class MyReactActivity extends ReactActivity {

    @Nullable
    @Override
    protected String getMainComponentName() {
        return "HotRN";
    }

}

然後建立Application，去初始化ReactNativeHost。自定義Application需要繼承ReactApplication，在原始碼loadApp方法中，會將當前Activity的Application強轉為ReactApplication，所以這是必須的步驟。

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        protected boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

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

    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this,false);
    }

}

OK，如果以上步驟整合順利的話，那麼就大功告成啦！！

13.繼續切換到Terminal視窗，執行npm start來啟動

      如果出現錯誤，則基本可以定位為沒有bundle檔案。此時需要我們手動來生成bundle檔案，並放在assets目錄下（app/src/main/assets）。

      手動生成bundle檔案，需要我們執行如下命令：

       react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

       （1）--platform：平臺

       （2）--dev：開發模式

       （3）--entry-file：條目檔案

       （4）--bundle-output：bundle檔案生成的目錄

       （5）--assets-dest：資原始檔生成的目錄

    

此時執行你的Android工程，可以看到RN已經被我們完美的整合進來啦~

可以明顯看到，第一次進入的時候，由於載入JsBundle，導致有一些延遲，但是當我們第二次進入的時候，就會瞬間載入完成並顯示出來。此類問題的解決方案我單獨寫了一篇部落格來介紹：

如果你的專案要開啟混淆策略，可以在proguard下新增如下：

# React Native

# Keep our interfaces so they can be used by other ProGuard rules.
# See http://sourceforge.net/p/proguard/bugs/466/
-keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip
-keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters
-keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip

# Do not strip any method/class that is annotated with @DoNotStrip
-keep @com.facebook.proguard.annotations.DoNotStrip class *
-keep @com.facebook.common.internal.DoNotStrip class *
-keepclassmembers class * {
    @com.facebook.proguard.annotations.DoNotStrip *;
    @com.facebook.common.internal.DoNotStrip *;
}

-keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * {
  void set*(***);
  *** get*();
}

-keep class * extends com.facebook.react.bridge.JavaScriptModule { *; }
-keep class * extends com.facebook.react.bridge.NativeModule { *; }
-keepclassmembers,includedescriptorclasses class * { native <methods>; }
-keepclassmembers class *  { @com.facebook.react.uimanager.UIProp <fields>; }
-keepclassmembers class *  { @com.facebook.react.uimanager.annotations.ReactProp <methods>; }
-keepclassmembers class *  { @com.facebook.react.uimanager.annotations.ReactPropGroup <methods>; }

-dontwarn com.facebook.react.**

# okhttp

-keepattributes Signature
-keepattributes *Annotation*
-keep class okhttp3.** { *; }
-keep interface okhttp3.** { *; }
-dontwarn okhttp3.**

# okio

-keep class sun.misc.Unsafe { *; }
-dontwarn java.nio.file.*
-dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement
-dontwarn okio.**

OK，今天的內容就到這裡了，下一篇部落格我將和大家分享如何實現熱更新，敬請期待！

原始碼已分享到github，感興趣的大家可以flow，star哈~

原始碼下載