已有Android项目集成RN

96
pjenary
2018.07.19 17:46* 字数 1111

开篇一张图,后面全靠编


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/react−native/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

下一篇讲解 客户端如何更新

android
Web note ad 1