@tuya-oh/react-native-harmony-reanimated

v1.9.0-rc.0.0.6

Published

4 months ago

> 模板版本：v0.2.2

Downloads

0High
0Medium
0Low

模板版本：v0.2.2

[!TIP] Github 地址

安装与使用

进入到工程目录并输入以下命令：

npm

npm install @tuya-oh/react-native-harmony-reanimated

yarn

yarn add @tuya-oh/react-native-harmony-reanimated

下面的代码展示了这个库的基本使用场景：

[!WARNING] 使用时 import 的库名不变。

// react-native-reanimated 为例
import React from "react";
import { Text, View } from "react-native";
import Animated from "react-native-reanimated";
const rn_img = require("./react-native-logo.png");

const App = () => {
  return (
    <Animated.View>
      <Animated.Text>这是Animated.Image</Animated.Text>
      <Animated.Image
        source={rn_img}
        style={[styles.img_style]}
        resizeMode={"contain"}
      />
    </Animated.View>
  );
};

export default App;

使用 Codegen（如本库已适配了 Codegen ）

本库已经适配了 Codegen ，在使用前需要主动执行生成三方库桥接代码，详细请参考 Codegen 使用文档。

Link

目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。

首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony

1.在工程根目录的 `oh-package.json5` 添加 overrides 字段

{
  ...
  "overrides": {
    "@rnoh/react-native-openharmony" : "./react_native_openharmony"
  }
}

2.引入原生端代码

目前有两种方法：

通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
直接链接源码。

方法一：通过 har 包引入（推荐）

[!TIP] har 包位于三方库安装路径的 harmony 文件夹下。

打开 entry/oh-package.json5，添加以下依赖

"dependencies": {
   "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
+ "@tuya-oh/react-native-reanimated": "file:../../node_modules/@tuya-oh/react-native-harmony-reanimated/harmony/reanimated_v1.har",
}

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

方法二：直接链接源码

[!TIP] 如需使用直接链接源码，请参考直接链接源码说明

3.配置 CMakeLists 和引入 ReanimatedPackage

打开 entry/src/main/cpp/CMakeLists.txt，添加：

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}/@tuya-oh/react-native-reanimated/src/main/cpp" ./rn_reanimated)
# 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_include_directories(rnoh_app PUBLIC "${OH_MODULES}/@tuya-oh/react-native-reanimated/src/main/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 rn_reanimated)
# RNOH_END: manual_package_linking_2

打开 entry/src/main/cpp/PackageProvider.cpp，添加：

#include "RNOH/PackageProvider.h"
#include "generated/RNOHGeneratedPackage.h"
#include "SamplePackage.h"
+ #include "RNCReanimatePackage.h"

using namespace rnoh;

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
    return {
        std::make_shared<RNOHGeneratedPackage>(ctx),
        std::make_shared<SamplePackage>(ctx),
+       std::make_shared<RNCReanimatePackage>(ctx),
    };
}

4.在 ArkTs 侧引入 ReanimatedPackage

打开 entry/src/main/ets/RNPackagesFactory.ts，添加：

  ...
+import { ReanimatedPackage } from '@tuya-oh/react-native-reanimated/ts';

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
    new SamplePackage(ctx),
+   new ReanimatedPackage(ctx)
  ];
}

5.运行

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

然后编译、运行即可。

6.release包的使用

执行完'npm install @tuya-oh/[email protected]'命令后，在生成的node_modules/npm install @tuya-oh/react-native-harmony-reanimated中即可获取release包。

打开 entry/src/main/cpp/CMakeLists.txt，添加：

project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
set(CMAKE_SKIP_BUILD_RPATH TRUE)
set(NATIVERENDER_ROOT_PATH "${CMAKE_CURRENT_SOURCE_DIR}")
set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
set(RNOH_CPP_DIR "${OH_MODULE_DIR}/@rnoh/react-native-openharmony/include")
set(REACT_COMMON_PATCH_DIR "${RNOH_CPP_DIR}/patches/react_native_core")

