From 1897893eb115e657ce0f91be3cb39cc5ea9f3d25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E8=82=89=E5=A4=B4=E5=90=9B?= Date: Fri, 2 Feb 2024 09:55:34 +0800 Subject: [PATCH] =?UTF-8?q?[Issues:=20#I90D94]=20=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E6=96=87=E6=A1=A3=E5=88=B00130=E7=89=88=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/lottie-react-native.md | 244 ---------------------------------- 1224/progress-bar-android.md | 224 ------------------------------- zh-cn/lottie-react-native.md | 133 +++++++++--------- {1224 => zh-cn}/mobx-react.md | 17 ++- {1224 => zh-cn}/mobx.md | 19 ++- {1224 => zh-cn}/parse5.md | 18 +-- zh-cn/progress-bar-android.md | 52 +++++--- 7 files changed, 134 insertions(+), 573 deletions(-) delete mode 100644 1224/lottie-react-native.md delete mode 100644 1224/progress-bar-android.md rename {1224 => zh-cn}/mobx-react.md (91%) rename {1224 => zh-cn}/mobx.md (95%) rename {1224 => zh-cn}/parse5.md (92%) diff --git a/1224/lottie-react-native.md b/1224/lottie-react-native.md deleted file mode 100644 index 4feb2724..00000000 --- a/1224/lottie-react-native.md +++ /dev/null @@ -1,244 +0,0 @@ -> 模板版本：v0.1.2 - -

-

lottie-react-native

-

-

- - Supported platforms - - - License - -

- -> [!tip] [Github 地址](https://github.com/react-native-oh-library/lottie-react-native) - -## 安装与使用 - -进入到工程目录并输入以下命令： - - - -#### **yarn** - -```bash -yarn add @react-native-oh-tpl/lottie-react-native -``` - -#### **npm** - -```bash -npm install @react-native-oh-tpl/lottie-react-native -``` - - - -下面的代码展示了这个库的基本使用场景： - -```js -import LottieView from "lottie-react-native"; - -; -``` - -## Link - -目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 - -首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` - -### 引入原生端代码 - -目前有两种方法： - -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； -2. 直接链接源码。 - -方法一：通过 har 包引入 -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "rnoh": "file:../rnoh", - "rnoh-lottie": "file:../../node_modules/@react-native-oh-tpl/lottie-react-native/harmony/lottie.har" - } -``` - -点击右上角的 `sync` 按钮 - -或者在终端执行： - -```bash -cd entry -ohpm install -``` - -方法二：直接链接源码 -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "rnoh": "file:../rnoh", - "rnoh-lottie": "file:../../node_modules/@react-native-oh-tpl/lottie-react-native/harmony/lottie" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` - -### 配置 CMakeLists 和引入 LottieAnimationViewPackage - -打开 `entry/src/main/cpp/CMakeLists.txt`，添加： - -```diff -project(rnapp) -cmake_minimum_required(VERSION 3.4.1) -set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") -set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") -set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") - -add_subdirectory("${RNOH_CPP_DIR}" ./rn) - -# RNOH_BEGIN: add_package_subdirectories -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 - -add_library(rnoh_app SHARED - "./PackageProvider.cpp" - "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" -) - -target_link_libraries(rnoh_app PUBLIC rnoh) - -# RNOH_BEGIN: link_packages -target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) -+ target_link_libraries(rnoh_app PUBLIC rnoh_lottie) -# RNOH_END: link_packages -``` - -打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： - -```diff -#include "RNOH/PackageProvider.h" -#include "SamplePackage.h" -+ #include "LottieAnimationViewPackage.h" - -using namespace rnoh; - -std::vector> PackageProvider::getPackages(Package::Context ctx) { - return { - std::make_shared(ctx), -+ std::make_shared(ctx) - }; -} -``` - -### 在 ArkTs 侧引入 Lottie 组件 - -打开 `entry/src/main/ets/pages/index.ets`，添加： - -```diff -+ import { LottieAnimationView, LOTTIE_TYPE } from "rnoh-lottie" - -@Builder -function CustomComponentBuilder(ctx: ComponentBuilderContext) { - if (ctx.componentName === SAMPLE_VIEW_TYPE) { - SampleView({ - ctx: ctx.rnohContext, - tag: ctx.tag, - buildCustomComponent: CustomComponentBuilder - }) - } -+ else if (ctx.componentName === LOTTIE_TYPE) { -+ LottieAnimationView({ -+ ctx: ctx.rnohContext, -+ tag: ctx.tag, -+ buildCustomComponent: CustomComponentBuilder -+ }) -+ } - ... -} -... -``` - -### 运行 - -点击右上角的 `sync` 按钮 - -或者在终端执行： - -```bash -cd entry -ohpm install -``` - -然后编译、运行即可。 - -## 约束与限制 - -### 兼容性 - -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 - -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/lottie-react-native Releases](https://github.com/react-native-oh-library/lottie-react-native/releases) - -### 权限要求 - -- 如果 source 使用网络 url 应用需要申请网络权限 -- 如果使用的 json 文件里有依赖图片资源或使用 imageAssetsFolder 属性，需要将资源文件放置到鸿蒙工程 rawfile 下对应的路径中 - -## 属性 - -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 - -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 - -| Name | Description | Type | Default | Required | Platform | HarmonyOS Support | -| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | --------- | -------- | --------------------- | ----------------- | -| source | Mandatory - The source of animation. Can be referenced as a local asset by a string, or remotely with an object with a uri property, or it can be an actual JS object of an animation, obtained (for example) with something like require('../path/to/animation.json') | string\| AnimationObject \| { uri: string } | None | Yes | All | Yes | -| progress | A number between 0 and 1. This number represents the normalized progress of the animation. If you update this prop, the animation will correspondingly update to the frame at that progress value. This prop is not required if you are using the imperative API. | number | 0 | No | iOS, Android, Windows | Yes | -| speed | The speed the animation will progress. Sending a negative value will reverse the animation | number | 1 | No | All | Yes | -| duration | The duration of the animation in ms. Takes precedence over speed when set. This only works when source is an actual JS object of an animation. | number | undefined | No | iOS, Android, Windows | Yes | -| loop | A boolean flag indicating whether or not the animation should loop. | boolean | true | No | All | Yes | -| autoPlay | A boolean flag indicating whether or not the animation should start automatically when mounted. This only affects the imperative API. | boolean | false | No | All | Yes | -| resizeMode | Determines how to resize the animated view when the frame doesn't match the raw image dimensions. Supports cover, contain and center. | 'cover'\| 'contain' \| 'center' | contain | No | iOS, Android, Windows | No | -| style | Style attributes for the view, as expected in a standard View, aside from border styling | StyleProp | None | No | iOS, Android, Windows | Yes | -| webStyle | Style attributes for the view, it uses CSSProperties. | CSSProperties | None | No | Web | No | -| imageAssetsFolder | Needed for Android and HarmonyOS to work properly with assets, iOS will ignore it. | string | None | No | Android | Yes | -| 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 | -| 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 | -| textFiltersAndroid | Only Android, an array of objects denoting text values to find and replace. | Array | [] | No | Android | No | -| textFiltersIOS | Only iOS, an array of objects denoting text layers by KeyPath and a new string value. | Array | [] | No | iOS | No | -| 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) - -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 - -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | ----------------- | -| play | Play the animation all the way through, at the speed specified as a prop. It can also play a section of the animation (not available on web) when called as play(startFrame, endFrame). | function | No | All | Yes | -| reset | Reset the animation back to 0 progress. | function | No | All | Yes | -| pause | Pauses the animation. | function | No | All | Yes | -| resume | Resumes the paused animation. | function | No | All | Yes | - -## 遗留问题 - -## 其他 - -## 开源协议 - -本项目基于 [Apache License 2.0](https://github.com/lottie-react-native/lottie-react-native/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/1224/progress-bar-android.md b/1224/progress-bar-android.md deleted file mode 100644 index 240d90c0..00000000 --- a/1224/progress-bar-android.md +++ /dev/null @@ -1,224 +0,0 @@ -> 模板版本：v0.1.2 - -

-

@react-native-community/progress-bar-android

-

-

- - Supported platforms - - - License - -

- -> [!tip] [Github 地址](https://github.com/react-native-oh-library/progress-bar-android) - -## 安装与使用 - -进入到工程目录并输入以下命令： - - - -#### **yarn** - -```bash -yarn add @react-native-oh-tpl/progress-bar-android -``` - -#### **npm** - -```bash -npm install @react-native-oh-tpl/progress-bar-android -``` - - - -下面的代码展示了这个库的基本使用场景： - -```js - import {ProgressBar} from '@react-native-community/progress-bar-android'; - - - -``` - -## Link - -目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 - -首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` - -### 引入原生端代码 - -目前有两种方法： - -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； -2. 直接链接源码。 - -方法一：通过 har 包引入 -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "rnoh": "file:../rnoh", - "rnoh-progress-bar-android": "file:../../node_modules/@react-native-oh-tpl/progress-bar-android/harmony/progress_bar_android.har" - } -``` - -点击右上角的 `sync` 按钮 - -或者在终端执行： - -```bash -cd entry -ohpm install -``` - -方法二：直接链接源码 -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "rnoh": "file:../rnoh", - "rnoh-progress-bar-android": "file:../../node_modules/@react-native-oh-tpl/progress-bar-android/harmony/progress_bar_android" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` - -### 配置 CMakeLists 和引入 ProgressBarAndroidPackage - -打开 `entry/src/main/cpp/CMakeLists.txt`，添加： - -```diff -project(rnapp) -cmake_minimum_required(VERSION 3.4.1) -set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") -set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") -set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") - -add_subdirectory("${RNOH_CPP_DIR}" ./rn) - -# RNOH_BEGIN: add_package_subdirectories -add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -+ add_subdirectory("${OH_MODULE_DIR}/rnoh-progress-bar-android/src/main/cpp" ./progress-bar-android) -# RNOH_END: add_package_subdirectories - -add_library(rnoh_app SHARED - "./PackageProvider.cpp" - "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" -) - -target_link_libraries(rnoh_app PUBLIC rnoh) - -# RNOH_BEGIN: link_packages -target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) -+ target_link_libraries(rnoh_app PUBLIC rnoh_progress_bar_android) -# RNOH_END: link_packages -``` - -打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： - -```diff -#include "RNOH/PackageProvider.h" -#include "SamplePackage.h" -+ #include "ProgressBarAndroidPackage.h" - -using namespace rnoh; - -std::vector> PackageProvider::getPackages(Package::Context ctx) { - return { - std::make_shared(ctx), -+ std::make_shared(ctx) - }; -} -``` - -### 在 ArkTs 侧引入 ProgressBarAndroid 组件 - -打开 `entry/src/main/ets/pages/index.ets`，添加： - -```diff -import { - RNApp, - ComponentBuilderContext, - RNAbility, - AnyJSBundleProvider, - MetroJSBundleProvider, - ResourceJSBundleProvider, -} from 'rnoh' -import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package" -import { createRNPackages } from '../RNPackagesFactory' -+ import { ProgressBarAndroid,PROGRESS_BAR_TYPE } from "rnoh-progress-bar-android" - -@Builder -function CustomComponentBuilder(ctx: ComponentBuilderContext) { - if (ctx.componentName === SAMPLE_VIEW_TYPE) { - SampleView({ - ctx: ctx.rnohContext, - tag: ctx.tag, - buildCustomComponent: CustomComponentBuilder - }) - } -+ else if (ctx.componentName == PROGRESS_BAR_TYPE){ -+ ProgressBarAndroid({ -+ ctx: ctx.rnohContext, -+ tag: ctx.tag, -+ buildCustomComponent: CustomComponentBuilder -+ }) -+ } - ... -} -... -``` - -### 运行 - -点击右上角的 `sync` 按钮 - -或者在终端执行： - -```bash -cd entry -ohpm install -``` - -然后编译、运行即可。 - -## 兼容性 - -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 - -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/progress-bar-android Releases](https://github.com/react-native-oh-library/progress-bar-android/releases) - -## 属性 - -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 - -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 - -Inherits [View Props](https://reactnative.dev/docs/view#props). - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | -| `animating` | Whether to show the ProgressBar (true, the default) or hide it (false). | bool | No | Android | yes | -| `color` | Color of the progress bar. | [color](https://reactnative.dev/docs/colors) | No | Android | yes | -| `indeterminate` | If the progress bar will show indeterminate progress. Note that this can only be false if styleAttr is Horizontal, and requires a `progress` value. | indeterminateType | No | Android | yes | -| `progress` | The progress value (between 0 and 1). | number | No | Android | yes | -| `styleAttr` | Style of the ProgressBar. | One of:
Horizontal
Normal (default)
Small
Large
Inverse
SmallInverse
LargeInverse | No | Android | yes | - -## 遗留问题 - -- [x] styleAttr 为 Horizontal 时无法铺满全屏 [issues#4](https://github.com/react-native-oh-library/progress-bar-android/issues/4)。 - -## 其他 - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/react-native-progress-view/progress-bar-android/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/zh-cn/lottie-react-native.md b/zh-cn/lottie-react-native.md index a61b323b..f2ebb2de 100644 --- a/zh-cn/lottie-react-native.md +++ b/zh-cn/lottie-react-native.md @@ -1,4 +1,4 @@ -> 模板版本：v0.0.1 +> 模板版本：v0.1.3

lottie-react-native

@@ -12,39 +12,40 @@

+> [!tip] [Github 地址](https://github.com/react-native-oh-library/lottie-react-native) + ## 安装与使用 +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/lottie-react-native Releases](https://github.com/react-native-oh-library/lottie-react-native/releases)，并下载适用版本的 tgz 包。 + 进入到工程目录并输入以下命令： - +>[!TIP] # 处替换为 tgz 包的路径 -**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/lottie-react-native/releases)中获取库 tgz，通过使用本地依赖来安装本库。** + -#### **yarn** +#### **npm** ```bash -yarn add xxx +npm install @react-native-oh-tpl/lottie-react-native@file:# ``` -#### **npm** +#### **yarn** ```bash -npm install xxx +yarn add @react-native-oh-tpl/lottie-react-native@file:# ``` -下面的代码展示了这个库的基本使用场景： +快速使用： + +>[!WARNING] 使用时 import 的库名不变。 ```js -import React from "react"; import LottieView from "lottie-react-native"; -export default function Animation() { - return ( - - ); -} +; ``` ## Link @@ -61,12 +62,15 @@ export default function Animation() { 2. 直接链接源码。 方法一：通过 har 包引入 + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + 打开 `entry/oh-package.json5`，添加以下依赖 ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-lottie": "file:../../node_modules/lottie-react-native/harmony/lottie.har" + "rnoh-lottie": "file:../../node_modules/@react-native-oh-tpl/lottie-react-native/harmony/lottie.har" } ``` @@ -80,12 +84,15 @@ ohpm install ``` 方法二：直接链接源码 + +> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 + 打开 `entry/oh-package.json5`，添加以下依赖 ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-lottie": "file:../../node_modules/lottie-react-native/harmony/lottie" + "rnoh-lottie": "file:../../node_modules/@react-native-oh-tpl/lottie-react-native/harmony/lottie" } ``` @@ -149,31 +156,21 @@ std::vector> PackageProvider::getPackages(Package::Cont 打开 `entry/src/main/ets/pages/index.ets`，添加： ```diff -import { - RNApp, - ComponentBuilderContext, - RNAbility, - AnyJSBundleProvider, - MetroJSBundleProvider, - ResourceJSBundleProvider, -} from 'rnoh' -import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package" -import { createRNPackages } from '../RNPackagesFactory' + import { LottieAnimationView, LOTTIE_TYPE } from "rnoh-lottie" @Builder function CustomComponentBuilder(ctx: ComponentBuilderContext) { - if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) { + if (ctx.componentName === SAMPLE_VIEW_TYPE) { SampleView({ ctx: ctx.rnohContext, - tag: ctx.descriptor.tag, + tag: ctx.tag, buildCustomComponent: CustomComponentBuilder }) } -+ else if (ctx.descriptor.type === LOTTIE_TYPE) { ++ else if (ctx.componentName === LOTTIE_TYPE) { + LottieAnimationView({ + ctx: ctx.rnohContext, -+ tag: ctx.descriptor.tag, ++ tag: ctx.tag, + buildCustomComponent: CustomComponentBuilder + }) + } @@ -195,50 +192,62 @@ ohpm install 然后编译、运行即可。 -## 兼容性 +## 约束与限制 + +### 兼容性 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/lottie-react-native Releases](https://github.com/react-native-oh-library/lottie-react-native/releases) +### 权限要求 + +- 如果 source 使用网络 url 应用需要申请网络权限 +- 如果使用的 json 文件里有依赖图片资源或使用 imageAssetsFolder 属性，需要将资源文件放置到鸿蒙工程 rawfile 下对应的路径中 + ## 属性 -| 名称 | 说明 | 类型 | 默认值 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------- | -------- | --------------------- | -------- | -| source | Mandatory - The source of animation. Can be referenced as a local asset by a string, or remotely with an object with a uri property, or it can be an actual JS object of an animation, obtained (for example) with something like require('../path/to/animation.json') | string \| AnimationObject \| { uri: string } | None | Yes | All | Yes | -| progress | A number between 0 and 1. This number represents the normalized progress of the animation. If you update this prop, the animation will correspondingly update to the frame at that progress value. This prop is not required if you are using the imperative API. | number | 0 | No | iOS, Android, Windows | Yes | -| speed | The speed the animation will progress. Sending a negative value will reverse the animation | number | 1 | No | All | Yes | -| duration | The duration of the animation in ms. Takes precedence over speed when set. This only works when source is an actual JS object of an animation. | number | undefined | No | iOS, Android, Windows | Yes | -| loop | A boolean flag indicating whether or not the animation should loop. | boolean | true | No | All | Yes | -| autoPlay | A boolean flag indicating whether or not the animation should start automatically when mounted. This only affects the imperative API. | boolean | false | No | All | Yes | -| resizeMode | Determines how to resize the animated view when the frame doesn't match the raw image dimensions. Supports cover, contain and center. | 'cover' \| 'contain' \| 'center' | contain | No | iOS, Android, Windows | No | -| style | Style attributes for the view, as expected in a standard View, aside from border styling | StyleProp | None | No | iOS, Android, Windows | Yes | -| webStyle | Style attributes for the view, it uses CSSProperties. | CSSProperties | None | No | Web | No | -| imageAssetsFolder | Needed for Android to work properly with assets, iOS will ignore it. | string | None | No | Android | Yes | -| 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 | -| 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, 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 | -| textFiltersAndroid | Only Android, an array of objects denoting text values to find and replace. | Array | [] | No | Android | No | -| textFiltersIOS | Only iOS, an array of objects denoting text layers by KeyPath and a new string value. | Array | [] | No | iOS | No | -| 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 | +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Default | Required | Platform | HarmonyOS Support | +| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | --------- | -------- | --------------------- | ----------------- | +| source | Mandatory - The source of animation. Can be referenced as a local asset by a string, or remotely with an object with a uri property, or it can be an actual JS object of an animation, obtained (for example) with something like require('../path/to/animation.json') | string\| AnimationObject \| { uri: string } | None | Yes | All | Yes | +| progress | A number between 0 and 1. This number represents the normalized progress of the animation. If you update this prop, the animation will correspondingly update to the frame at that progress value. This prop is not required if you are using the imperative API. | number | 0 | No | iOS, Android, Windows | Yes | +| speed | The speed the animation will progress. Sending a negative value will reverse the animation | number | 1 | No | All | Yes | +| duration | The duration of the animation in ms. Takes precedence over speed when set. This only works when source is an actual JS object of an animation. | number | undefined | No | iOS, Android, Windows | Yes | +| loop | A boolean flag indicating whether or not the animation should loop. | boolean | true | No | All | Yes | +| autoPlay | A boolean flag indicating whether or not the animation should start automatically when mounted. This only affects the imperative API. | boolean | false | No | All | Yes | +| resizeMode | Determines how to resize the animated view when the frame doesn't match the raw image dimensions. Supports cover, contain and center. | 'cover'\| 'contain' \| 'center' | contain | No | iOS, Android, Windows | No | +| style | Style attributes for the view, as expected in a standard View, aside from border styling | StyleProp | None | No | iOS, Android, Windows | Yes | +| webStyle | Style attributes for the view, it uses CSSProperties. | CSSProperties | None | No | Web | No | +| imageAssetsFolder | Needed for Android and HarmonyOS to work properly with assets, iOS will ignore it. | string | None | No | Android | Yes | +| 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 | +| 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 | +| textFiltersAndroid | Only Android, an array of objects denoting text values to find and replace. | Array | [] | No | Android | No | +| textFiltersIOS | Only iOS, an array of objects denoting text layers by KeyPath and a new string value. | Array | [] | No | iOS | No | +| 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) -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | -------- | -| play | Play the animation all the way through, at the speed specified as a prop. It can also play a section of the animation (not available on web) when called as play(startFrame, endFrame). | function | No | All | Yes | -| reset | Reset the animation back to 0 progress. | function | No | All | Yes | -| pause | Pauses the animation. | function | No | All | Yes | -| resume | Resumes the paused animation. | function | No | All | Yes | +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 -## 遗留问题 +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -- [ ] 部分涉及加速渲染的接口，未适配 -- [ ] 部分涉及 KeyPath 的接口，未适配 +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | ----------------- | +| play | Play the animation all the way through, at the speed specified as a prop. It can also play a section of the animation (not available on web) when called as play(startFrame, endFrame). | function | No | All | Yes | +| reset | Reset the animation back to 0 progress. | function | No | All | Yes | +| pause | Pauses the animation. | function | No | All | Yes | +| resume | Resumes the paused animation. | function | No | All | Yes | + +## 遗留问题 ## 其他 diff --git a/1224/mobx-react.md b/zh-cn/mobx-react.md similarity index 91% rename from 1224/mobx-react.md rename to zh-cn/mobx-react.md index 2b63c604..19569aeb 100644 --- a/1224/mobx-react.md +++ b/zh-cn/mobx-react.md @@ -1,4 +1,4 @@ -> 模板版本：v0.1.2 +> 模板版本：v0.1.3

mobx-react

@@ -17,20 +17,22 @@ -#### **yarn** +#### **npm** ```bash -yarn add mobx-react@^7.6.0 +npm install mobx-react@^7.6.0 ``` -#### **npm** +#### **yarn** ```bash -npm install mobx-react@^7.6.0 +yarn add mobx-react@^7.6.0 ``` + + +快速使用： -需要在bable.config.js文件修改配置: ```js module.exports = { presets: ['module:metro-react-native-babel-preset'], @@ -80,7 +82,8 @@ const TodoView = observer(({ todo }) =>
{todo.title}
) 在下述版本验证通过: -1. IDE:Deveco Studio 4.1.3.412; SDK: OpenHarmony (Api11) 4.1.0.53; 测试设备: Mate40 Pro (NOH-AN00); ROM: 2.0.0.52 (SP22C00E52R1P17log); RNOH: 0.72.11。 +1. RNOH：0.72.11; SDK：OpenHarmony(api11) 4.1.0.53; IDE：DevEco Studio 4.1.3.412; ROM：2.0.0.52; +2. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.58; ## 属性 diff --git a/1224/mobx.md b/zh-cn/mobx.md similarity index 95% rename from 1224/mobx.md rename to zh-cn/mobx.md index 5b05316c..79b82539 100644 --- a/1224/mobx.md +++ b/zh-cn/mobx.md @@ -1,4 +1,4 @@ -> 模板版本：v0.1.2 +> 模板版本：v0.1.3

mobx

@@ -17,18 +17,22 @@ -#### **yarn** +#### **npm** ```bash -yarn add mobx@^6.10.0 +npm install mobx@^6.10.0 ``` -#### **npm** +#### **yarn** ```bash -npm install mobx@^6.10.0 +yarn add mobx@^6.10.0 ``` -需要在bable.config.js文件修改配置: + + + +快速使用： + ```js module.exports = { presets: ['module:metro-react-native-babel-preset'], @@ -88,7 +92,8 @@ setInterval(() => { 在下述版本验证通过: -1. IDE:Deveco Studio 4.1.3.412; SDK: OpenHarmony (Api11) 4.1.0.53; 测试设备: Mate40 Pro (NOH-AN00); ROM: 2.0.0.52 (SP22C00E52R1P17log); RNOH: 0.72.11。 +1. RNOH：0.72.11; SDK：OpenHarmony(api11) 4.1.0.53; IDE：DevEco Studio 4.1.3.412; ROM：2.0.0.52; +2. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.58; ## 属性 diff --git a/1224/parse5.md b/zh-cn/parse5.md similarity index 92% rename from 1224/parse5.md rename to zh-cn/parse5.md index ee7d0438..e9efcc51 100644 --- a/1224/parse5.md +++ b/zh-cn/parse5.md @@ -1,4 +1,4 @@ -> 模板版本：v0.1.2 +> 模板版本：v0.1.3

parse5

@@ -16,11 +16,6 @@ 进入到工程目录并输入以下命令： -#### **yarn** - -```bash -yarn add parse5@7.1.2 -``` #### **npm** @@ -29,9 +24,15 @@ yarn add parse5@7.1.2 npm install parse5@7.1.2 ``` +#### **yarn** + +```bash +yarn add parse5@7.1.2 +``` + -下面的代码展示了这个库的基本使用场景： +直接使用： ```js const parse5 = require('parse5'); @@ -67,7 +68,8 @@ console.log(str); //> '
Hello, world!
' 在下述版本验证通过： - 1. IDE：DevEco Studio 4.1.3.313;SDK：OpenHarmony(api11) 4.1.0.52;测试设备：Mate40 Pro(NOH-AN00);ROM：204.1.0.52(C00E52R1P17log);RNOH：0.72.11 +1. RNOH：0.72.11; SDK：OpenHarmony(api11) 4.1.0.53; IDE：DevEco Studio 4.1.3.412; ROM：2.0.0.52; +2. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.58; ## API diff --git a/zh-cn/progress-bar-android.md b/zh-cn/progress-bar-android.md index a7681806..a9cef834 100644 --- a/zh-cn/progress-bar-android.md +++ b/zh-cn/progress-bar-android.md @@ -1,4 +1,4 @@ -> 模板版本：v0.0.1 +> 模板版本：v0.1.3

@react-native-community/progress-bar-android

@@ -12,36 +12,35 @@

-## 安装与使用 +> [!tip] [Github 地址](https://github.com/react-native-oh-library/progress-bar-android) -> [!tip] 目前部分 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。 +## 安装与使用 -在与 `package.json` 文件相同的目录中，创建或编辑 `.npmrc` 文件以包含指定 GitHub Packages URL 和托管包的命名空间的行。 将 TOKEN 替换为 RNOH 三方库指定的 token。 - -```bash -@react-native-oh-library:registry=https://npm.pkg.github.com -//npm.pkg.github.com/:_authToken=TOKEN -``` +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/progress-bar-android Releases](https://github.com/react-native-oh-library/progress-bar-android/releases)，并下载适用版本的 tgz 包。 进入到工程目录并输入以下命令： +>[!TIP] # 处替换为 tgz 包的路径 + #### **yarn** ```bash -yarn add @react-native-community/progress-bar-android@npm:@react-native-oh-library/progress-bar-android +yarn add @react-native-oh-tpl/progress-bar-android@file:# ``` #### **npm** ```bash -npm install @react-native-community/progress-bar-android@npm:@react-native-oh-library/progress-bar-android +npm install @react-native-oh-tpl/progress-bar-android@file:# ``` -下面的代码展示了这个库的基本使用场景： +快速使用： + +>[!WARNING] 使用时 import 的库名不变。 ```js import {ProgressBar} from '@react-native-community/progress-bar-android'; @@ -64,12 +63,15 @@ npm install @react-native-community/progress-bar-android@npm:@react-native-oh-li 2. 直接链接源码。 方法一：通过 har 包引入 + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + 打开 `entry/oh-package.json5`，添加以下依赖 ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-progress-bar-android": "file:../../node_modules/@react-native-community/progress-bar-android/harmony/progress_bar_android.har" + "rnoh-progress-bar-android": "file:../../node_modules/@react-native-oh-tpl/progress-bar-android/harmony/progress_bar_android.har" } ``` @@ -83,12 +85,15 @@ ohpm install ``` 方法二：直接链接源码 + +> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 + 打开 `entry/oh-package.json5`，添加以下依赖 ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-progress-bar-android": "file:../../node_modules/@react-native-community/progress-bar-android/harmony/progress_bar_android" + "rnoh-progress-bar-android": "file:../../node_modules/@react-native-oh-tpl/progress-bar-android/harmony/progress_bar_android" } ``` @@ -166,17 +171,18 @@ import { createRNPackages } from '../RNPackagesFactory' @Builder function CustomComponentBuilder(ctx: ComponentBuilderContext) { - if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) { + if (ctx.componentName === SAMPLE_VIEW_TYPE) { SampleView({ ctx: ctx.rnohContext, - tag: ctx.descriptor.tag, + tag: ctx.tag, buildCustomComponent: CustomComponentBuilder }) } -+ else if (ctx.descriptor.type == PROGRESS_BAR_TYPE){ ++ else if (ctx.componentName == PROGRESS_BAR_TYPE){ + ProgressBarAndroid({ + ctx: ctx.rnohContext, -+ tag: ctx.descriptor.tag ++ tag: ctx.tag, ++ buildCustomComponent: CustomComponentBuilder + }) + } ... @@ -201,13 +207,17 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/progress-bar-android Releases](https://github.com/react-native-oh-library/progress-bar-android/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/progress-bar-android Releases](https://github.com/react-native-oh-library/progress-bar-android/releases) ## 属性 +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + Inherits [View Props](https://reactnative.dev/docs/view#props). -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | | `animating` | Whether to show the ProgressBar (true, the default) or hide it (false). | bool | No | Android | yes | | `color` | Color of the progress bar. | [color](https://reactnative.dev/docs/colors) | No | Android | yes | @@ -217,7 +227,7 @@ Inherits [View Props](https://reactnative.dev/docs/view#props). ## 遗留问题 -- [ ] styleAttr 为 Horizontal 时无法铺满全屏 [issues#4](https://github.com/react-native-oh-library/progress-bar-android/issues/4)。 +- [x] styleAttr 为 Horizontal 时无法铺满全屏 [issues#4](https://github.com/react-native-oh-library/progress-bar-android/issues/4)。 ## 其他 -- Gitee