已有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

启动服务

</div>

然后启动App程序, 初始时是红色错误页面, 晃动手机, 选择Dev Settings, 选择最后的Debug server host for device, 把当前网络IP写入其中即可.

设置IP

</div>

然后再Reload JS

最终效果

</div>

OK, enjoy it.

相关经验

•  已有Android工程集成ReactNative页面
•  已有Android工程集成ReactNative页面
•  已有Android工程集成PhoneGap页面
•  运行ReactNative的开源工程