set(CMAKE_CXX_STANDARD 17)
set(LOG_VERBOSITY_LEVEL 1)
set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
set(RNOH_GENERATED_DIR "${CMAKE_CURRENT_SOURCE_DIR}/generated")
set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie -DNDEBUG")
set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use
add_compile_definitions(WITH_HITRACE_SYSTRACE)
# folly的编译选项
set(folly_compile_options
    -DFOLLY_NO_CONFIG=1
    -DFOLLY_MOBILE=1
    -DFOLLY_USE_LIBCPP=1
    -DFOLLY_HAVE_RECVMMSG=1
    -DFOLLY_HAVE_PTHREAD=1
    -Wno-comma
    -Wno-shorten-64-to-32
    -Wno-documentation
    -faligned-new
)
add_compile_options("-Wno-unused-command-line-argument")
# 添加头文件目录
include_directories(${NATIVERENDER_ROOT_PATH}
                    ${RNOH_CPP_DIR}
                    ${REACT_COMMON_PATCH_DIR}
                    ${RNOH_CPP_DIR}/third-party/folly
                    ${RNOH_CPP_DIR}/third-party/rn/ReactCommon
                    ${RNOH_CPP_DIR}/third-party/rn/ReactCommon/react/nativemodule/core
                    ${RNOH_CPP_DIR}/third-party/rn/ReactCommon/jsi
                    ${RNOH_CPP_DIR}/third-party/rn/ReactCommon/callinvoker
                    ${RNOH_CPP_DIR}/third-party/boost/libs/utility/include
                    ${RNOH_CPP_DIR}/third-party/boost/libs/stacktrace/include
                    ${RNOH_CPP_DIR}/third-party/boost/libs/predef/include
                    ${RNOH_CPP_DIR}/third-party/boost/libs/array/include
                    ${RNOH_CPP_DIR}/third-party/boost/libs/throw_exception/include
                    ${RNOH_CPP_DIR}/third-party/boost/libs/config/include
                    ${RNOH_CPP_DIR}/third-party/boost/libs/core/include
                    ${RNOH_CPP_DIR}/third-party/boost/libs/preprocessor/include
                    ${RNOH_CPP_DIR}/third-party/double-conversion
                    ${RNOH_CPP_DIR}/third-party/rn/ReactCommon/react/renderer/graphics/platform/cxx
                    ${RNOH_CPP_DIR}/third-party/rn/ReactCommon/runtimeexecutor
                    ${RNOH_CPP_DIR}/third-party/glog/src
                    ${RNOH_CPP_DIR}/third-party/boost/libs/mpl/include
                    ${RNOH_CPP_DIR}/third-party/boost/libs/type_traits/include
                    ${RNOH_CPP_DIR}/third-party/rn/ReactCommon/yoga
                    ${RNOH_CPP_DIR}/third-party/boost/libs/intrusive/include
                    ${RNOH_CPP_DIR}/third-party/boost/libs/assert/include
                    ${RNOH_CPP_DIR}/third-party/boost/libs/move/include
                    ${RNOH_CPP_DIR}/third-party/boost/libs/static_assert/include
                    ${RNOH_CPP_DIR}/third-party/boost/libs/container_hash/include
                    ${RNOH_CPP_DIR}/third-party/boost/libs/describe/include
                    ${RNOH_CPP_DIR}/third-party/boost/libs/mp11/include
                    ${RNOH_CPP_DIR}/third-party/boost/libs/iterator/include
                    ${RNOH_CPP_DIR}/third-party/boost/libs/detail/include
                    ${RNOH_CPP_DIR}/patches/react_native_core/react/renderer/textlayoutmanager/platform/harmony
+                   ${OH_MODULE_DIR}/@tuya-oh/react-native-reanimated/include
                    )

