前提：配置完成ReactNative开发环境（需要配置可查看https://reactnative.cn/docs/getting-started.html）
注：本篇文章适用于已有的安卓项目中嵌入RN
一、首先，你需要有一个React Native项目（删除Android和iOS）：
1、通过react-native init 你的ProgectName 来初始化一个React Native项目；
2、删除ios或android项目，其他目录保持不变；
init后的工程结构
二、将已有Android项目copy到rn项目的根目录下
1、app/build.gradle文件中添加如下代码：
implementation "com.facebook.react:react-native:+" // From node_modules
2、指定ndk需要兼容的架构：
ndk {
abiFilters "armeabi-v7a","x86"
}
3、Progect 外层 build.gradle allprojects--repositories 配置使用的本地React Native maven目录
mavenLocal()
maven {
url "$rootDir/../node_modules/react-native/android"
}
配置外层maven本地仓库
注意点️：如果你之前安卓项目名称是其他名，那么需要替换以上的android；
三、AndroidManifest.xml文件中添加如下代码：
1、网络权限
<uses-permission android:name="android.permission.INTERNET" />
2、摇一摇调式功能界面弹出Activity配置：
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
3、你自定义的RnActivity 清单文件注册；
四、创建一个BaseRnActivity基类来承载React Native
rn基类页面
Application配置
子类继承rn基类
注意️：Base基类保证rn和activity生命周期同步，合理释放资源
五、在你的app/src/main下面新建assets文件目录
切到rn项目根目录控制台输入以下命令（如果安卓项目名称不是android那么替换为你的安卓项目名）
Android 命令行
react-native bundle --platform android --dev false --entry-file index.js --bundle-outputandroid/app/src/main/assets/index.android.bundle --assets-destandroid/app/src/main/res
你会发现assets 下新增了index.android.bundle，证明配置ok！
IOS 命令行
react-native bundle --entry-file index.js --bundle-output ./ios/MytourRnPro/index.jsbundle --platform ios --assets-dest ./ios/MytourRnPro --dev false
六、根据需要添加更多React Native的组件；
七、启动React Native的Packager服务运行、调试
1、安装node.js 、webstorm 配置激活码 或者host；
2、 工程根目录命令行输入 npm i 就会下载好mode_modules目录下的依赖；
3、运行ios设备 切到rn项目根目录输入react-native run-ios 运行ios模拟器 ；
4、连接安卓手机 切到rn项目根目录 react-native run-android 或者As直接运行安卓工程；
八、具体细节（Rn基类封装及使用）：
https://github.com/NIUDONG2015/RNHybrid
运行效果图：
牛栋同学效果图
网友评论