开篇一张图, 后面全靠编
1. 配置 ReactNative 的 js 环境
在 Android 项目根目录下输入命令 npm init (直接在 Android studio 的 terminal 命令窗口就行)
我们可以看到 init 让你生成一个 package.json 文件, 根据实际情况填写的配置参数 (也可以从已有的 RN 项目中拷贝 package.json 放大 Android
项目根目录下)
当前最新 rn 是 0.56, 但是运行时有报错, 建议使用 0.55.4
如果是命令生成的 package.json 还需要手动添加启动命令, 接下来还需要把启动脚本放进去
- "scripts": {
- "start": "node node_modules/react-native/local-cli/cli.js start",
- "test": "jest"
- },
这样我们就可以时时的调用本地调试服务进行热加载
2. 添加 ReactNative
接下来我们将 React,ReactNative 添加到项目中:
npm install --save react react-native
完成后会在 Android 项目中多出一个 node_modules 文件夹, 里面存放了下载好的 React 和 React Native 和根据 package.json 生成的一些配置 (也可以从已有的 RN 项目中拷贝, 但不建议)
3. 安装完成之后, 我们再去配置. flowconfig, 这个是对 js 代码做约束的, 建议配置 (也可以不配置).
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
4. 添加 ReactNative 依赖到 Android 项目
在 app 的 build.gradle 引入以下依赖
api "com.facebook.react:react-native:+"
在项目根目录 build.gradle 添加依赖仓库地址
- allprojects {
- repositories {
- ...
- maven {
- // All of React Native (JS, Android binaries) is installed from npm
- url "$rootDir/node_modules/react-native/android"
- }
- }
- }
这里 maven 路径官网上写的是 rootDir/../nodemodules/reactnative/android, 而我们为了方便 AS 编译, 直接放在项目根目录配置 RN 的, 所以这里的路径要改成上面这样
为了防止 findbugsbug 问题, 建议在 app/build.gradle 中增加下面的代码:
- android {
- //...
- configurations.all {
- resolutionStrategy.force 'com.google.code.findbugs:jsr305:3.0.0'
- }
- }
5. 添加权限
<uses-permission android:name="android.permission.INTERNET"/>
/** 设置调试 的权限 **/
- <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
- <uses-permission android:name="android.permission.SYSTEM_OVERLAY_WINDOW" />
添加 debug 模式 Activity(正式打包注释掉就好了)
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
6. 添加 ReactNative 界面
首先我们在 Android 项目根目录添加 index.android.js, 这个文件作为 RN 的入口文件.
(也可以是其他名称, 需要在实现 ReactApplication 接口时重写 getJSMainModuleName 和 getBundleAssetName)
7. 添加 RN Activity 界面
(1). 在较老的 RN 版本中, 我们新建一个 Activity 实现 DefaultHardwareBackBtnHandler 接口
- @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")// 对应 index.android.js
- .addPackage(new MainReactPackage())
- .setUseDeveloperSupport(BuildConfig.DEBUG)
- .setInitialLifecycleState(LifecycleState.RESUMED)
- .build();
- // 注意这里的 HelloWorld 必须对应 "index.android.js" 中的
- // "AppRegistry.registerComponent()" 的第一个参数
- mReactRootView.startReactApplication(mReactInstanceManager, "ReactNativeDemo", null);
- setContentView(mReactRootView);
- }
(2). 较新的 RN 版本, 例如 RN0.55 我们直接继承 ReactActivity 即可
- public class ReactNativeDemoActivity extends ReactActivity{
- private static final String MAIN_COMPONENT = "ReactNativeDemo";
- /** * 返回在 index.android.js 中注册的组件名
- * @return
- */ @Nullable
- @Override
- protected String getMainComponentName() {
- return MAIN_COMPONENT;
- }
- }
在原生界面上添加一个入口跳转到 ReactNativeDemoActivity 即可
实现 DefaultHardwareBackBtnHandler 接口的方式, 可以局部添加 RN 的组件 mAndroidLayout.addView(mReactRootView);
8. 自定义的 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 getPackages() {
- return Arrays.<ReactPackage>asList( new MainReactPackage());
- }
- };
- @Override
- public ReactNativeHost getReactNativeHost() {
- return mReactNativeHost;
- }
- }
9. 最后不要忘了在 AndroidManifest 中添加:
注意需要 AppCompat 的主题
- <activity
- android:name=".ReactNativeDemoActivity"
- android:theme="@style/Theme.AppCompat.Light.NoActionBar"
- />
10. 运行项目
1)debug 模式, 可以不打离线包, 实时看到 js 修改后的效果
先启动服务 npm start
然后直接运行 Android 项目 (注意在 RN 设置界面绑定电脑的 ip 端口)
2)release 模式
在你打包你的发布版本之前要创建一个 bundle 文件, 这个 bundle 文件会创建在项目的 assets 目录中, 并且这个文件会包含在你的 apk 包中,
在你的项目根目录中运行:
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/
index.android.js 是刚创建的 RN 界面入口 js 的名称, 后面的输出目录根据自己项目对应修改, 例如在项目根目录新建一个 bundle 目录存放 bundle 文件, 命令就是这样了:
react-native bundle --platform android --entry-file index.android.js --bundle-output ./bundles/index.android.bundle --dev false
下一篇讲解 客户端如何更新
来源: http://www.jianshu.com/p/a34ceb184462