模板版本：v0.4.0

react-native-gesture-handler

本项目基于 react-native-gesture-handler 开发。

该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-gesture-handler，具体版本所属关系如下：

1. 安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：@react-native-ohos/react-native-gesture-handler Releases。对于未发布到npm的旧版本，请参考安装指南安装tgz包。

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

npm

npm install @react-native-ohos/react-native-gesture-handler

yarn

yarn add @react-native-ohos/react-native-gesture-handler

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

import React, { Component } from "react";
import { Animated, Dimensions } from "react-native";
import {
  GestureHandlerRootView,
  PanGestureHandler,
} from "react-native-gesture-handler";

const { width } = Dimensions.get("screen");
const circleRadius = 30;

class Circle extends Component {
  _touchX = new Animated.Value(width / 2 - circleRadius);

  _onPanGestureEvent = Animated.event([{ nativeEvent: { x: this._touchX } }], {
    useNativeDriver: true,
  });

  render() {
    return (
      <GestureHandlerRootView>
        <PanGestureHandler onGestureEvent={this._onPanGestureEvent}>
          <Animated.View
            style={{
              height: 150,
              justifyContent: "center",
            }}
          >
            <Animated.View
              style={[
                {
                  backgroundColor: "#42a5f5",
                  borderRadius: circleRadius,
                  height: circleRadius * 2,
                  width: circleRadius * 2,
                },
                {
                  transform: [
                    {
                      translateX: Animated.add(
                        this._touchX,
                        new Animated.Value(-circleRadius)
                      ),
                    },
                  ],
                },
              ]}
            />
          </Animated.View>
        </PanGestureHandler>
      </GestureHandlerRootView>
    );
  }
}

export default function App() {
  return <Circle />;
}

2. Link

使用AutoLink的工程需要根据该文档配置，Autolink框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md

如您使用的版本支持 Autolink，并且工程已接入 Autolink，可跳过ManualLink配置。

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

"properties":{
  "ohos.nativeResolver":false
}

"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",

    "@react-native-ohos/react-native-gesture-handler": "file:../../node_modules/@react-native-ohos/react-native-gesture-handler/harmony/gesture_handler.har"
  }

cd entry
ohpm install

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/react-native-gesture-handler/src/main/cpp" ./gesture-handler)
# 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_gesture_handler)
# RNOH_END: manual_package_linking_2

#include "RNOH/PackageProvider.h"
+ #include "generated/RNOHGeneratedPackage.h"
+ #include "GestureHandlerPackage.h"

using namespace rnoh;

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

+ import GestureHandlerPackage from '@react-native-ohos/react-native-gesture-handler';

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

2.5. 运行

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

然后编译、运行即可。

3. 约束与限制

3.1. 兼容性

本文档内容基于以下版本验证通过：

1. RNOH：0.72.33; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150;
2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150;
3. RNOH: 0.82.7; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1.260; ROM: 6.0.0.130 SP15;

4. 属性

Gestures

Gesture detector

GestureDetector 是 Gesture Handler 库 2.x 版本的一个主要组件。

Gesture detector 属性

Gesture 的方法

Components

Touchables

Gesture Handler 库提供了一种基于原生按钮的 React Native touchable 组件的实现，它不依赖于 React Native 的 JS responder system。这些组件的实现遵循相同的 API，旨在替代 React Native 中的 touchable 组件,HarmonyOS 已全面支持。

• Touchable Opacity
• Touchable Without Feedback
• Touchable Highlight
• Touchable Native Feedback

Buttons

BaseButton 属性

ReactButton 属性

RawButton 属性^2.30.1+

Pressable 属性^2.30.1+

Drawer Layout

属性

ReanimatedDrawerLayout^2.30.1+

属性

Swipeable

属性

ReanimatedSwipeable^2.30.1+

属性

Gesture handlers(legacy)

Gesture handlers 通用属性

Gesture handlers 通用事件数据

以下是提供给 onGestureEvent 和 onHandlerStateChange 回调的通用事件数据:

PanGestureHandler

PanGestureHandler 属性

PanGestureHandler 事件数据

请到查看基础 handler 类的通用事件数据。以下是 PanGestureHandler 特有的事件数据。

translationX

手势过程中沿 X 轴累计的平移距离，单位为 point。

translationY

手势过程中沿 Y 轴累计的平移距离，单位为 point。

velocityX

当前沿 X 轴的平移速度，单位为 point/s。

velocityY

当前沿 Y 轴的平移速度，单位为 point/s。

x

指针（单指或多指的主指）相对于附加到处理器的视图的当前 X 坐标，单位为 point。

y

指针（单指或多指的主指）相对于附加到处理器的视图的当前 Y 坐标，单位为 point。

TapGestureHandler

TapGestureHandler 属性

TapGestureHandler 事件数据

请到查看基础 handler 类的通用事件数据。以下是 TapGestureHandler 特有的事件数据。

x

指针（单指或多指的主指）相对于附加到处理器的视图的当前 X 坐标，单位为 point。

y

指针（单指或多指的主指）相对于附加到处理器的视图的当前 Y 坐标，单位为 point。

absoluteX

指针（单指或多指的主指）相对于窗口的当前 X 坐标，单位为 point。若手势会导致视图变换，推荐使用 absoluteX 而不是 x。

absoluteY

指针（单指或多指的主指）相对于窗口的当前 Y 坐标，单位为 point。若手势会导致视图变换，推荐使用 absoluteY 而不是 y。

ForceTouchGestureHandler^2.30.1+

ForceTouchGestureHandler属性^2.30.1+

ForceTouchGestureHandler事件数据^2.30.1+

以下是 ForceTouchGestureHandler 特有的事件数据。

force

触碰带来的压力。

5. 遗留问题

• statusbaranimation属性由于Arkts bar 只有淡出淡入动画和RN框架状态栏动画不支持，该功能暂不支持，问题: issue#55
• 0.82上游社区升级遗留问题，问题: issue#39

6. 其他

• 当使用框架 release 包时（react_native_openharmony_release.har），因为手势库用到了 deviceinfo 接口，需要在工程的 cmake 配置导入libdeviceinfo_ndk.z.so

# CMakeLists.txt
target_link_libraries(cpplib PUBLIC libace_napi.z.so 
+ libdeviceinfo_ndk.z.so)

7. 开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。