在Windows上將ReactNative集成到現有的Android項目

 

React Natvie的官方文檔的 Integrating with Existing Apps 已經很詳細地教咱們如何將React Natvie集成到如今的Android項目。我根據官方文檔的步驟，在Windows上將React Native集成到現有的Android的過程記錄下來。

集成到Android項目的要求：

• 一個現有的Android項目
• 搭建好環境（參考上一篇文章：http://my.oschina.net/common1140/blog/550501）

首先，建立一個Android的項目（這裏用來模擬現有的Andorid項目）

在現有的Android的build.gradle文件中增長React Natvie的依賴

點擊Maven Central 查看React Natvie的最新版本，這裏的最新版本已是0.18.0了。

在build.gradle文件中加入 compile 'com.facebook.react:react-native:0.18.+'  。

在AndroidManifest.xml加入訪問網絡的權限

<uses-permission android:name="android.permission.INTERNET" />

 

將下面的代碼複製到項目中（記得在AndroidManifest.xml註冊該類）

public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {

    public static void launch(Activity activity){
        Intent intent = new Intent(activity, MyReactActivity.class);
        activity.startActivity(intent);
    }

    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "MyAwesomeApp", null);

        setContentView(mReactRootView);
    }

    @Override
    protected void onResume() {
        super.onResume();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onResume(this, this);
        }
    }

    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onPause();
        }
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }


    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }


    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }
}

 

接下來，就要將JS增長到現有的項目

在項目的根目錄打開命令行(切換到根目錄，按住Shift，右擊就會出現‘在此處打開命令窗口’)

輸入npm init，竟然彈這些玩意出來（靠），一開始我覺得出錯了，後來是才知道是填東西的（生成package.json這個文件的）

機智的我在name那裏輸入了括號後面的文字，彈出下面的錯誤（不可以大寫的），而後將括號的文字所有輸入小寫就能夠了。

基本按括號後面的提示填就能夠了，最後就在項目的根目錄生成package.json這個文件。

最後提示Is this ok? 輸入yes

而後，輸入npm install --save react-native

這裏須要等待……

下載完了

接下來，輸入curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

回車竟然彈出curl不是內部命令。（百度一查curl是Linux系統的小工具的用來下載文件的，Windows沒有這個工具）

這裏咱們分析一下這個命令的做用。從https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig下載文件而且文件名爲.flowconfig。

那咱們就用其餘的下載工具下載這個文件放到根目錄不就能夠了嗎。（不用執行上面那個命令）

這裏我用360極速瀏覽器新建下載任務將連接複製到下載任務那裏。（記住文件爲.flowconfig）

下載後放到根目錄下

可能有人會問不能從其餘的項目.flowconfig複製過來麼？理論上是能夠的，左邊是其餘項目的，右邊是剛下載，在文件的最下面能夠看出版本不同了。因此建議下載最新.flowconfig文件。

接着，輸入react-native start啓動服務，發現報錯了（package.json解析不了)。

打開package.json將test這行刪掉，而後保存。

再運行react-native start，能夠看到服務已啓動，端口爲8081。

在瀏覽器輸入地址：http://localhost:8081/index.android.bundle?platform=android

若是能夠打開，則證實服務無問題了。

最後輸入gradlew installDebug命令運行項目。

個人現有項目的minSdkVersion爲15,而react natvie的0.18.0版本須要minSdkVersion爲16.這裏將minSdkVersion修改成16後再運行。

 編譯成功了。

（若是用真機調試能夠先閱讀上一篇文章）

 

附：
項目的GitHub地址：https://github.com/zhonghanwen/MyAwesomeApp