ReactNative鸿蒙化从底子到应用
准备：下载node.js：Node.js — 在任何地方运行 JavaScript
下载完成后一直点下一步继续安装完成。
安装完成后，在终端输入：node -v 查看node版本
npm -v 查看npm版本
https://i-blog.csdnimg.cn/direct/85da3ad110824e1c9f0886d05cd8054e.png
下载安装React Native：搭建开发环境 · React Native 中文网
在终端输入：npm install -g expo-cli
安装DevEco Studio，其中DevEco Studio的api版本要大于13
文档中央https://csdnimg.cn/release/blog_editor_html/release2.3.8/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P1C7https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-software-install-V5
环境配置：
官方文档地址：GitCode - 全球开发者的开源社区,开源代码托管平台
windows 环境变量设置方法：
hdc环境配置
hdc 是 OpenHarmony 为开发职员提供的用于调试的命令行工具，鸿蒙 React Native 工程利用 hdc 进行真机调试。hdc 工具通过 OpenHarmony SDK 获取，存放于 SDK 的 toolchains 目次下，请将 {DevEco Studio安装路径}/sdk/{SDK版本}/openharmony/toolchains 的完整路径添加到环境变量中。
a. 在此电脑 > 属性 > 高级系统设置 > 高级 > 环境变量中，编辑系统变量path，添加hdc工具路径。
b. 在此电脑 > 属性 > 高级系统设置 > 高级 > 环境变量中，添加 HDC 端口变量名为：HDC_SERVER_PORT，变量值可设置为恣意未被占用的端口，如 7035。
https://i-blog.csdnimg.cn/direct/8b4576b2ea4443f6a09a0eb4162b7253.png
安装an zan文档中央配置 CAPI 版本环境变量
当前RN框架提供的 Demo 工程默认为 CAPI 版本，您需要配置环境变量 RNOH_C_API_ARCH = 1。
[*] Windows 环境：
在此电脑 > 属性 > 高级系统设置 > 高级 > 环境变量中，在系统变量中点击新建，添加变量名为：RNOH_C_API_ARCH，变量值为 1。
[*] https://i-blog.csdnimg.cn/direct/f0186a2ff9f64acfb2ef70e3f6526489.png
Mac环境配置：
终端输入：open ~/.zshrc
https://i-blog.csdnimg.cn/direct/c4ac6b51a6714f8797f67f2f60a6a04e.png
假如没有.zshrc文件，输入vim ~/.zshrc 创建环境配置文件。
创建新项目React Native侧：
终端输入：npx react-native@0.72.5 init AwesomeProject --version 0.72.5 --skip-install
https://i-blog.csdnimg.cn/direct/56a3c43ef9bb40dfb6df4e64dc94037c.png
打开工程的package.json文件，在 scripts 下新增 OpenHarmony 的依靠
https://i-blog.csdnimg.cn/direct/ad4839dcccf54b398c8eed2bf801fd8d.png
https://i-blog.csdnimg.cn/direct/d2c09c3ab3714773993c52cf16a16668.png
终端进入AwesomeProject目次，并运行安装依靠包命令：npm i @react-native-oh/react-native-harmony@0.72.53
https://i-blog.csdnimg.cn/direct/6092b89c8c0f4017b0287ed40ef80a05.png
安装完成：
https://i-blog.csdnimg.cn/direct/8a5fbfdb63cc41aaaf40be2b60c5e3d2.png
1.打开 AwsomeProject\metro.config.js，并添加 OpenHarmony 的适配代码。配置文件的详细先容，可以参考React Native 中文网。修改完成后的文件内容如下：
https://i-blog.csdnimg.cn/direct/743ce9f34d704e569275cb18ce582fb6.png
全部删掉，替换成：
const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
/**
* @type {import("metro-config").ConfigT}
*/
const config = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
};
module.exports = mergeConfig(getDefaultConfig(__dirname), createHarmonyMetroConfig({
reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
}), config); https://i-blog.csdnimg.cn/direct/3fa3666d212c43db845ad47d887fe193.png
2.在 AwesomeProject 目次下运行天生 bundle 文件的命令。运行成功后，会在 AwesomeProject/harmony/entry/src/main/resources/rawfile 目次下天生 bundle.harmony.js 和 assets 文件夹，assets 用来存放图片（假如 bundle 中不涉及本舆图片，则没有 assets 文件夹）。
在RN的终端输入：npm run dev
https://i-blog.csdnimg.cn/direct/dcc1fc35c00545b9b82686d52977500b.png
鸿蒙侧：
只支持api13的工程项目：
https://i-blog.csdnimg.cn/direct/b6a22730d7cf41568211e1aac1eef41e.png
创建完成后，进入entry目次的终端：
https://i-blog.csdnimg.cn/direct/77e43ad475454ddc8ec5a415c7f1315b.png
终端输入：ohpm i @rnoh/react-native-openharmony@0.72.53
https://i-blog.csdnimg.cn/direct/5e8cd59ffb2b47fd96dd5e348c5f9c5d.png
在原生工程中集成RNOH
https://i-blog.csdnimg.cn/direct/1031cabe59a94ed2983f74601566584b.png
1.补充CPP侧代码
[*]在 MyApplication/entry/src/main 目次下新建 cpp 文件夹。
[*]在 cpp 目次下新增 CMakeLists.txt，并将 RNOH 的适配层代码添加到编译构建中天生 librnoh_app.so：
project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
set(CMAKE_SKIP_BUILD_RPATH TRUE)
set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
set(RNOH_CPP_DIR "${OH_MODULE_DIR}/@rnoh/react-native-openharmony/src/main/cpp")
set(RNOH_GENERATED_DIR "${CMAKE_CURRENT_SOURCE_DIR}/generated")
set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
add_compile_definitions(WITH_HITRACE_SYSTRACE)
set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use
add_subdirectory("${RNOH_CPP_DIR}" ./rn)
add_library(rnoh_app SHARED
"./PackageProvider.cpp"
"${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
)
target_link_libraries(rnoh_app PUBLIC rnoh) 2.在 cpp 目次下新增 PackageProvider.cpp，该文件需要满足以下要求：
[*]需要导入 RNOH/PackageProvider；
[*]实现 getPackages 方法，用于创建三方库或自界说 TurboModule 或 Fabric 的 package 对象。
此处不涉及三方库与自界说 TurboModule 或组件，需要返回空数组。
#include "RNOH/PackageProvider.h"
using namespace rnoh;
std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
return {};
} 3.打开 MyApplicaton\entry\build-profile.json5，将 cpp 中的代码添加到鸿蒙的编译构建使命中，详细先容可以参考模块级build-profile.json5：
"buildOption": {
"externalNativeOptions": {
"path": "./src/main/cpp/CMakeLists.txt",
"arguments": "",
"cppFlags": "",
}
}, https://i-blog.csdnimg.cn/direct/11f5cf3e27234f17af5d37593fe02caa.png
补充ArkTS侧的代码
[*]打开 MyApplicaton\entry\src\main\ets\entryability\EntryAbility.ets，引入并利用 RNAbility，该文件需要满足以下的要求：
[*]假如需要扩展利用对应的生命周期函数，请在代码中利用 super，RNAbility 在生命周期函数中进行了对应的利用，需要利用 super 保证功能不丢失；
[*]需要重写 getPagePath，返回步伐的入口 page。
import { RNAbility } from '@rnoh/react-native-openharmony';
export default class EntryAbility extends RNAbility {
getPagePath() {
return 'pages/Index';
}
} 2.在 MyApplicaton\entry\src\main\ets 目次下新增 RNPackagesFactory.ets，该文件需要满足以下要求：
[*]在 @rnoh/react-native-openharmony 导入 RNPackageContext 和 RNPackage；
[*]在文件中导出 createRNPackages 方法，用于创建三方库或自界说 TurboModule、Fabric的package 对象。
此处不涉及三方库与自界说TurboModule或组件，需要返回空数组。
import { RNPackageContext, RNPackage } from '@rnoh/react-native-openharmony/ts';
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
return [];
} 3.打开 MyApplicaton\entry\src\main\ets\pages\Index.ets，添加RNOH的利用代码，修改后如下：
RNApp的参数appKey需要与RN工程中AppRegistry.registerComponent注册的appName保持同等，否则会导致白屏。
import {
AnyJSBundleProvider,
ComponentBuilderContext,
FileJSBundleProvider,
MetroJSBundleProvider,
ResourceJSBundleProvider,
RNApp,
RNOHErrorDialog,
RNOHLogger,
TraceJSBundleProviderDecorator,
RNOHCoreContext
} from '@rnoh/react-native-openharmony';
import { createRNPackages } from '../RNPackagesFactory';
@Builder
export function buildCustomRNComponent(ctx: ComponentBuilderContext) {}
const wrappedCustomRNComponentBuilder = wrapBuilder(buildCustomRNComponent)
@Entry
@Component
struct Index {
@StorageLink('RNOHCoreContext') private rnohCoreContext: RNOHCoreContext | undefined = undefined
@State shouldShow: boolean = false
private logger!: RNOHLogger
aboutToAppear() {
this.logger = this.rnohCoreContext!.logger.clone("Index")
const stopTracing = this.logger.clone("aboutToAppear").startTracing();
this.shouldShow = true
stopTracing();
}
onBackPress(): boolean | undefined {
// NOTE: this is required since `Ability`'s `onBackPressed` function always
// terminates or puts the app in the background, but we want Ark to ignore it completely
// when handled by RN
this.rnohCoreContext!.dispatchBackPress()
return true
}
build() {
Column() {
if (this.rnohCoreContext && this.shouldShow) {
if (this.rnohCoreContext?.isDebugModeEnabled) {
RNOHErrorDialog({ ctx: this.rnohCoreContext })
}
RNApp({
rnInstanceConfig: {
createRNPackages,
enableNDKTextMeasuring: true, // 该项必须为true，用于开启NDK文本测算
enableBackgroundExecutor: false,
enableCAPIArchitecture: true, // 该项必须为true，用于开启CAPI
arkTsComponentNames: []
},
initialProps: { "foo": "bar" } as Record<string, string>,
appKey: "AwesomeProject",
wrappedCustomRNComponentBuilder: wrappedCustomRNComponentBuilder,
onSetUp: (rnInstance) => {
rnInstance.enableFeatureFlag("ENABLE_RN_INSTANCE_CLEAN_UP")
},
jsBundleProvider: new TraceJSBundleProviderDecorator(
new AnyJSBundleProvider([
new MetroJSBundleProvider(),
// NOTE: to load the bundle from file, place it in
// `/data/app/el2/100/base/com.rnoh.tester/files/bundle.harmony.js`
// on your device. The path mismatch is due to app sandboxing on OpenHarmony
new FileJSBundleProvider('/data/storage/el2/base/files/bundle.harmony.js'),
new ResourceJSBundleProvider(this.rnohCoreContext.uiAbilityContext.resourceManager, 'hermes_bundle.hbc'),
new ResourceJSBundleProvider(this.rnohCoreContext.uiAbilityContext.resourceManager, 'bundle.harmony.js')
]),
this.rnohCoreContext.logger),
})
}
}
.height('100%')
.width('100%')
}
} 最后：加载bundle包
将RN侧的rawfile文件拷贝到鸿蒙侧的rawfile
https://i-blog.csdnimg.cn/direct/9e5d526b0dc946b2932ba33fc5b60171.png
https://i-blog.csdnimg.cn/direct/7b9b642f83f74b20bd201413cdb52a72.png
鸿蒙侧运行：
https://i-blog.csdnimg.cn/direct/116f1725de4940f392f5009c3cd934e8.png
热更新：
https://i-blog.csdnimg.cn/direct/bb22200fa7c3414093dee777400caff5.png
https://i-blog.csdnimg.cn/direct/c96eb02dc2394288aff527a9bfedf4c6.png
https://i-blog.csdnimg.cn/direct/4cf8240cea9d4847b2b8d05946e9626d.png
熟悉React Native
React Native 是由 Facebook 开发的一个开源框架，用于构建原生移动应用。它联合了 React 的声明式编程范式和 JavaScript 的机动性，答应开发者利用相同的代码库为 iOS 和 Android 平台创建高性能、美观且用户体验良好的应用。
总之，React Native 是一个强盛的跨平台移动应用开发框架，恰当各种规模和类型的项目。假如你想快速开发高性能的移动应用，React Native 是一个不错的选择。
底子知识:
组件先容：
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]