configure_file(
  ${RNOH_CPP_DIR}/third-party/folly/CMake/folly-config.h.cmake
  ${RNOH_CPP_DIR}/third-party/folly/folly/folly-config.h
)
file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")
# 添加rnoh动态共享包
add_library(rnoh SHARED
    "${RNOH_CPP_DIR}/RNOHOther.cpp"
    "${RNOH_CPP_DIR}/third-party/folly/folly/lang/SafeAssert.cpp"
    )
# 链接其他so
target_link_directories(rnoh PUBLIC ${OH_MODULE_DIR}/@rnoh/react-native-openharmony/libs/arm64-v8a)

+ target_link_directories(rnoh PUBLIC ${OH_MODULE_DIR}/@tuya-oh/react-native-reanimated/libs/arm64-v8a)


target_link_libraries(rnoh PUBLIC
    rnoh_semi
    libace_napi.z.so
    libace_ndk.z.so
    librawfile.z.so
    libhilog_ndk.z.so
    libnative_vsync.so
    libnative_drawing.so
    libc++_shared.so
    libhitrace_ndk.z.so
    react_render_scheduler
    rrc_image
    rrc_text
    rrc_textinput
    rrc_scrollview
    react_nativemodule_core
    react_render_animations
    jsinspector
    hermes
    jsi
    logger
    react_config
    react_debug
    react_render_attributedstring
    react_render_componentregistry
    react_render_core
    react_render_debug
    react_render_graphics
    react_render_imagemanager
    react_render_mapbuffer
    react_render_mounting
    react_render_templateprocessor
    react_render_textlayoutmanager
    react_render_telemetry
    react_render_uimanager
    react_utils
    rrc_root
    rrc_view
    react_render_leakchecker
    react_render_runtimescheduler
    runtimeexecutor
+   rn_reanimated
    )

if("$ENV{RNOH_C_API_ARCH}" STREQUAL "1")
    message("Experimental C-API architecture enabled")
    target_link_libraries(rnoh PUBLIC libqos.so)
    target_compile_definitions(rnoh PUBLIC C_API_ARCH)
endif()

# 添加rnoh_app共享包
add_library(rnoh_app SHARED
    ${GENERATED_CPP_FILES}
    "./PackageProvider.cpp"
    "${RNOH_CPP_DIR}/RNOHOther.cpp"
    "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
)

+ target_include_directories(rnoh_app PUBLIC
+   "${OH_MODULE_DIR}/@tuya-oh/react-native-reanimated/include"
+   "${OH_MODULE_DIR}/@tuya-oh/react-native-reanimated/include//new_version"
+   "${OH_MODULE_DIR}/@tuya-oh/react-native-reanimated/include/generated/nodes"
+ )

target_link_libraries(rnoh_app PUBLIC rnoh)

# RNOH_END: link_packages

target_compile_options(rnoh_app PUBLIC ${folly_compile_options} -DRAW_PROPS_ENABLED -std=c++17)

7.字节码格式的release包使用

字节码格式的release包是指在release模式下编译出来、ets文件转换成了.abc、C++源码转换成.so的har包，其命名格式为 react_native_openharmony_abc-x.x.x.xxx.har。字节码格式的release包使用方式跟release包使用大体上是一样的，主要有两点需要注意：

使用字节码格式的release包需要将工程级的 build-profile.json5 文件中将 useNormalizedOHMUrl 设置为 true，如：

  "products": [
    {
      "name": "default",
      "signingConfig": "default",
      "compatibleSdkVersion": "5.0.1(14)",
      "runtimeOS": "HarmonyOS",
+     "buildOption": {
+       "strictMode": {
+          "useNormalizedOHMUrl": true
+       }
+     }
    }
  ],

组件

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

| Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------------- | ------------------------------------------------------------------- | -------------------- | -------- | --------------- | ----------------- | | Animated.View | 容器组件 | React.ReactElement | no | Android IOS | yes | | Animated.Text | 文本组件 | React.ReactElement | no | Android IOS | yes | | Animated.Image | 图片组件 | React.ReactElement | no | Android IOS | yes | | Animated.ScrollView | 滚动列表组件 | React.ReactElement | no | Android IOS | yes | | Animated.Code | 在组件中执行一些更新节点动画的操作, 只执行一次。可使用useCode替代 | React.ReactElement | no | Android IOS | yes |

API

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

| Name | ------------------- | Value | Clock | timing | decay | spring | acc | block | call | color | concat | cond | debug | defined | diff | diffClamp | event | interpolate | interpolateColors | onChange | proc | set | Description | Type | Required | Platform | HarmonyOS Support | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | -------- | --------------- | ----------------- | | 一个用于存储值的容器 | class | no | Android IOS | yes | | 一个特殊的Value,在更新动画的过程中将当前时间戳的值更新到对应的动画 | class | no | Android IOS | yes | | 动画在其持续时间内如何运行 | function | no | Android IOS | yes | | 某种属性或效果随时间逐渐减弱或消失的过程 | function | no | Android IOS | yes | | 弹性动画 | function | no | Android IOS | yes | | 返回给定节点的累计值 | function | no | Android IOS | yes | | 获取一个节点数组，并按照它们在数组中的顺序计算所有节点。然后返回最后一个节点的值。 | function | no | Android IOS | yes | | 如果 args nodes 数组中的一个节点更新，JavaScript 将调用回调，并将 args nodes 阵列中节点的当前值列表作为第一个参数。 | function | no | Android IOS | yes | | 创建 RGBA 格式的颜色节点，其中前三个输入节点应具有 0-255 范围内的整 round 数值（如果需要，请考虑使用节点），并分别对应颜色分量红、绿和蓝。最后一个输入节点应具有 0 到 1 之间的值，并表示 alpha 通道（值 1 表示完全不透明和 0 完全透明）。可以省略 Alpha 参数，然后 1 使用（完全不透明）作为默认值。 | function | no | Android IOS | yes | | 以字符串形式返回给定节点（数字或字符串）的连接结果 | function | no | Android IOS | yes | | 如果第一个参数为真,则判断第二个参数并返回,否则判断第三个参数 | function | no | Android IOS | yes | | 当节点被求值时，它会打印一个字符串，其中包含与 valueNode 的值连接的 messageString。然后返回 valueNode 的值。如果附加了 JS 调试器，则在 JS 调试器中打印日志；如果正在使用 Expo 客户端，则在控制台中打印日志，否则在本机控制台中打印。日志仅在 DEV 模式下可见，对生产构建没有影响。请注意，messageString 应该是普通字符串，而不是动画节点。 | function | no | Android IOS | yes | | 如果给定节点的计算结果为“已定义”值（即非 null、非 undefined 和非 NaN），则返回 1。否则返回 0。 | function | no | Android IOS | yes | | 对节点进行求值，并返回上次求值时返回的值与当前值之间的差值。第一次求值时，它返回节点的值。 | function | no | Android IOS | yes | | 与原始动画库的工作方式相同。 | function | no | Android IOS | yes | | 与原始动画库的工作方式相同 | function | no | Android IOS | yes | | 线性插值将值从一个范围映射到另一个范围 | function | no | Android IOS | yes | | 将一个范围内的输入值映射到一个颜色范围内的输出值。 | function | no | | no | | 求值时，它会将值与之前的值进行比较。如果它已更改，则将评估操作并返回其值。 | function | no | Android IOS | yes | | 返回一个可调用函数节点，该节点可用于定义可从其他节点调用的表达式。 | function | no | Android IOS | yes | | 求值时，它将把 sourceNode 的值分配给 Animated。值作为第一个参数传递。换句话说，它执行从 sourceNode 到 valueToBeUpdated 值节点的赋值操作，并返回一个表示此值的节点。 | function | no | Android IOS | yes |

