在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