From 60c07ac8f298d870912b3411cd342350c51474ff Mon Sep 17 00:00:00 2001
From: Li-2199 <1269001954@qq.com>
Date: Thu, 27 Jun 2024 09:38:15 +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=E6=A8=A1=E6=9D=BF=E4=B8=BA0.2.2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
zh-cn/lottie-react-native.md | 76 +++++++++++++++++++++++++++++++-----
1 file changed, 66 insertions(+), 10 deletions(-)
diff --git a/zh-cn/lottie-react-native.md b/zh-cn/lottie-react-native.md
index 5e971ea5..d05c63ef 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 使用文档](/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"
}
```
@@ -139,10 +164,13 @@ std::vector> PackageProvider::getPackages(Package::Cont
### 在 ArkTs 侧引入 Lottie 组件
+> [!WARNING] Deprecated！该库已接入 CAPI。
+
找到 **function buildCustomComponent()**，一般位于 `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) {
@@ -161,7 +189,20 @@ function buildCustomComponent(ctx: ComponentBuilderContext) {
+ }
...
}
-...
+
+```
+
+> [!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
+ ];
```
### 运行
@@ -188,8 +229,21 @@ ohpm install
### 权限要求
- 如果 source 使用网络 url 应用需要申请网络权限
+
+ 在`entry/src/main/module.json5`中添加
+
+```json
+requestPermissions: [
+ {
+ name: "ohos.permission.INTERNET",
+ },
+],
+```
+
- 如果使用的 json 文件里有依赖图片资源或使用 imageAssetsFolder 属性，需要将资源文件放置到 HarmonyOS 工程 rawfile 下对应的路径中
+rawfile 路径：`entry/src/main/resources/rawfile`
+
## 属性
> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
@@ -211,6 +265,8 @@ ohpm install
| useNativeLooping | Only Windows. When enabled, uses platform-level looping to improve smoothness, but onAnimationLoop will not fire and changing the loop prop will reset playback rather than finishing gracefully. | boolean | false | No | Windows | No |
| onAnimationLoop | Only Windows and Web. A callback function invoked when the animation loops. | callback | None | No | Windows, Web | No |
| onAnimationFinish | A callback function which will be called when animation is finished. This callback is called with a boolean isCancelled argument, indicating if the animation actually completed playing, or if it was cancelled, for instance by calling play() or reset() while is was still playing. Note that this callback will be called only when loop is set to false. | callback | None | No | All | Yes |
+| onAnimationFailure | A callback function which will be called if an error occurs while working with the animation (loading, running, etc). This callback is called with a string error argument, which contains the error message that occured. | callback | None | No | All | Yes |
+| onAnimationLoaded | A callback function which will be called when animation is done loading. This callback is called with no parameters. | callback | None | No | All | Yes |
| renderMode | a String flag to set whether or not to render with HARDWARE or SOFTWARE acceleration | 'AUTOMATIC'\| 'HARDWARE' \| 'SOFTWARE' | AUTOMATIC | No | iOS, Android | No |
| cacheComposition | Only Android and HarmonyOS, a boolean flag indicating whether or not the animation should do caching. | boolean | true | No | Android | Yes |
| colorFilters | An array of objects denoting layers by KeyPath and a new color filter value (as hex string). | Array | [] | No | iOS, Android, Windows | No |
@@ -219,7 +275,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 +296,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 bc9ecf091f1b0890f85bace90ab84798c574f491 Mon Sep 17 00:00:00 2001
From: Li-2199 <1269001954@qq.com>
Date: Thu, 27 Jun 2024 14:09:46 +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=E4=B8=BA0.2.2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
zh-cn/lottie-react-native.md | 4 ----
1 file changed, 4 deletions(-)
diff --git a/zh-cn/lottie-react-native.md b/zh-cn/lottie-react-native.md
index d05c63ef..db5bc7c2 100644
--- a/zh-cn/lottie-react-native.md
+++ b/zh-cn/lottie-react-native.md
@@ -60,10 +60,6 @@ const App = () => {
export default App;
```
-## 使用 Codegen
-
-本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。
-
## Link
目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。
--
Gitee