Clock

| Name | Description | Type | Required | Platform | HarmonyOS Support | | -------------- | --------------------------------------------- | ---------- | -------- | --------------- | ----------------- | | clockRunning | 验证Clock是否启动,启动返回1,未启动返回0 | function | no | Android IOS | yes | | startClock | 启动Clock | function | no | Android IOS | yes | | stopClock | 停止Clock | function | no | Android IOS | yes |

`SpringUtils`

| Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------------------------------------- | ------------------------------------------------------------------------------------ | ---------- | -------- | --------------- | ----------------- | | makeDefaultConfig | 返回动画默认配置的对象 | function | no | Android IOS | yes | | makeConfigFromBouncinessAndSpeed | 将具有弹性和速度参数的对象转换为 spring 节点所需的配置。弹性和速度可以是节点或数字。 | function | no | Android IOS | yes | | makeConfigFromOrigamiTensionAndFriction | 将具有张力和摩擦参数的对象转换为弹簧节点所需的配置。张力和摩擦力可能是节点或数字。 | function | no | Android IOS | yes |

Math

| Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------- | ------------------------------ | ---------- | -------- | --------------- | ----------------- | | abs | 求绝对值 | function | no | Android IOS | yes | | add | 求和 | function | no | Android IOS | yes | | ceil | 向上取整 | function | no | Android IOS | yes | | divide | 除法 | function | no | Android IOS | yes | | exp | 返回节点指数 | function | no | Android IOS | yes | | floor | 向下取整 | function | no | Android IOS | yes | | log | 返回一个数的自然对数 | function | no | Android IOS | yes | | max | 返回两个节点值的最大值 | function | no | Android IOS | yes | | min | 返回两个节点值的最小值 | function | no | Android IOS | yes | | modulo | 返回第一个数除以第二个数的余数 | function | no | Android IOS | yes | | multiply | 乘积 | function | no | Android IOS | yes | | pow | 幂指数 | function | no | Android IOS | yes | | round | 四舍五入 | function | no | Android IOS | yes | | sqrt | 求平方 | function | no | Android IOS | yes | | sub | 求差 | function | no | Android IOS | yes |

三角函数

| Name | Description | Type | Required | Platform | HarmonyOS Support | | ------ | -------------------- | ---------- | -------- | --------------- | ----------------- | | acos | 返回一个数值的反余弦 | function | no | Android IOS | yes | | asin | 返回一个数值的反正弦 | function | no | Android IOS | yes | | atan | 返回一个数值的反正切 | function | no | Android IOS | yes | | cos | 返回一个数值的余弦值 | function | no | Android IOS | yes | | sin | 返回一个数字的正弦值 | function | no | Android IOS | yes | | tan | 返回一个数值的正切值 | function | no | Android IOS | yes |

逻辑表达式

| Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------- | ------------------------------------------------------------------------------------------------------------------------- | ---------- | -------- | --------------- | ----------------- | | and | 逻辑 AND 运算符, 按照提供的参数顺序进行运算,遇到false则返回该值，并停止运算。如果所有参数都为true则返回最后一个参数值 | function | no | Android IOS | yes | | eq | 比较两个参数是否相等 | function | no | Android IOS | yes | | greaterOrEq | 大于等于 | function | no | Android IOS | yes | | greaterThan | 大于 | function | no | Android IOS | yes | | lessOrEq | 小于等于 | function | no | Android IOS | yes | | lessThan | 小于 | function | no | Android IOS | yes | | neq | 不等于 | function | no | Android IOS | yes | | not | 参数如果判断为false则返回1,否则返回0 | function | no | Android IOS | yes | | or | 逻辑 OR 运算符, 按照提供的参数顺序进行运算,遇到true则返回该值，并停止运算。如果所有参数都为false则返回最后一个参数值 | function | no | Android IOS | yes |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme