背景
為了支持容器化多樣性讨便，需要支持 WebView带迟、Flutter爬立、ReactNative 等命锄，我們現(xiàn)需要接入 ReactNative 堰乔，達(dá)到動(dòng)態(tài)下發(fā) react 的 bundle.js 文件來動(dòng)態(tài)更新功能。
ReactNative 項(xiàng)目架構(gòu)
image.png
官方文檔推薦接入方式
- 安裝 NPM 依賴脐恩，會(huì)產(chǎn)生node_modules文件夾
- 將 React Native 添加到應(yīng)用中镐侯，配置相應(yīng)的依賴
- 將現(xiàn)有的 Android 應(yīng)用復(fù)制到 android 的目錄下
Flutter項(xiàng)目架構(gòu)
image.png
現(xiàn)有項(xiàng)目接入問題
問題一
官方未明確給出現(xiàn)有成熟項(xiàng)目如何接入 ReactNative，只給出了將現(xiàn)有項(xiàng)目拷貝到 ReactNative 的文檔驶冒，而不是將 ReactNative 以 第三方庫(kù)接入現(xiàn)有項(xiàng)目苟翻。
問題二
按照官方文檔進(jìn)行項(xiàng)目配置時(shí)，在編譯階段會(huì)報(bào)項(xiàng)目的 java toolchain 兼容性使用問題
image.png
問題三
按照網(wǎng)上找到的其他方式接入時(shí)骗污，報(bào)libc++_shared.so和libfbjni.so文件沖突
接入方式
api "com.facebook.react:react-native:+"
api "org.webkit:android-jsc:+"
引用本地 node_modules中react-native/android文件
image.png
image.png
問題四
在排除沖突的 so 文件后崇猫，在跳轉(zhuǎn) ReactNative 類時(shí)，進(jìn)行如下報(bào)錯(cuò)：
image.png
image.png
接入步驟
步驟一
在項(xiàng)目的根目錄下執(zhí)行如下命令
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.75-stable/template/package.json
或者拷貝如下文件到根目錄
react-native.config.js
module.exports = {
project: {
android: {
sourceDir: './',
},
},
};
package.json
{
"name": "HYTestDemo",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"react": "^18.3.1",
"react-native": "0.76.3"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/preset-env": "^7.25.3",
"@babel/runtime": "^7.25.0",
"@react-native-community/cli": "15.0.1",
"@react-native-community/cli-platform-android": "15.0.1",
"@react-native-community/cli-platform-ios": "15.0.1",
"@react-native/babel-preset": "0.76.3",
"@react-native/eslint-config": "0.76.3",
"@react-native/metro-config": "0.76.3",
"@react-native/typescript-config": "0.76.3",
"@types/react": "^18.2.6",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.6.3",
"eslint": "^8.19.0",
"jest": "^29.6.3",
"prettier": "2.8.8",
"react-test-renderer": "18.3.1",
"typescript": "5.0.4"
},
"engines": {
"node": ">=18"
},
"main": "index.js",
"license": "MIT"
}
metro.config.js
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
/**
* Metro configuration
* https://reactnative.dev/docs/metro
*
* @type {import('metro-config').MetroConfig}
*/
const config = {};
module.exports = mergeConfig(getDefaultConfig(__dirname), config);
- 執(zhí)行 yarn init
-
執(zhí)行 yarn add react
執(zhí)行完上面的命令后需忿，會(huì)生成 node_modules文件夾诅炉，如圖
image.png
步驟二
在 Android 根目錄下 settings.gradle文件中進(jìn)行配置 react_native加載路徑
//這里設(shè)置react-native加載地址
apply from: file("./node_modules/@react-native-community/cli-platform-android/native_modules.gradle")
applyNativeModulesSettingsGradle(settings)
include ':app'
//下面是 Flutter 插件設(shè)置
def flutterProjectRoot = rootProject.projectDir.parentFile.toPath()
def plugins = new Properties()
def pluginsFile = new File(flutterProjectRoot.toFile(), '.flutter-plugins')
if (pluginsFile.exists()) {
pluginsFile.withReader('UTF-8') { reader -> plugins.load(reader) }
}
plugins.each { name, path ->
def pluginDirectory = flutterProjectRoot.resolve(path).resolve('android').toFile()
include ":$name"
project(":$name").projectDir = pluginDirectory
}
步驟三
在 Android 根目錄下的build.gradle文件中進(jìn)行配置加載 react的遠(yuǎn)程下載規(guī)則
buildscript {
ext.kotlin_version = '1.8.0'
repositories {
//配置過濾規(guī)則
def filterReactGroup = { repo, isInclude ->
def reactGroups = ["com\\.getui\\..*", "com\\.huawei\\..*","com\\.assist-v3\\.*","com\\.hihonor\\..*","com\\.tencent\\..*"]
repo.content {
reactGroups.each {
if (isInclude) includeGroupByRegex it
else excludeGroupByRegex it
}
}
}
def includeJdGroup = { filterReactGroup(it, true) }
def excludeJdGroup = { filterReactGroup(it, false) }
//下載 react 依賴地址
maven {
url "$rootDir/node_modules/react-native/android"
filterReactGroup(it)
}
//下載 react 依賴地址
maven {
url("$rootDir/node_modules/jsc-android/dist")
filterReactGroup(it)
}
maven {
url 'https://maven.aliyun.com/nexus/content/groups/public/'
}
maven {
url "https://mvn.getui.com/nexus/content/repositories/releases/"
}
maven {
url 'https://maven.aliyun.com/repository/google'
}
maven {
setUrl("https://maven.aliyun.com/repository/public")
}
maven {
url 'https://maven.aliyun.com/repository/jcenter'
}
maven { url 'https://developer.huawei.com/repo/' }
maven { url 'https://developer.hihonor.com/repo/' }
maven { url "https://jitpack.io" }
// 騰訊地圖相關(guān)
maven {
url "https://mirrors.tencent.com/repository/maven/tencent_public/"
}
maven {
url "https://mirrors.tencent.com/repository/maven/tencent_public_snapshots"
}
maven {
url "https://oss.sonatype.org/content/groups/public"
}
maven {
url "https://oss.sonatype.org/content/repositories/snapshots/"
}
maven {
url "https://oss.sonatype.org/content/repositories/staging/"
}
google()
mavenCentral()
}
dependencies {
classpath 'com.android.tools.build:gradle:7.2.2'
classpath 'com.huawei.agconnect:agcp:1.7.2.300'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
classpath "org.jetbrains.kotlin:kotlin-android-extensions:$kotlin_version"
}
}
allprojects {
def filterReactGroup = { repo, isInclude ->
def reactGroups = ["com\\.getui\\..*", "com\\.huawei\\..*","com\\.assist-v3\\.*","com\\.hihonor\\..*","com\\.tencent\\..*"]
repo.content {
reactGroups.each {
if (isInclude) includeGroupByRegex it
else excludeGroupByRegex it
}
}
}
def includeJdGroup = { filterReactGroup(it, true) }
def excludeJdGroup = { filterReactGroup(it, false) }
repositories {
maven {
url "$rootDir/node_modules/react-native/android"
filterReactGroup(it)
}
maven {
url("$rootDir/node_modules/jsc-android/dist")
filterReactGroup(it)
}
maven {
url 'https://maven.aliyun.com/nexus/content/groups/public/'
}
maven {
url "https://mvn.getui.com/nexus/content/repositories/releases/"
}
maven {
url 'https://maven.aliyun.com/repository/google'
}
maven {
setUrl("https://maven.aliyun.com/repository/public")
}
maven {
url 'https://maven.aliyun.com/repository/jcenter'
}
maven { url 'https://developer.huawei.com/repo/' }
maven { url 'https://developer.hihonor.com/repo/' }
maven { url "https://jitpack.io" }
// 騰訊地圖相關(guān)
maven {
url "https://mirrors.tencent.com/repository/maven/tencent_public/"
}
maven {
url "https://mirrors.tencent.com/repository/maven/tencent_public_snapshots"
}
maven {
url "https://oss.sonatype.org/content/groups/public"
}
maven {
url "https://oss.sonatype.org/content/repositories/snapshots/"
}
maven {
url "https://oss.sonatype.org/content/repositories/staging/"
}
google()
mavenCentral()
}
}
rootProject.buildDir = '../build'
subprojects {
project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {
project.evaluationDependsOn(':app')
}
tasks.register("clean", Delete) {
delete rootProject.buildDir
}
步驟四
在 app （運(yùn)行應(yīng)用 module ）目錄下的build.gradle文件中配置依賴
plugins {
id "com.android.application"
id "kotlin-android"
}
def localProperties = new Properties()
def localPropertiesFile = rootProject.file('local.properties')
if (localPropertiesFile.exists()) {
localPropertiesFile.withReader('UTF-8') { reader ->
localProperties.load(reader)
}
}
def flutterRoot = localProperties.getProperty('flutter.sdk')
if (flutterRoot == null) {
throw new FileNotFoundException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
}
def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
if (flutterVersionCode == null) {
flutterVersionCode = '1'
}
def flutterVersionName = localProperties.getProperty('flutter.versionName')
if (flutterVersionName == null) {
flutterVersionName = '1.0'
}
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
//配置 react 插件加載路徑
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle")
applyNativeModulesAppBuildGradle(project)
android {
namespace "com.example.flutter_test_rn_project"
compileSdkVersion flutter.compileSdkVersion
ndkVersion flutter.ndkVersion
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
defaultConfig {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId "com.example.flutter_test_rn_project"
// You can update the following values to match your application needs.
// For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.
minSdkVersion flutter.minSdkVersion
targetSdkVersion flutter.targetSdkVersion
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
//這里一定要配置
multiDexEnabled true
}
buildTypes {
debug {
minifyEnabled false
zipAlignEnabled true
//這里必須設(shè)置為 false
shrinkResources false
signingConfig signingConfigs.debug
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
ndk {
//設(shè)置支持的SO庫(kù)架構(gòu)
abiFilters 'arm64-v8a'//debug模式flutter運(yùn)行需要這樣設(shè)置
}
}
release {
minifyEnabled false
zipAlignEnabled true
shrinkResources false
signingConfig signingConfigs.debug
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
ndk {
//設(shè)置支持的SO庫(kù)架構(gòu)
abiFilters 'arm64-v8a'//debug模式flutter運(yùn)行需要這樣設(shè)置
}
}
}
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
packagingOptions {
doNotStrip "*/armeabi-v7a/*.so"
doNotStrip "*/arm64-v8a/*.so"
//排除libc++_shared.so文件沖突蜡歹，選擇第一個(gè)libc++_shared.so文件打包
pickFirst '**/libc++_shared.so'
//排除libfbjni.so文件沖突，選擇第一個(gè)libfbjni.so文件打包
pickFirst '**/libfbjni.so'
exclude 'META-INF/com.android.tools/proguard/coroutines.pro'
}
}
dependencies {
implementation 'androidx.multidex:multidex:2.0.1'
api "com.facebook.react:react-native:+"
api "org.webkit:android-jsc:+"
//hermes 解決lib so 缺失
api 'com.facebook.react:hermes-android:0.76.3'
}
flutter {
source '../..'
}
步驟五
在配置完成后涕烧，需要在AndroidManifest.xml中配置 application 類月而，如圖：
image.png
步驟六
需要在AndroidManifest.xml中添加自己要啟動(dòng)的 react-native 類，如圖
image.png
步驟七
創(chuàng)建 MyApplication 類议纯，代碼如下：
package com.example.flutter_test_rn_project;
import android.app.Application;
import android.content.Context;
import androidx.annotation.NonNull;
import androidx.multidex.MultiDex;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.defaults.DefaultReactNativeHost;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import java.util.ArrayList;
import java.util.List;
public class MyApplication extends Application implements ReactApplication {
private static Context context;
static private MyApplication myApplication;
public static Application getInstance() {
return myApplication;
}
@Override
public void onCreate() {
super.onCreate();
context = getApplicationContext();
myApplication = this;
}
@Override
protected void attachBaseContext(Context context) {
super.attachBaseContext(context);
MultiDex.install(this);
//初始化 SoLoader
SoLoader.init(this, false);
}
/**
* 獲取上下文對(duì)象
*
* @return context
*/
public static Context getContext() {
return context;
}
private final ReactNativeHost mReactNativeHost = new DefaultReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return false;
}
@Override
protected List<ReactPackage> getPackages() {
//配置要加載的 react 的 package
// List<ReactPackage> packages = new PackageList(this).getPackages();
List<ReactPackage> packages = new ArrayList<>();
packages.add(new MainReactPackage());
// Packages that cannot be autolinked yet can be added manually here
return packages;
}
};
@NonNull
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
}
步驟八
在 MyReactActivity頁(yè)面中需要繼承ReactActivity父款，代碼如下：
import android.os.Bundle;
import androidx.annotation.Nullable;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.common.LifecycleState;
import com.facebook.react.shell.MainReactPackage;
/**
* Description:
* Author: chengfengli
* Date: 2024/11/27 14:30
*/
public class MyReactActivity extends ReactActivity {
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// SoLoader.init(this, false);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
//設(shè)置加載 react 包的名稱，在 assets 文件中
.setBundleAssetName("index.android.bundle")
.addPackage(new MainReactPackage())
.setJSMainModulePath("index.android")
.setUseDeveloperSupport(false)
.setInitialLifecycleState(LifecycleState.BEFORE_CREATE)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "HYTestDemo", null);
setContentView(mReactRootView);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
//要加載的組件名瞻凤，與 React 的工程名保持一致
@Nullable
@Override
protected String getMainComponentName() {
return "HYTestDemo";
}
}
image.png
image.png
image.png
步驟九
ReactNative項(xiàng)目打包出 bundle 包的命令如下：
npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/
目前在 Android10 及以下手機(jī)會(huì)崩潰铛漓，暫時(shí)無(wú)法修復(fù)
