前言现在很多应用都是采用混合开发的模式，无论是原生加RN，原生加Flutter，还是原生加H5。主要业务线原生实现，其他部分可以借助跨平台解决方案开发，提高开发效率，或者实现热更新，提高业务迭代效率。下面简单介绍一下Android最新RN版本原生集成的过程。添加package.json文件，首先在正常编译运行的原生APP根目录下执行yarninit命令。按照提示填写基本信息后，会在项目根目录下创建一个package.json文件。添加JavaScript依赖，生成node_modules，然后使用以下命令添加对React和ReactNative运行环境的支持脚本。执行yarnaddreactreact-native命令后，所有的JavaScript依赖模块都会安装到项目根目录下的node_modules/目录下。注意：原则上我们不复制、不移动、不修改、不上传node_modules目录。我们边用边安装，在.gitignore文件中记录下node_modules/目录（即不上传到版本控制系统，只保存在本地）。接下来在package.json文件中配置启动RNMetro服务的脚本，即script脚本。文件的全部内容如下。项目根目录package.json文件{"name":"AndroidDemo","version":"1.0.0","main":"index.js","license":"MIT","dependencies":{"react":"^18.2.0","react-native":"^0.70.6"},"scripts":{"start":"yarnreact-nativestart"}}在原生端添加ReactNative依赖将ReactNative和JSC引擎依赖添加到build.gradle文件中：dependencies{...implementation"com.facebook.react:react-native:+"implementation"org.webkit:android-jsc:+"}中项目的构建在.gradle文件中，添加ReactNative和JSC引擎的maven源码路径，必须写在“allprojects”代码块中。allprojects{repositories{maven{//所有ReactNative（JS，Android二进制文件）都是从npmurl安装的"$rootDir/../node_modules/react-native/android"}maven{//AndroidJSC从npmurl安装（“$rootDir/../node_modules/jsc-android/dist”）}}}！！！注意这里有个问题。点击Sync后会报如下错误：Buildwasconfiguredtoprefersettingsrepositoriesoverprojectrepositoriesbutrepository'maven'wasaddedbybuildfile'build.gradle'原因是在gradle7.0之后，它曾经位于在根目录下的项目build.gradle文件中的代码库设置现在迁移到settings.gradle文件中，根目录build.gradle文件保持不变。settings.gradle文件配置dependencyResolutionManagement{repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)repositories{google()mavenCentral()maven{url"$rootDir/node_modules/react-native/android"}maven{url("$rootDir/node_modules/jsc-android/dist")}}}相关说明：https://developer.android.com...配置原生项目的网络权限，在原生AndroidManifest.xml文件中添加开发者菜单页面。对应的例子如下如果需要访问http请求，需要在application中添加usesCleartextTraffic//网络权限//开发者调试菜单创建一个RN入口文件index.jsindex.js是Android上ReactNative应用的入口文件，缺一不可！可以是一个非常简单的文件，简单到只能包含一行require/import导入语句，示例代码如下。importReactfrom'react';import{AppRegistry,StyleSheet,Text,View}from'react-native';classHelloWorldextendsReact.Component{render(){return(<文本样式={styles.hello}>你好，世界);}}varstyles=StyleSheet.create({container:{flex:1,justifyContent:'center',backgroundColor:'#f9c2ff',},hello:{fontSize:20,textAlign:'center',margin:10,颜色:'red'}});AppRegistry.registerComponent('MyReactNativeApp',()=>HelloWorld);创建一个页面来承载RN页面需要在一个Activity中创建一个ReactRootView对象，然后在这个对象中启动ReactNative应用，并将其设置为界面的主视图。在这里，创建了一个MyActivity页面importandroid.app.Activity;importandroid.os。捆绑；导入android.view.KeyEvent；导入com.facebook.react.ReactInstanceManager；导入com.facebook.react.ReactRootView；导入com.facebook.react.common.LifecycleState；导入com.facebook.react.modules.core.DefaultHardwareBackBtnHandler；导入com.facebook.react.shell.MainReactPackage；导入com.facebook.soloader.SoLoader；publicclassMyActivityextendsActivityimplementsDefaultHardwareBackBtnHandler{privateReactRootViewmReactRootView;私有ReactInstanceManagermReactInstanceManager；@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);SoLoader.init(this,false);mReactRootView=newReactRootView(this);mReactInstanceManager=ReactInstanceManager.builder().setApplication(getApplication()).setCurrentActivity(this).setBundleAssetName("index.android.bundle").setJSMainModulePath("index").addPackage(newMainReactPackage()).setUseDeveloperSupport(BuildConfig.调试）.setInitialLifecycleState（LifecycleState.RESUMED）.build（）；//注意这里的MyReactNativeApp必须对应//“index.js”中的“AppRegistry.registerComponent()”的第一个参数mReactRootView.startReactApplication(mReactInstanceManager,"MyReactNativeApp",null);setContentView(mReactRootView);}@OverrideprotectedvoidonPause(){super.onPause();如果(mReactInstanceManager!=null){mReactInstanceManager.onHostPause(this);}}@OverrideprotectedvoidonResume(){super.onResume();if(mReactInstanceManager!=null){mReactInstanceManager.onHostResume(this,this);}}@OverrideprotectedvoidonDestroy(){super.onDestroy();if(mReactInstanceManager!=null){mReactInstanceManager.onHostDestroy(this);}if(mReactRootView!=null){mReactRootView.unmountReactApplication();}}//显示开发调试菜单弹框@OverridepublicbooleanonKeyUp(intkeyCode,KeyEventevent){if(keyCode==KeyEvent.KEYCODE_MENU&&mReactInstanceManager!=null){mReactInstanceManager.showDevOptionsDialog();}返回真；}返回super.onKeyUp(keyBack,resevent);}@OverrideOnPubkepublicedfaultvoidinvo(){super.onBackPressed();}//后退按钮事件传递给ReactNative@OverridepublicvoidonBackPressed(){if(mReactInstanceManager!=null){mReactInstanceManager.onBackPressed();}else{super.onBackPressed();}}}此后，native端集成RN，完成测试集成效果。首先，需要启动开发服务器（Metro）。只需要在项目根目录下执行如下命令：yarnstart然后点击AndroidStudio运行按钮即可正常运行项目。加载bundle文件后，可以看到如下页面。
