From 1e7864071d370f20a8514e543cb0c4920fe61d80 Mon Sep 17 00:00:00 2001 From: Li-2199 <1269001954@qq.com> Date: Mon, 24 Jun 2024 09:59:27 +0800 Subject: [PATCH 1/2] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0lottie-react-nati?= =?UTF-8?q?ve=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/lottie-react-native.md | 110 +++++++++++++++++++++++++---------- 1 file changed, 80 insertions(+), 30 deletions(-) diff --git a/zh-cn/lottie-react-native.md b/zh-cn/lottie-react-native.md index 5e971ea5..007fba24 100644 --- a/zh-cn/lottie-react-native.md +++ b/zh-cn/lottie-react-native.md @@ -1,5 +1,6 @@ -> 模板版本：v0.1.3 + +> 模板版本：v0.2.2

lottie-react-native

@@ -39,22 +40,47 @@ yarn add @react-native-oh-tpl/lottie-react-native@file:# -快速使用： +下面的代码展示了这个库的基本使用场景： > [!WARNING] 使用时 import 的库名不变。 ```js +import React from "react"; +import { View } from "react-native"; import LottieView from "lottie-react-native"; -; +const App = () => { + return ( + + ; + + ); +}; + +export default App; ``` +## 使用 Codegen（如本库已适配了 Codegen ） + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + ## Link 目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` +### 在工程根目录的 `oh-package.json` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + ### 引入原生端代码 目前有两种方法： @@ -62,7 +88,7 @@ import LottieView from "lottie-react-native"; 1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； 2. 直接链接源码。 -方法一：通过 har 包引入 +方法一：通过 har 包引入（推荐） > [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 @@ -71,8 +97,7 @@ import LottieView from "lottie-react-native"; ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "rnoh-lottie": "file:../../node_modules/@react-native-oh-tpl/lottie-react-native/harmony/lottie.har" + "@react-native-oh-tpl/lottie-react-native": "file:../../node_modules/@react-native-oh-tpl/lottie-react-native/harmony/lottie.har" } ``` @@ -89,41 +114,51 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 配置 CMakeLists 和引入 LottieAnimationViewPackage +### 配置 CMakeLists 和引入 Lottie 打开 `entry/src/main/cpp/CMakeLists.txt`，添加： ```diff project(rnapp) cmake_minimum_required(VERSION 3.4.1) +set(CMAKE_SKIP_BUILD_RPATH TRUE) set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") -set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") ++ set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +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") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) add_subdirectory("${RNOH_CPP_DIR}" ./rn) -# RNOH_BEGIN: add_package_subdirectories +# RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + add_subdirectory("${OH_MODULE_DIR}/rnoh-lottie/src/main/cpp" ./lottie) -# RNOH_END: add_package_subdirectories +# RNOH_END: manual_package_linking_1 + +file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") add_library(rnoh_app SHARED + ${GENERATED_CPP_FILES} "./PackageProvider.cpp" "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" ) - target_link_libraries(rnoh_app PUBLIC rnoh) -# RNOH_BEGIN: link_packages +# RNOH_BEGIN: manual_package_linking_2 target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) + target_link_libraries(rnoh_app PUBLIC rnoh_lottie) -# RNOH_END: link_packages +# RNOH_END: manual_package_linking_2 ``` 打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： ```diff #include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" #include "SamplePackage.h" + #include "LottieAnimationViewPackage.h" @@ -131,39 +166,50 @@ using namespace rnoh; std::vector> PackageProvider::getPackages(Package::Context ctx) { return { - std::make_shared(ctx), -+ std::make_shared(ctx) + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx) }; } ``` -### 在 ArkTs 侧引入 Lottie 组件 +### 在 ArkTs 侧引入 Lottie 组件（若需要运行 ArkTs 版本） -找到 **function buildCustomComponent()**，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加： +> [!WARNING] Deprecated！该库已接入 CAPI。（若已经 CAPI 化则需要加上这行） + +找到 `function buildCustomRNComponent()`，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加： ```diff -+ import { LottieAnimationView, LOTTIE_TYPE } from "rnoh-lottie" +... ++ import { LottieAnimationView, LOTTIE_TYPE } from "@react-native-oh-tpl/lottie-react-native" @Builder -function buildCustomComponent(ctx: ComponentBuilderContext) { - if (ctx.componentName === SAMPLE_VIEW_TYPE) { - SampleView({ - ctx: ctx.rnComponentContext, - tag: ctx.tag, - buildCustomComponent: buildCustomComponent - }) - } -+ else if (ctx.componentName === LOTTIE_TYPE) { +export function buildCustomRNComponent(ctx: ComponentBuilderContext) { +... ++ if (ctx.componentName === LOTTIE_TYPE) { + LottieAnimationView({ + ctx: ctx.rnComponentContext, + tag: ctx.tag + }) + } - ... +... } ... ``` +> [!TIP] 本库使用了混合方案，需要添加组件名。（如使用混合方案） + +在`entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets` 找到常量 `arkTsComponentNames` 在其数组里添加组件名 + +```diff +const arkTsComponentNames: Array = [ + SampleView.NAME, + GeneratedSampleView.NAME, + PropsDisplayer.NAME, ++ LOTTIE_TYPE + ]; +``` + ### 运行 点击右上角的 `sync` 按钮 @@ -185,6 +231,10 @@ ohpm install 请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/lottie-react-native Releases](https://github.com/react-native-oh-library/lottie-react-native/releases) +本文档内容基于以下版本验证通过： + +1. RNOH: 0.72.27; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.400; ROM：3.0.0.25; + ### 权限要求 - 如果 source 使用网络 url 应用需要申请网络权限 @@ -219,7 +269,7 @@ ohpm install | hover | Only Web, a boolean denoting whether to play on mouse hover. | boolean | false | No | Web | No | | direction | Only Web a number from 1 or -1 denoting playing direction. | 1\| -1 | 1 | No | Web | No | -## 方法 (Imperative API) +## 静态方法 (Imperative API) > [!tip] "Platform"列表示该属性在原三方库上支持的平台。 @@ -240,4 +290,4 @@ ohpm install 本项目基于 [Apache License 2.0](https://github.com/lottie-react-native/lottie-react-native/blob/master/LICENSE) ，请自由地享受和参与开源。 - \ No newline at end of file + -- Gitee From 2bdf4d885d4f2bfb6f0d72fd853d13b3333ec7b8 Mon Sep 17 00:00:00 2001 From: Li-2199 <1269001954@qq.com> Date: Mon, 24 Jun 2024 10:07:54 +0800 Subject: [PATCH 2/2] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0lottie-react-nati?= =?UTF-8?q?ve=E6=96=87=E6=A1=A3=E6=A8=A1=E6=9D=BF=E5=8D=87=E7=BA=A7?= =?UTF-8?q?=E4=B8=BA0.2.2=EF=BC=8C=E5=A2=9E=E5=8A=A027=E7=8E=AF=E5=A2=83?= =?UTF-8?q?=E5=85=BC=E5=AE=B9=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/lottie-react-native.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/zh-cn/lottie-react-native.md b/zh-cn/lottie-react-native.md index 007fba24..3a39d147 100644 --- a/zh-cn/lottie-react-native.md +++ b/zh-cn/lottie-react-native.md @@ -288,6 +288,6 @@ ohpm install ## 开源协议 -本项目基于 [Apache License 2.0](https://github.com/lottie-react-native/lottie-react-native/blob/master/LICENSE) ，请自由地享受和参与开源。 +本项目基于 [Apache License 2.0](https://github.com/lottie-react-native/lottie-react-native/blob/master/LICENSE) ， 请自由地享受和参与开源。 -- Gitee