Android之原生项目集成React Native

来源：互联网发布：云计算认证考试编辑：程序博客网时间：2024/06/05 11:43

上节我们简单讲解在一个用React Native（RN）创建的项目中如果引用安卓原生的控件，这节简单介绍下，在一个已存在的安卓原生应用中如何集成开发RN，如今的产品几乎都是原生所写，今后的开发方向肯定大多会去集成RN或者别的框架而并非推到重来，所以这块的内容也是开发必须要掌握的知识。

下面就简单介绍下集成的步骤:

1.首先创建一个空的文件夹(android-with-react),然后把现有的安卓项目丢进去，注意：要将丢进去的项目文件夹改成android.否则执行可能报错.

2.在android/app/build.gradle中引入RN所需要的依赖包.

compile "com.facebook.react:react-native:+" // From node_modules

3.在android/build.gradle文件中（注意跟上面的路径不同）加入本地React Native的maven目录(现在React Native的所有组件,无论JS还是Android的预编译包，都是通过npm分发的了):

allprojects {    repositories {        mavenLocal()        jcenter()        maven {            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm            url "$rootDir/../node_modules/react-native/android"        }    }}

4.添加RN相关支持库,用于开发RN代码：

在你的工程根目录，运行以下代码：

$ npm init

$ npm install --save react

$ npm install --save react-native

$ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

这种会比较慢，这里提供一个比较快捷的方法,用RN方式快速构建一个空的项目，将内部的package.json和node_modules文件拷贝到自己的项目根目录下.(参考下RN创建项目的目录结构)

接着在你android studio开发工具中clean下项目获取RN的支持库：

5.让你的Activity与RN的界面进行绑定：

package react.plus.com.android_react;import com.facebook.react.ReactActivity;/** * Created by plus on 16/7/20. * 这里用RN来渲染 */public class SettingActivity extends ReactActivity {    @Override    protected String getMainComponentName() {        return "SettingActivity";    }}

很简单，不过要确保getMainComponentName返回的和RN中你要注册组件的名称一致
AppRegistry.registerComponent('SettingActivity', () => AwesomeProject);

最后RN的代码这里就不做展示了，详情可以看源码参考.

如果你用android studio跑项目的话，先开启packager服务(npm start),然后在run app,或者用命令行执行，这里建议用studio跑，因为遇到问题的可能性很大，这样你可以根据log排查原因.

下面提一下遇到的问题.

Caused by: java.lang.UnsatisfiedLinkError: could find DSO to load: libreactnativejni.so

这里我们需要稍微配置一下build.gradle：

defaultConfig {        applicationId "react.plus.com.android_react"        minSdkVersion 22        targetSdkVersion 23        versionCode 1        versionName "1.0"        ndk {            abiFilters "armeabi-v7a", "x86"        }    }    packagingOptions {        exclude "lib/arm64-v8a/librealm-jni.so"    }

下面我们简单看下效果：(第一张图为原生应用，点击设置调转到第二图为RN).

这里要说一点,官方API中的BackAndroid中的exitApp方法指的不是退出整个App，而是退出当前Activity.也好理解，RN做的所有页面，其实就好比是基于Activity显示一堆的View.

不过这里又冒出新的问题，在原生应用调转到RN页面的时候，会出现大概1s的白屏现象.

解决方法：把创建ReactRootView以及获取jsbundle的操作放入到Native代码中，比如放置到启动页或者跳转到RN界面的前一个页面等等.总之保证打开的时候已经缓存OK

3 0