采用aar方式将react-native集成到已有安卓APP
关于react-和的开发环境搭建、环境变量配置等可以查看官方文档。
官方文档地址
文章中涉及的node、react等版本：
node:v16.18.1
react:^18.1.0
react-native:^0.70.6
gradle:gradle-7.2
开发工具：和
关于react-和安卓的混合开发，官方文档已经提供了一种方式，按照文档一步一步操作还是比较容易实现的，但是官方文档方式，对已经存在的原生APP来说，不太友好，需要改动大，代码混在一起，不利于代码管理，项目耦合性高，所以决定采用aar的方式试一下react-和安卓的混合开发。
创建项目目录文件夹
选择合适的盘符新建文件夹，然后使用打开该文件夹。
安装依赖包
在打开的项目根目录下通过运行npm init创建一个名为.json的文件夹文件。
安装react和react-依赖
npm install react@^18.1.0
npm install react-native@^0.70.6
通过执行上面两个命令，在下面就会出现文件夹。
创建安卓原生项目文件夹
在文件夹中创建子文件夹，使用 在文件夹下创建原生项目。
原生安卓项目依赖react- aar和依赖库
到这一步，官方文档采用的是直接本地依赖，这里采用的aar的方式依赖，需要找到react-的aar包，
C:\\\\react-\\com\\react\react-\0.70.6
在文件夹中找到如下文件：
.aar就是react-对应版本的aar库，.pom就是react-对应版本的依赖库
C:\\\\jsc-\dist\org\\-jsc\
在node-文件夹下找到如下：
在原生项目中添加一个
将找到的react-的aar包拷贝到中libs下
接着将.pom文件中的依赖转换，找到该文件中的节点
对每一个节点进行转换
implementation 'androidx.appcompat:appcompat-resources:1.4.1'implementation 'androidx.appcompat:appcompat:1.4.1'implementation 'androidx.autofill:autofill:1.1.0'implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.0.0'implementation 'com.facebook.fbjni:fbjni-java-only:0.2.2'implementation 'com.facebook.fresco:fresco:2.5.0'implementation 'com.facebook.fresco:imagepipeline-okhttp3:2.5.0'implementation 'com.facebook.fresco:ui-common:2.5.0'implementation 'com.facebook.infer.annotation:infer-annotation:0.18.0'implementation 'com.facebook.soloader:soloader:0.10.4'implementation 'com.facebook.yoga:proguard-annotations:1.19.0'implementation 'com.google.code.findbugs:jsr305:3.0.2'implementation 'com.squareup.okhttp3:okhttp-urlconnection:4.9.2'implementation 'com.squareup.okhttp3:okhttp:4.9.2'implementation 'com.squareup.okio:okio:2.9.0'implementation 'javax.inject:javax.inject:1'
将这些依赖和aar一起添加到中的build.文件中
在文件夹下创建index.js入口文件
import React from 'react';
import {AppRegistry,StyleSheet,Text,View
} from 'react-native';class HelloWorld extends React.Component {render() {return (<View style={styles.container}><Text style={styles.hello}>我是react-native页面的</Text></View>);}
}
var styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center'},hello: {fontSize: 20,textAlign: 'center',margin: 10}
});AppRegistry.registerComponent('MyReactNativeApp',() => HelloWorld
);
这里的index.js只是测试文件，具体根据实际需求编写。
将react-中js代码打包成.文件
npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
/com/your--name/app--name/src/main//index..
/com/your--name/app--name/src/main/res/
上面两个输出目录和文件名称可以替换成实际需要的。
在 app 中新增文件夹，然后执行上面的命令。
接着将生成.文件拷贝到 中。
在原生项目中添加程序react-页面的逻辑
public class MyReactNativeActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {private ReactRootView mReactRootView;private ReactInstanceManager mReactInstanceManager;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);SoLoader.init(this, false);mReactRootView = new ReactRootView(this);List<ReactPackage> packages = new PackageList(getApplication()).getPackages();// 有一些第三方可能不能自动链接，对于这些包我们可以用下面的方式手动添加进来：
// packages.add(new SvgPackage());// 同时需要手动把他们添加到`settings.gradle`和 `app/build.gradle`配置文件中。mReactInstanceManager = ReactInstanceManager.builder().setApplication(getApplication()).setCurrentActivity(this).setBundleAssetName("index.android.bundle").setJSMainModulePath("index").addPackages(packages)
// .setUseDeveloperSupport(BuildConfig.DEBUG).setInitialLifecycleState(LifecycleState.RESUMED).build();// 注意这里的MyReactNativeApp 必须对应"index.js"中的// "AppRegistry.registerComponent()"的第一个参数mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);setContentView(mReactRootView);}@Overrideprotected void onPause() {super.onPause();// 把一些 activity 的生命周期回调传递给ReactInstanceManagerif (mReactInstanceManager != null) {mReactInstanceManager.onHostPause(this);}}@Overrideprotected void onResume() {super.onResume();// 把一些 activity 的生命周期回调传递给ReactInstanceManagerif (mReactInstanceManager != null) {mReactInstanceManager.onHostResume(this, this);}}@Overrideprotected void onDestroy() {super.onDestroy();// 把一些 activity 的生命周期回调传递给ReactInstanceManagerif (mReactInstanceManager != null) {mReactInstanceManager.onHostDestroy(this);}if (mReactRootView != null) {mReactRootView.unmountReactApplication();}}@Overridepublic void onBackPressed() {// 后退按钮事件传递给 React Nativeif (mReactInstanceManager != null) {mReactInstanceManager.onBackPressed();} else {super.onBackPressed();}}@Overridepublic boolean onKeyUp(int keyCode, KeyEvent event) {if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {mReactInstanceManager.showDevOptionsDialog();return true;}return super.onKeyUp(keyCode, event);}@Overrideprotected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {// 最后，必须重写 onActivityResult() 方法（如下面的代码所示）以处理权限 Accepted 或 Denied 情况以实现一致的 UX。// 此外，为了集成使用 startActivityForResult 的 Native Modules，我们需要将结果传递给我们的 ReactInstanceManagermReactInstanceManager.onActivityResult(this, requestCode, resultCode, data);super.onActivityResult(requestCode, resultCode, data);}@Overridepublic void invokeDefaultOnBackPressed() {super.onBackPressed();}
}
.java
public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);
// setContentView(R.layout.activity_main);startActivity(new Intent(this, MyReactNativeActivity.class));finish();}
}
这样就将一个简单的react-加载到原生里面来展示了，所有的react- aar包和依赖库都是放在中的，可以将打包成aar，拷贝到需要的项目中使用。这个是比较简单的demo集成，没有涉及到react-第三库的使用，特别是react-和安卓的混合第三方库。
react-和安卓的混合第三方库使用
纯js的react-不需要怎么处理，会被打包到.文件中的，混合库会有些不太一样，这里简单使用一下react--svg这个混合库。
npm install react-native-svg//安装依赖库
会发现react--svg混合部分就是一个 ，如果是采用官方文档的依赖，启动原生模块的自动链接，会自动在 原生中生产对应的svg 的。
启用原生模块的自动链接
要使用自动链接的功能，我们必须将其应用于几个地方。首先，将以下内容添加到.:
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
接下来，在app/build.的最底部添加以下内容:
apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
不过很遗憾的是，采用aar的方式，这些依赖都没有，谈何的启动原生模块的自动链接呢。
既然react--svg库的混合部分是一个 ，那将它打包成aar进行依赖是可行的，所以将react--svg库的混合部分打包aar。
进来后，构建发现报错，屏蔽掉，具体报错具体分析。需要将中的react-替换成aar方式依赖。这套干脆新增一个，就专门用于依赖react-的aar包和库，然后其他依赖该。
其他的依赖变成如下：
开始对react--svg打包aar
打包好后，将react--svg的aar拷贝到中进行依赖。
react--svg简易demo的js文件
import React from 'react';
import {AppRegistry,StyleSheet,Text,View
} from 'react-native';
import Svg, { Circle } from 'react-native-svg';
class HelloWorld extends React.Component {render() {return (<View style={styles.container}><Svg height="50%" width="50%" viewBox="0 0 100 100" ><Circle cx="50" cy="50" r="50" stroke="purple" strokeWidth=".5" fill="violet" /></Svg></View>);}
}
const styles = StyleSheet.create({container: {flex: 1,backgroundColor: '#fff',alignItems: 'center',justifyContent: 'center',},});AppRegistry.registerComponent('MyReactNativeApp',() => HelloWorld
);
重新打包生产.文件。运行app，会看到如下错误：
在加载react-的代码出添加实例对象
重新运行就看到效果了：
将 打包成aar文件输出
可以将react-和原生混合开发的逻辑都封装在，然后根据实际需要将打包成aar输出，可以解耦，同时大大提升开发效率等。
执行后看到报错了：
这个错误网上有不少对应的解决方案：
aar打包错误解决方案
大致就是将aar包放到独立的，然后依赖，再打包输出。那就将react--svg的aar包放到中，然后依赖。
这样aar打包输出成功了。
demo链接：
提取码：nps1
