From b68ea0ed8f985c2c3784b8595c85417843f74ec0 Mon Sep 17 00:00:00 2001 From: wupingyuan Date: Mon, 15 Dec 2025 15:37:28 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[Issues:=20#IDCS55]=E6=96=B0=E5=A2=9Eri?= =?UTF-8?q?ve-react-native=E7=9A=84=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: wupingyuan --- en/rive-react-native.md | 313 ++++++++++++++++++++++++++++++++++ zh-cn/rive-react-native.md | 334 +++++++++++++++++++++++++++++++++++++ 2 files changed, 647 insertions(+) create mode 100644 en/rive-react-native.md create mode 100644 zh-cn/rive-react-native.md diff --git a/en/rive-react-native.md b/en/rive-react-native.md new file mode 100644 index 000000000..107b13eb1 --- /dev/null +++ b/en/rive-react-native.md @@ -0,0 +1,313 @@ +> Template version: v0.3.0 + +

+

rive-react-native

+

+ +This project is based on [rive-react-native@v9.7.0](https://github.com/rive-app/rive-react-native/releases/tag/v9.7.0)。 + +Please check the corresponding version information in the Releases section of the third-party library's repository: + +| Third-party Library Version | Release Information | Supported RN Version | +| ---------- | ------------------------------------------------------------ | ---------- | +| 9.8.0 | [@react-native-ohos/rive-react-native Releases](https://github.com/react-native-oh-library/rive-react-native/releases) | 0.72/0.77 | + +## 1. Installation and Usage + +Go to the project directory and execute the following instruction: + +#### **npm** + +```bash +npm install @react-native-ohos/rive-react-native +``` + +#### **yarn** + +```bash +yarn add @react-native-ohos/rive-react-native +``` + +The following code shows the basic use scenario of the repository: + +> [!WARNING] The name of the imported repository remains unchanged. + +```tsx +import { SafeAreaView, StyleSheet, ScrollView } from 'react-native'; +import Rive from 'rive-react-native'; +const url = + 'https://public.rive.app/community/runtime-files/2195-4346-avatar-pack-use-case.riv'; +export default function UrlTest() { + return ( + + + + + + + + ); +} +const styles = StyleSheet.create({ + safeAreaViewContainer: { + flex: 1, + }, + container: { + flexGrow: 1, + alignItems: 'center', + justifyContent: 'center', + marginBottom: 150, + }, + animation: { + width: '100%', + height: 400, + marginVertical: 20, + }, +}); +``` + +## 2. Manual Link + +This section provides guidance for manually linking native dependencies. + +First, you need to open the HarmonyOS project `harmony` in your project with DevEco Studio. + +### 2.1. Overrides RN SDK + +To ensure the project depends on the same version of the RN SDK, you need to add an `overrides` field in the `harmony/oh-package.json5` file at the project's root directory. This field should point to the RN SDK version required by the project. The version can be a specific version number, a fuzzy version, a local HAR package, or a source code directory. + +For more information about this field, please refer to the [official documentation](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-oh-package-json5-V5#zh-cn_topic_0000001792256137_overrides). + +```json +{ + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // Path to local har package + // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // Point to source code path + } +} +``` + +### 2.2. Importing Native Code +- By importing HAR packages; +- By directly linking the source code. + +Method 1: Importing via HAR package (Recommended) + +> [!TIP] +> The HAR package is located in the `harmony` folder of the third-party library's installation path. + +Open `entry/oh-package.json5` and add the following dependency: + +```json +"dependencies": { + "@react-native-ohos/rive-react-native": "file:../../node_modules/@react-native-ohos/rive-react-native/harmony/rive.har" + } +``` + +Click the `sync` button in the upper right corner. + +Alternatively, run the following instruction on the terminal: + +```bash +cd entry +ohpm install +``` + +Method 2: Directly linking the source code + +> [!TIP] +> To link the source code directly, please refer to the [instructions for linking source code directly](/zh-cn/link-source-code.md). + +### 2.3.Configure CMakeLists and Import RivePackage + +Open `entry/src/main/cpp/CMakeLists.txt` and add the following: + +```diff ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") + +# RNOH_BEGIN: manual_package_linking_1 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/rive-react-native/src/main/cpp" ./rive) +# RNOH_END: manual_package_linking_1 + +# RNOH_BEGIN: manual_package_linking_2 ++ target_link_libraries(rnoh_app PUBLIC rnoh_rive) +# RNOH_END: manual_package_linking_2 +``` + +Open `entry/src/main/cpp/PackageProvider.cpp` and add the following: + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "RivePackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} +``` + +### 2.4.Introduce RiveView component to ArkTs + +Find `function buildCustomRNComponent()`, Generally located in `entry/src/main/ets/pages/index.ets ` or `entry/src/main/ets/rn/LoadBundle.ets`, add: + +```diff + ... ++ import { RiveView } from "@react-native-ohos/rive-react-native"; + +@Builder +export function buildCustomRNComponent(ctx: ComponentBuilderContext) { + ... ++ if (ctx.componentName === RiveView.NAME) { ++ RiveView({ ++ ctx: ctx.rnComponentContext, ++ tag: ctx.tag, ++ }) ++ } +... +} +... +``` +In `entry/src/main/ets/pages/index.ets`, if the `arkTsComponentNames` array (new in later versions) exists in the current file, add the following:`RiveView.NAME`; + +```ts + ... + const arkTsComponentNames: Array = [..., RiveView.NAME]; + ... +``` + + + +### 2.5.Introducing RiveModulePackage to ArkTS + +Open the `entry/src/main/ets/RNPackagesFactory.ets` file and add the following code: + +```diff + ... ++ import { RiveModulePackage } from '@react-native-ohos/rive-react-native/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new RiveModulePackage(ctx), + ]; +} +``` + + +### 2.6.Run + +Click the `sync` button in the upper right corner. + +Alternatively, run the following instruction on the terminal: + +```bash +cd entry +ohpm install +``` + +Then build and run the code. + +## 3. Constraints + +### 3.1. Compatibility + +To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. + +Verified in the following versions. + +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; + + +### 3.2. Permission Requirements + +- If the resource uses a network URL, the application needs to apply for network permissions + +Open `entry/src/main/module.json5` and add the following information: + +```json +requestPermissions: [ + { + name: "ohos.permission.INTERNET", + }, +], +``` + +- If the resourceName attribute is used, the resource file needs to be placed in the corresponding path under the rawfile of the HarmonyOS project + +rawfile path：`entry/src/main/resources/rawfile` + + +## 4.Properties + +> [!tip] The **Platform** column indicates the platform where the properties are supported in the original third-party library. + +> [!tip] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | -------- | ------------ | -------------------------- | +| children | Allow custom UI elements to be layered above Rive animations | ReactNode | no | ios，android | yes | +| onPlay | Trigger event response when animation starts playing | animationName: string, isStateMachine: boolean | no | ios，android | yes | +| onPause | Trigger event response when animation pauses | animationName: string, isStateMachine: boolean | no | ios，android | yes | +| onStop | Trigger event response when animation stops | animationName: string, isStateMachine: boolean | no | ios，android | yes | +| onLoopEnd | Trigger event response when animation completes loop | animationName: string, loopMode: LoopMode | no | ios，android | yes | +| onStateChanged | Trigger event response when animation state machine switches states | stateMachineName: string, stateName: string | no | ios，android | yes | +| onRiveEventReceived | Respond to callbacks when triggering custom events for animations | name: string; delay: number; properties: any; url: string; target: string | no | ios，android | yes | +| onError | Trigger event response when an error occurs | rnRiveError: RNRiveError | no | ios，android | yes | +| style | Container style | StyleProp | no | ios，android | yes | +| autoplay | Whether to automatically play animations | boolean | no | ios，android | yes | +| resourceName | Local resource name (must match the .riv file name) | string | no | ios，android | yes | +| url | . riv file network resource URL | string | no | ios，android | yes | +| alignment | Alignment of animations within containers | 'topLeft' 、'topCenter' 、 'topRight' 、 'centerLeft' 、 'center' 、 'centerRight' 、 'bottomLeft' 、 'bottomCenter' 、 'bottomRight' | no | ios，android | yes | +| fit | Zoom mode | 'cover' 、 'contain'、 'fill' 、 'fitWidth' 、 'fitHeight' 、 'none' 、 'scaleDown' 、 'layout' | no | ios，android | yes | +| layoutScaleFactor | Custom layout scaling factor | number | no | ios，android | yes | +| artboardName | Specify a specific drawing board to load from the file | string | no | ios，android | yes | +| animationName | Play an animation with the specified name | string | no | ios，android | yes | +| stateMachineName | Enable state machine with specified name | string | no | ios，android | yes | +| referencedAssets | External incoming resource references | {} | no | ios，android | yes | +| dataBinding | Bind dynamic data source | {} | no | ios，android | yes | +| testID | Used for testing framework positioning components | string | no | ios，android | yes | +| fireState | Trigger specific named events in the state machine | stateMachineName: string, inputName: string | no | ios，android | yes | +| setInputState | Set the numerical values (Boolean/numeric) of the input parameters for the state machine | stateMachineName: string,inputName:string,value: boolean/ number | no | ios，android | yes | +| getBooleanState | Get the current value of Boolean type | inputName:string | no | ios，android | yes | +| getNumberState | Get the current value of the numeric type | inputName:string | no | ios，android | yes | +| getBooleanStateAtPath | Retrieve the current value of a Boolean type in the specified path| inputName:string, path:string | no | ios，android | yes | +| getNumberStateAtPath | Get the current value of the numeric type in the specified path|inputName:string, path:string| no | ios，android | yes | +| fireStateAtPath | Trigger events in the specified path| inputName:string, path:string|no | ios，android | yes | +| setInputStateAtPath | Set the values of parameters in the specified path| inputName:string,value: boolean/number,path: string|no | ios，android | yes | +| play |Play animation|animationName?: string,loop?: LoopMode,direction?: Direction,isStateMachine?:boolean|no | ios，android | yes | +| pause |Pause current playback|No|no | ios，android | yes | +| stop |Stop playback|No|no | ios，android | yes | +| reset |Reset animation|No|no | ios，android | yes | +| touchBegan |Trigger touch start event at specified coordinates|x: number, y: number|no | ios，android | yes | +| touchEnded |Trigger touch end event at specified coordinates|x: number, y: number|no | ios，android | yes | +| setTextRunValue |Dynamically modify text content|textRunName: string, value: string|no | ios，android | yes | +| setTextRunValueAtPath |Modify the text content in the specified path|textRunName: string, value: string,path: string|no | ios，android | yes | +| setBoolean |Modify Boolean type in the specified path|path: string, value: boolean|no | ios，android | no | +| setString |Modify the string in the specified path|path: string, value: string|no | ios，android | yes | +| setNumber |Modify the number in the specified path|path: string, value: number|no | ios，android | yes | +| setColor |Modify the color attribute under the specified path|path: string, color: RiveRGBA/string|no | ios，android | yes | +| setEnum |Modify the enumeration type in the specified path|path: string, value: string|no | ios，android | yes | +| trigger |triggering events|path: string|no | ios，android | yes | +| internalNativeEmitter |Get native event emitter|No|no | ios，android | yes | +| viewTag |Get associated view labels|No|no | ios，android | yes | + +## 5.Known Issues + +## 6.Others + +## 7.License + +This project is licensed under [The MIT License (MIT)](https://github.com/react-native-oh-library/rive-react-native/blob/sig/LICENSE). diff --git a/zh-cn/rive-react-native.md b/zh-cn/rive-react-native.md new file mode 100644 index 000000000..d5fac5f8c --- /dev/null +++ b/zh-cn/rive-react-native.md @@ -0,0 +1,334 @@ +> 模板版本：v0.3.0 + +

+

rive-react-native

+

+ +本项目基于 [rive-react-native@v9.7.0](https://github.com/rive-app/rive-react-native/releases/tag/v9.7.0) 开发。 + +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +|-------| ------------------------------------------------------------ | ---------- | +| 9.8.0 | [@react-native-ohos/rive-react-native Releases](https://github.com/react-native-oh-library/rive-react-native/releases) | 0.72/0.77 | + +## 1. 安装与使用 + +进入到工程目录并输入以下命令： + +#### **npm** + +```bash +npm install @react-native-ohos/rive-react-native +``` + +#### **yarn** + +```bash +yarn add @react-native-ohos/rive-react-native +``` + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```tsx +import { SafeAreaView, StyleSheet, ScrollView } from 'react-native'; +import Rive from 'rive-react-native'; +const url = + 'https://public.rive.app/community/runtime-files/2195-4346-avatar-pack-use-case.riv'; +export default function UrlTest() { + return ( + + + + + + + + ); +} +const styles = StyleSheet.create({ + safeAreaViewContainer: { + flex: 1, + }, + container: { + flexGrow: 1, + alignItems: 'center', + justifyContent: 'center', + marginBottom: 150, + }, + animation: { + width: '100%', + height: 400, + marginVertical: 20, + }, +}); +``` + +## 2.Manual Link + +此步骤为手动配置原生依赖项的指导。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +### 2.1. Overrides RN SDK + +为了让工程依赖同一个版本的 RN SDK，需要在工程根目录的 `oh-package.json5` 添加 overrides 字段，指向工程需要使用的 RN SDK 版本。替换的版本既可以是一个具体的版本号，也可以是一个模糊版本，还可以是本地存在的 HAR 包或源码目录。 + +关于该字段的作用请阅读[官方说明](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-oh-package-json5-V5#zh-cn_topic_0000001792256137_overrides)： + +```json +{ + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // Path to local har package + // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // Point to source code path + } +} +``` + +### 2.2 引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入 + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@react-native-ohos/rive-react-native": "file:../../node_modules/@react-native-ohos/rive-react-native/harmony/rive.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + +### 2.3.配置 CMakeLists 和引入 RivePackage + +打开 `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(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") ++ set(OH_MODULES "${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: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/rive-react-native/src/main/cpp" ./rive) +# 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: manual_package_linking_2 +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_rive) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "RivePackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} +``` + +### 2.4.在 ArkTs 侧引入 RiveView 组件 + +找到 `function buildCustomRNComponent()`，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加： + +```diff + ... ++ import { RiveView } from "@react-native-ohos/rive-react-native"; + +@Builder +export function buildCustomRNComponent(ctx: ComponentBuilderContext) { + ... ++ if (ctx.componentName === RiveView.NAME) { ++ RiveView({ ++ ctx: ctx.rnComponentContext, ++ tag: ctx.tag, ++ }) ++ } +... +} +... +``` +在`entry/src/main/ets/pages/index.ets`中，如果当前文件中存在`arkTsComponentNames`数组(后续版本新增内容)，则需要在其中追加：`RiveView.NAME`; + +```ts + ... + const arkTsComponentNames: Array = [..., RiveView.NAME]; + ... +``` + + + +### 2.5.在 ArkTs 侧引入 RiveModulePackage + +打开 `entry/src/main/ets/RNPackagesFactory.ets`，添加： + +```diff + ... ++ import { RiveModulePackage } from '@react-native-ohos/rive-react-native/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new RiveModulePackage(ctx), + ]; +} +``` + + +### 2.6.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 3. 约束与限制 + +### 3.1.兼容性 + +本文档内容基于以下环境验证通过： +1. RNOH:0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; +2. RNOH:0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; + + +### 3.2.权限要求 + +- 如果资源使用网络 url 应用需要申请网络权限 + + 在`entry/src/main/module.json5`中添加 + +```json +requestPermissions: [ + { + name: "ohos.permission.INTERNET", + }, +], +``` + +- 如果使用的 resourceName 属性，需要将资源文件放置到 HarmonyOS 工程 rawfile 下对应的路径中 + +rawfile 路径：`entry/src/main/resources/rawfile` + + +## 4.属性 + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | -------- | ------------ | -------------------------- | +| children | 允许自定义UI元素叠加在Rive动画之上 | ReactNode | no | ios，android | yes | +| onPlay | Trigger event response when animation starts playing | animationName: string, isStateMachine: boolean | no | ios，android | yes | +| onPause | 当动画开始播放时触发事件响应 | animationName: string, isStateMachine: boolean | no | ios，android | yes | +| onStop | 当动画停止时触发事件响应 | animationName: string, isStateMachine: boolean | no | ios，android | yes | +| onLoopEnd | Trigger event response when animation completes loop | animationName: string, loopMode: LoopMode | no | ios，android | yes | +| onStateChanged | 动画完成循环时触发事件响应 states | stateMachineName: string, stateName: string | no | ios，android | yes | +| onRiveEventReceived | 在触发动画自定义事件时响应回调 | name: string; delay: number; properties: any; url: string; target: string | no | ios，android | yes | +| onError | 发生错误时触发事件响应 | rnRiveError: RNRiveError | no | ios，android | yes | +| style | Container style | StyleProp | no | ios，android | yes | +| autoplay | 是否自动播放动画 | boolean | no | ios，android | yes | +| resourceName | 本地资源名称（必须与.riv文件名匹配） | string | no | ios，android | yes | +| url | .riv文件网络资源URL | string | no | ios，android | yes | +| alignment | 容器内动画的对齐方式 | 'topLeft' 、'topCenter' 、 'topRight' 、 'centerLeft' 、 'center' 、 'centerRight' 、 'bottomLeft' 、 'bottomCenter' 、 'bottomRight' | no | ios，android | yes | +| fit | 缩放模式 | 'cover' 、 'contain'、 'fill' 、 'fitWidth' 、 'fitHeight' 、 'none' 、 'scaleDown' 、 'layout' | no | ios，android | yes | +| layoutScaleFactor | 自定义布局缩放系数 | number | no | ios，android | yes | +| artboardName | 指定要从文件加载的特定画板 | string | no | ios，android | yes | +| animationName | 播放具有指定名称的动画 | string | no | ios，android | yes | +| stateMachineName | 启用指定名称的状态机 | string | no | ios，android | yes | +| referencedAssets | 外部传入的资源引用 | {} | no | ios，android | yes | +| dataBinding | 绑定动态数据源 | {} | no | ios，android | yes | +| testID | 用于测试框架定位组件 | string | no | ios，android | yes | +| fireState | 在状态机中触发特定命名事件 | stateMachineName: string, inputName: string | no | ios，android | yes | +| setInputState | 设置状态机输入参数的数值（布尔值/数值）| stateMachineName: string,inputName:string,value: boolean/ number | no | ios，android | no | +| getBooleanState | 获取布尔类型的当前值| inputName:string | no | ios，android | yes | +| getNumberState | 获取数值类型的当前值| inputName:string | no | ios，android | yes | +| getBooleanStateAtPath | 获取指定路径下布尔类型的当前值| inputName:string, path:string | no | ios，android | yes | +| getNumberStateAtPath | 获取指定路径下数值类型的当前值|inputName:string, path:string| no | ios，android | yes | +| fireStateAtPath | 触发指定路径下的事件| inputName:string, path:string|no | ios，android | yes | +| setInputStateAtPath | 设置指定路径下参数的数值| inputName:string,value: boolean/number,path: string|no | ios，android | yes | +| play |播放动画|animationName?: string,loop?: LoopMode,direction?: Direction,isStateMachine?:boolean|no | ios，android | yes | +| pause |暂停当前播放|无|no | ios，android | yes | +| stop |停止播放|无|no | ios，android | yes | +| reset |重置动画|无|no | ios，android | yes | +| touchBegan |在指定坐标触发触摸开始事件|x: number, y: number|no | ios，android | yes | +| touchEnded |在指定坐标触发触摸结束事件|x: number, y: number|no | ios，android | yes | +| setTextRunValue |动态修改文本内容|textRunName: string, value: string|no | ios，android | yes | +| setTextRunValueAtPath |修改指定路径下的文本内容|textRunName: string, value: string,path: string|no | ios，android | yes | +| setBoolean |修改指定路径中的布尔类型|path: string, value: boolean|no | ios，android | yes | +| setString |修改指定路径下的字符串|path: string, value: string|no | ios，android | yes | +| setNumber |修改指定路径下数值|path: string, value: number|no | ios，android | yes | +| setColor |修改指定路径下的颜色属性|path: string, color: RiveRGBA/string|no | ios，android | yes | +| setEnum |修改指定路径下的枚举类型|path: string, value: string|no | ios，android | yes | +| trigger |触发事件|path: string|no | ios，android | yes | +| internalNativeEmitter |获取原生事件发射器|无|no | ios，android | yes | +| viewTag |获取关联的视图标签|无|no | ios，android | yes | + +## 5.遗留问题 + +## 6.其他 + +## 7.开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/rive-react-native/blob/sig/LICENSE) ，请自由地享受和参与开源。 -- Gitee