已有Android工程集成ReactNative頁面

原文 http://www.jianshu.com/p/d63c9a22973d

React Native出自非死book之手, 而且剛剛更新了文檔, 差一點我就放棄它了, 然而又撈了回來, 相比其他, 畢竟還是大公司大品牌有保障. 不多說了, 想知道更多, 自己網上看吧.

網址: http://非死book.github.io/react-native/

讓我們看看Docs中Android的Guides.

Integrating with Existing Apps

里面是教如何在已有的Android項目集成ReactNative. 文檔有一些問題, 容我慢慢說來.

1. JS框架

設置node_modules, 就是 配置JS文檔 所說的, 在項目中, 調用npm install --save react-native, 然速度特別特別慢, 幾乎是不可能完成的任務(我是沒有完成). 然而這個react-native應該是通用的, 下載復制一份就好, 放在根目錄.

使用react-native init AwesomeProject生成測試項目, 把AwesomeProject項目的node_modules復制出來即可.

同樣也需要復制的是package.json, 也可以使用npm init配置, 不過比較麻煩, 要添好多參數.

package.json的內容

{
  "name": "AwesomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node_modules/react-native/packager/packager.sh"
  },
  "dependencies": {
    "react-native": "^0.12.0"
  }
}

創建HTML5的主頁面index.android.js, 按著 文檔 編輯即可.

這樣就完成了react-native的JS框架配置.

2. 添加代碼

我的代碼和Demo略有不同, 本質上都是在ReactRootView內添加H5的頁面.資源文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    ...
    >
    <TextView
        android:id="@+id/test_text"
        .../>
    <com.非死book.react.ReactRootView
        android:id="@+id/test_js"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/test_text"/>
</RelativeLayout>

源文件, 主要是設置ReactRootView.

private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mReactRootView = (ReactRootView) findViewById(R.id.test_js);
        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
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
    @Override
    protected void onPause() {
        super.onPause();
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onPause();
        }
    }
    @Override
    protected void onResume() {
        super.onResume();
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onResume(this);
        }
    }
    @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);
    }

基本的代碼部分已經配置完成.

3. 真機調試

最后是啟動配置, 針對Android的真機調試.在build.gradle中, 添加ndk支持.

defaultConfig {
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }

在gradle.properties中, 添加ndk選項.

android.useDeprecatedNdk=true

啟動服務

然后啟動App程序, 初始時是紅色錯誤頁面, 晃動手機, 選擇Dev Settings, 選擇最后的Debug server host for device, 把當前網絡IP寫入其中即可.

設置IP

然后再Reload JS

最終效果

OK, enjoy it.