From 8c81ddecbd96efadd71b37d6fe644a881d1c3515 Mon Sep 17 00:00:00 2001 From: Louis-C7 <972339262@qq.com> Date: Fri, 22 Dec 2023 11:32:41 +0800 Subject: [PATCH 1/3] =?UTF-8?q?[Issues:=20#I8Q6RJ]=20=E5=88=A0=E9=99=A4?= =?UTF-8?q?=E7=A7=81=E4=BB=93=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vmall/model.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/vmall/model.md b/vmall/model.md index c3623436f..f94325804 100644 --- a/vmall/model.md +++ b/vmall/model.md @@ -96,7 +96,6 @@ var styles = StyleSheet.create({ "dependencies": { "rnoh": "file:../rnoh", "rnoh-xxx": "file:../../node_modules/@react-native-oh-tpl//harmony/.har" - // 提示: (私仓)"rnoh-slider": "file:../../node_modules/@react-native-oh-tpl/slider/harmony/slider.har"(删除) // 提示: (公仓)"rnoh-linear-gradient": "file:../../node_modules/@react-native-oh-tpl/react-native-linear-gradient/harmony/linear_gradient.har"(删除) } ``` @@ -117,7 +116,6 @@ ohpm install "dependencies": { "rnoh": "file:../rnoh", "rnoh-xxx": "file:../../node_modules/@react-native-oh-tpl//harmony/" - // 提示: (私仓)"rnoh-slider": "file:../../node_modules/@react-native-oh-tpl/slider/harmony/slider"(删除) // 提示: (公仓)"rnoh-linear-gradient": "file:../../node_modules/@react-native-oh-tpl/react-native-linear-gradient/harmony/linear_gradient"(删除) } ``` -- Gitee From 93b695deb6562d6f2d8f8fb6846ed4594cbf492a Mon Sep 17 00:00:00 2001 From: Louis-C7 <972339262@qq.com> Date: Fri, 22 Dec 2023 11:57:59 +0800 Subject: [PATCH 2/3] =?UTF-8?q?[Issues:=20#I8MEA6]=20=E6=B7=BB=E5=8A=A0rea?= =?UTF-8?q?ct-native-gesture-handler=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 45 +-- _sidebar.md | 23 +- vmall/README.md | 2 +- vmall/_sidebar.md | 2 +- vmall/react-native-gesture-handler.md | 431 +++++++++++++++++++++++- zh-cn/README.md | 44 ++- zh-cn/react-native-gesture-handler.md | 449 ++++++++++++++++++++++++++ 7 files changed, 951 insertions(+), 45 deletions(-) create mode 100644 zh-cn/react-native-gesture-handler.md diff --git a/README.md b/README.md index e3016a634..f7f779631 100644 --- a/README.md +++ b/README.md @@ -12,28 +12,33 @@ >[!tip] NPM Github Packages 私仓坐标:@react-native-oh-library -| 序号 | 原库名 | 原库基线版本 | 原库是否支持新架构 | 鸿蒙化进度 | Releases | 文档链接 -|:---:| :----------: |:-------------:| :----------: | :----------: | :----------: | :----------: | +| 序号 | 原库名 | 原库基线版本 | 原库是否支持新架构 | 鸿蒙化进度 | Releases | 文档链接 | +| :--: | :----: | :----------: | :----------------: | :--------: | :------: | :------: | | 1 | [@react-native-async-storage/async-storage](https://github.com/react-native-async-storage/async-storage) | 1.19.5 | 是 | 100% | [@react-native-oh-library/async-storage](https://github.com/react-native-oh-library/async-storage/releases) | [链接](zh-cn/async-storage.md) | | 2 | [@react-native-clipboard/clipboard](https://github.com/react-native-clipboard/clipboard) | 1.12.1 | 是 | 80% | [@react-native-oh-library/clipboard](https://github.com/react-native-oh-library/clipboard/releases) | [链接](zh-cn/clipboard.md) | -| 3 | [@react-native-picker/picker](https://github.com/react-native-picker/picker) | 2.5.1 | 否 | 90% | [@react-native-oh-library/picker](https://github.com/react-native-oh-library/picker/releases) | [链接](zh-cn/picker.md) | -| 4 | [@react-native-community/progress-bar-android](https://github.com/react-native-progress-view/progress-bar-android) | 1.0.4 | 是 | 90% | [@react-native-oh-library/progress-bar-android](https://github.com/react-native-oh-library/progress-bar-android/releases) | [链接](zh-cn/progress-bar-android.md) | -| 5 | [@react-native-community/checkbox](https://github.com/react-native-checkbox/react-native-checkbox) | 0.5.16 | 否 | 100% | [@react-native-oh-library/checkbox](https://github.com/react-native-oh-library/react-native-checkbox/releases) | [链接](zh-cn/react-native-checkbox.md) | -| 6 | [react-native-fast-image](https://github.com/DylanVann/react-native-fast-image) | 8.6.3 | 否 | 70% | [@react-native-oh-tpl/react-native-fast-image](https://github.com/react-native-oh-library/react-native-fast-image/releases) | [链接](zh-cn/react-native-fast-image.md) | -| 7 | [react-native-linear-gradient](https://github.com/react-native-linear-gradient/react-native-linear-gradient) | 3.0.0-alpha.1 | 是 | 90% | [@react-native-oh-tpl/react-native-linear-gradient](https://github.com/react-native-oh-library/react-native-linear-gradient/releases) | [链接](zh-cn/react-native-linear-gradient.md) | -| 8 | [@react-native-masked-view/masked-view](https://github.com/react-native-masked-view/masked-view) | 0.2.9 | 否 | 90% | [@react-native-oh-library/masked-view](https://github.com/react-native-oh-library/masked-view/releases) | [链接](zh-cn/react-native-masked-view.md) | -| 9 | [@react-native-community/slider](https://github.com/callstack/react-native-slider) | 4.4.3 | 是 | 90% | [@react-native-oh-library/slider](https://github.com/react-native-oh-library/react-native-slider/releases) | [链接](zh-cn/react-native-slider.md) | -| 10 | [react-native-SmartRefreshLayout](https://github.com/react-native-studio/react-native-SmartRefreshLayout) | 0.6.7 | 否 | 70% | [@react-native-oh-tpl/react-native-SmartRefreshLayout](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases) | [链接](zh-cn/react-native-SmartRefreshLayout.md) | -| 11 | [lottie-react-native](https://github.com/lottie-react-native/lottie-react-native) | 6.4.1 | 是 | 50% | [@react-native-oh-tpl/lottie-react-native](https://github.com/react-native-oh-library/lottie-react-native/releases) | [链接](zh-cn/lottie-react-native.md) | -| 12 | [react-native-webview](https://github.com/react-native-webview/react-native-webview) | 13.6.2 | 是 | 15% | [@react-native-oh-tpl/react-native-webview](https://github.com/react-native-oh-library/react-native-webview/releases) | [链接](zh-cn/react-native-webview.md) | -| 13 | [react-native-svg](https://github.com/software-mansion/react-native-svg) | 13.14.0 | 是 | 10% | [@react-native-oh-tpl/react-native-svg](https://github.com/react-native-oh-library/react-native-svg/releases) | [链接](zh-cn/react-native-svg.md) | -| 14 | [react-native-exception-handler](https://github.com/a7ul/react-native-exception-handler) | 2.10.10 | 否 | 100% | [@react-native-oh-tpl/react-native-exception-handler](https://github.com/react-native-oh-library/react-native-exception-handler/releases) | [链接](zh-cn/react-native-exception-handler.md) | -| 15 | [react-native-pager-view](https://github.com/callstack/react-native-pager-view) | 6.2.2 | 是 | 100% | [@react-native-oh-tpl/react-native-pager-view](https://github.com/react-native-oh-library/react-native-pager-view/releases) | [链接](zh-cn/react-native-pager-view.md) | -| 16 | [react-native-screens](https://github.com/software-mansion/react-native-screens) | 3.29.0 | 是 | 0% | [react-native-screens](https://github.com/software-mansion/react-native-screens/releases) | [链接](zh-cn/react-native-screens.md) | -| 17 | [react-native-image-picker](https://github.com/react-native-image-picker/react-native-image-picker) | 7.0.3 | 是 | 50% | [@react-native-oh-tpl/react-native-image-picker](https://github.com/react-native-oh-library/react-native-image-picker/releases) | [链接](zh-cn/react-native-image-picker.md) | -| 18 | [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) | 4.7.4 | 是 |100% | [@react-native-oh-tpl/react-native-safe-area-context](https://github.com/react-native-oh-library/react-native-safe-area-context/releases) | [链接](zh-cn/react-native-safe-area-context.md) | -| 19 | [@react-native-community/netinfo](https://github.com/react-native-netinfo/react-native-netinfo) | 11.1.0 | 是 | 70% | [@react-native-oh-library/netinfo](https://github.com/react-native-oh-library/react-native-netinfo/releases) | [链接](zh-cn/react-native-netinfo.md) | - +| 3 | [@react-native-community/datetimepicker](https://github.com/react-native-datetimepicker/datetimepicker) | x | x | x | [@react-native-oh-tpl/datetimepicker](https://github.com/react-native-oh-library/datetimepicker) | [链接](zh-cn/datetimepicker.md) | +| 4 | [@shopify/flash-list](https://github.com/Shopify/flash-list) | 1.6.3 | 否 | 80% | [@react-native-oh-tpl/flash-list](https://github.com/react-native-oh-library/flash-list/tree/harmony) | [链接](zh-cn/flash-list.md) | +| 5 | [lottie-react-native](https://github.com/lottie-react-native/lottie-react-native) | 6.4.1 | 是 | 50% | [@react-native-oh-tpl/lottie-react-native](https://github.com/react-native-oh-library/lottie-react-native/releases) | [链接](zh-cn/lottie-react-native.md) | +| 6 | [@react-native-picker/picker](https://github.com/react-native-picker/picker) | 2.5.1 | 否 | 90% | [@react-native-oh-library/picker](https://github.com/react-native-oh-library/picker/releases) | [链接](zh-cn/picker.md) | +| 7 | [@react-native-community/progress-bar-android](https://github.com/react-native-progress-view/progress-bar-android) | 1.0.4 | 是 | 90% | [@react-native-oh-library/progress-bar-android](https://github.com/react-native-oh-library/progress-bar-android/releases) | [链接](zh-cn/progress-bar-android.md) | +| 8 | [@react-native-community/checkbox](https://github.com/react-native-checkbox/react-native-checkbox) | 0.5.16 | 否 | 100% | [@react-native-oh-library/checkbox](https://github.com/react-native-oh-library/react-native-checkbox/releases) | [链接](zh-cn/react-native-checkbox.md) | +| 9 | [react-native-exception-handler](https://github.com/a7ul/react-native-exception-handler) | 2.10.10 | 否 | 100% | [@react-native-oh-tpl/react-native-exception-handler](https://github.com/react-native-oh-library/react-native-exception-handler/releases) | [链接](zh-cn/react-native-exception-handler.md) | +| 10 | [react-native-fast-image](https://github.com/DylanVann/react-native-fast-image) | 8.6.3 | 否 | 70% | [@react-native-oh-tpl/react-native-fast-image](https://github.com/react-native-oh-library/react-native-fast-image/releases) | [链接](zh-cn/react-native-fast-image.md) | +| 11 | [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler) | 2.12.1 | 是 | 50% | [@react-native-oh-tpl/react-native-gesture-handler](https://github.com/react-native-oh-library/react-native-gesture-handler/releases) | [链接](zh-cn/react-native-gesture-handler.md) | +| 12 | [react-native-image-picker](https://github.com/react-native-image-picker/react-native-image-picker) | 7.0.3 | 是 | 50% | [@react-native-oh-tpl/react-native-image-picker](https://github.com/react-native-oh-library/react-native-image-picker/releases) | [链接](zh-cn/react-native-image-picker.md) | +| 13 | [react-native-linear-gradient](https://github.com/react-native-linear-gradient/react-native-linear-gradient) | 3.0.0-alpha.1 | 是 | 90% | [@react-native-oh-tpl/react-native-linear-gradient](https://github.com/react-native-oh-library/react-native-linear-gradient/releases) | [链接](zh-cn/react-native-linear-gradient.md) | +| 14 | [@react-native-masked-view/masked-view](https://github.com/react-native-masked-view/masked-view) | 0.2.9 | 否 | 90% | [@react-native-oh-tpl/masked-view](https://github.com/react-native-oh-library/masked-view/releases) | [链接](zh-cn/react-native-masked-view.md) | +| 15 | [@react-native-community/netinfo](https://github.com/react-native-netinfo/react-native-netinfo) | 11.1.0 | 是 | 70% | [@react-native-oh-library/netinfo](https://github.com/react-native-oh-library/react-native-netinfo/releases) | [链接](zh-cn/react-native-netinfo.md) | +| 16 | [react-native-pager-view](https://github.com/callstack/react-native-pager-view) | 6.2.2 | 是 | 100% | [@react-native-oh-tpl/react-native-pager-view](https://github.com/react-native-oh-library/react-native-pager-view/releases) | [链接](zh-cn/react-native-pager-view.md) | +| 17 | [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) | 4.7.4 | 是 |100% | [@react-native-oh-tpl/react-native-safe-area-context](https://github.com/react-native-oh-library/react-native-safe-area-context/releases) | [链接](zh-cn/react-native-safe-area-context.md) | +| 18 | [react-native-screens](https://github.com/software-mansion/react-native-screens) | 3.29.0 | 是 | 0% | [react-native-screens](https://github.com/software-mansion/react-native-screens/releases) | [链接](zh-cn/react-native-screens.md) | +| 19 | [@react-native-community/slider](https://github.com/callstack/react-native-slider) | 4.4.3 | 是 | 90% | [@react-native-oh-library/slider](https://github.com/react-native-oh-library/react-native-slider/releases) | [链接](zh-cn/react-native-slider.md) | +| 20 | [react-native-SmartRefreshLayout](https://github.com/react-native-studio/react-native-SmartRefreshLayout) | 0.6.7 | 否 | 70% | [@react-native-oh-tpl/react-native-SmartRefreshLayout](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases) | [链接](zh-cn/react-native-SmartRefreshLayout.md) | +| 21 | [react-native-svg](https://github.com/software-mansion/react-native-svg) | 13.14.0 | 是 | 10% | [@react-native-oh-tpl/react-native-svg](https://github.com/react-native-oh-library/react-native-svg/releases) | [链接](zh-cn/react-native-svg.md) | +| 22 | [react-native-tab-view](https://github.com/react-navigation/react-navigation/tree/6.x/packages/react-native-tab-view) | 3.5.2 | - | 100% | [@react-native-oh-tpl/react-native-tab-view](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](zh-cn/react-native-tab-view.md) | +| 23 | [react-native-video](https://github.com/react-native-video/react-native-video) | 5.2.1 | 是 | 25% | [@react-native-oh-tpl/react-native-video](https://github.com/react-native-oh-library/react-native-video) | [链接](zh-cn/react-native-video.md) | +| 24 | [react-native-webview](https://github.com/react-native-webview/react-native-webview) | 13.6.2 | 是 | 15% | [@react-native-oh-tpl/react-native-webview](https://github.com/react-native-oh-library/react-native-webview/releases) | [链接](zh-cn/react-native-webview.md) | +| 25 | [@react-navigation/elements](https://github.com/react-navigation/react-navigation/tree/6.x/packages/elements) | 1.3.21 | - | 100% | [@react-native-oh-tpl/elements](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](zh-cn/react-navigation-elements.md) | ## 社区 diff --git a/_sidebar.md b/_sidebar.md index 5bc88ae7e..ed34ac1e9 100644 --- a/_sidebar.md +++ b/_sidebar.md @@ -7,20 +7,33 @@ - [@react-native-async-storage/async-storage](zh-cn/async-storage.md) - [@react-native-clipboard/clipboard](zh-cn/clipboard.md) + - [@react-native-community/datetimepicker](zh-cn/datetimepicker.md) + - [@shopify/flash-list](zh-cn/flash-list.md) + - [lottie-react-native](zh-cn/lottie-react-native.md) - [@react-native-picker/picker](zh-cn/picker.md) - [@react-native-community/progress-bar-android](zh-cn/progress-bar-android.md) - [@react-native-community/checkbox](zh-cn/react-native-checkbox.md) + - [react-native-exception-handler](zh-cn/react-native-exception-handler.md) - [react-native-fast-image](zh-cn/react-native-fast-image.md) + - [react-native-gesture-handler](zh-cn/react-native-gesture-handler.md) + - [react-native-image-picker](zh-cn/react-native-image-picker.md) - [react-native-linear-gradient](zh-cn/react-native-linear-gradient.md) - [@react-native-masked-view/masked-view](zh-cn/react-native-masked-view.md) + - [@react-native-community/netinfo](zh-cn/react-native-netinfo.md) + - [react-native-pager-view](zh-cn/react-native-pager-view.md) + - [react-native-safe-area-context](zh-cn/react-native-safe-area-context.md) + - [react-native-screens](zh-cn/react-native-screens.md) - [@react-native-community/slider](zh-cn/react-native-slider.md) - [react-native-SmartRefreshLayout](zh-cn/react-native-SmartRefreshLayout.md) - - [lottie-react-native](zh-cn/lottie-react-native.md) + - [react-native-svg](zh-cn/react-native-svg.md) + - [react-native-tab-view](zh-cn/react-native-tab-view.md) + - [react-native-video](zh-cn/react-native-video.md) - [react-native-webview](zh-cn/react-native-webview.md) - - [react-native-exception-handler](zh-cn/react-native-exception-handler.md) - - [react-native-image-picker](zh-cn/react-native-image-picker.md) - - [react-native-safe-area-context](zh-cn/react-native-safe-area-context.md) - - [@react-native-community/netinfo](zh-cn/react-native-netinfo.md) + - [@react-navigation/elements](zh-cn/react-navigation-elements.md) + - [react-navigation](zh-cn/react-navigation) + + + diff --git a/vmall/README.md b/vmall/README.md index fd3e2d8f7..306f3f5c8 100644 --- a/vmall/README.md +++ b/vmall/README.md @@ -28,7 +28,7 @@ | 14 | [react-native-SmartRefreshLayout](https://github.com/react-native-studio/react-native-SmartRefreshLayout) | 0.6.7 | 否 | 70% | [@react-native-oh-tpl/react-native-SmartRefreshLayout](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases) | [链接](zh-cn/react-native-SmartRefreshLayout.md) | | 15 | [react-native-svg](https://github.com/software-mansion/react-native-svg) | 13.14.0 | 是 | 10% | [@react-native-oh-tpl/react-native-svg](https://github.com/react-native-oh-library/react-native-svg/releases) | [链接](zh-cn/react-native-svg.md) | | 16 | [react-native-tab-view](https://github.com/react-navigation/react-navigation/tree/6.x/packages/react-native-tab-view) | 3.5.2 | - | 100% | [@react-native-oh-tpl/react-native-tab-view](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](zh-cn/react-native-tab-view.md) | -| 17 | [react-native-video](https://github.com/react-native-video/react-native-video) | 5.2.1 | 是 | x | [@react-native-oh-tpl/react-native-video](https://github.com/react-native-oh-library/react-native-video) | [链接](vmall/react-native-video.md) | +| 17 | [react-native-video](https://github.com/react-native-video/react-native-video) | 5.2.1 | 是 | 25% | [@react-native-oh-tpl/react-native-video](https://github.com/react-native-oh-library/react-native-video) | [链接](vmall/react-native-video.md) | | 18 | [react-native-webview](https://github.com/react-native-webview/react-native-webview) | 13.6.2 | 是 | 15% | [@react-native-oh-tpl/react-native-webview](https://github.com/react-native-oh-library/react-native-webview/releases) | [链接](vmall/react-native-webview.md) | | 19 | [@react-navigation/elements](https://github.com/react-navigation/react-navigation/tree/6.x/packages/elements) | 1.3.21 | - | 100% | [@react-native-oh-tpl/elements](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](vmall/react-navigation-elements.md) | diff --git a/vmall/_sidebar.md b/vmall/_sidebar.md index 554067e1a..dccafd013 100644 --- a/vmall/_sidebar.md +++ b/vmall/_sidebar.md @@ -10,7 +10,7 @@ - [lottie-react-native](vmall/lottie-react-native.md) - [react-native-exception-handler](vmall/react-native-exception-handler.md) - [react-native-fast-image](vmall/react-native-fast-image.md) - - [react-native-gesture-handler]() + - [react-native-gesture-handler](vmall/react-native-gesture-handler.md) - [react-native-image-picker](vmall/react-native-image-picker.md) - [react-native-linear-gradient](vmall/react-native-linear-gradient.md) - [@react-native-masked-view/masked-view](vmall/react-native-masked-view.md) diff --git a/vmall/react-native-gesture-handler.md b/vmall/react-native-gesture-handler.md index 57db2e978..bbfba6757 100644 --- a/vmall/react-native-gesture-handler.md +++ b/vmall/react-native-gesture-handler.md @@ -1 +1,430 @@ -404 \ No newline at end of file +> 模板版本:v0.1.1 + +

+

react-native-gesture-handler

+

+

+ + Supported platforms + + + License + + +

+ +> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-gesture-handler) + +## 安装与使用 + +进入到工程目录并输入以下命令: + + + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-gesture-handler +``` + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-gesture-handler +``` + + + +快速使用: + +```js +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 ( + + + + + + + + ); + } +} + +export default function App() { + return ; +} +``` + +## Link + +目前鸿蒙暂不支持 AutoLink,所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` + +### 引入原生端代码 + +目前有两种方法: + +1. 通过 har 包引入(在 IDE 完善相关功能后该方法会被遗弃,目前首选此方法); +2. 直接链接源码。 + +方法一:通过 har 包引入 +打开 `entry/oh-package.json5`,添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-gesture-handler": "file:../../node_modules/@react-native-tpl-oh/react-native-gesture-handler/harmony/gesture_handler.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行: + +```bash +cd entry +ohpm install +``` + +方法二:直接链接源码 +打开 `entry/oh-package.json5`,添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-gesture-handler": "file:../../node_modules/@react-native-tpl-oh/react-native-gesture-handler/harmony/gesture_handler" + } +``` + +打开终端,执行: + +```bash +cd entry +ohpm install --no-link +``` + +### 配置 CMakeLists 和引入 GestureHandlerPackage + +打开 `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-gesture-handler/src/main/cpp" ./gesture-handler) +# 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_gesture_handler) +# RNOH_END: link_packages +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`,添加: + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "GestureHandlerPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 在 ArkTs 侧引入 gesture-handler 组件 + +react-native-gesture-handler 在 2.x 版本里,不再从原生端引入 ``,而是在 JS 端添加。详情请看官方说明:[Migrating off RNGHEnabledRootView](https://docs.swmansion.com/react-native-gesture-handler/docs/guides/migrating-off-rnghenabledroot)。 + +鸿蒙支持 1.x 在原生端替换 `RootView` 来添加 `` 的方式。 + +**如果使用 2.x 方式,则把后面带有 `1.x` 注释的代码删掉即可** + +打开 `entry/src/main/ets/pages/index.ets`,添加: + +```diff +... ++ import { RNGestureHandlerRootView, RNGestureHandlerButton } from "rnoh-gesture-handler" ++ import { RNGestureHandlerModule } from 'rnoh-gesture-handler/src/main/ets/RNGestureHandlerModule' // 1.x + + @Builder + function CustomComponentBuilder(ctx: ComponentBuilderContext) { + if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) { + SampleView({ + ctx: ctx.rnohContext, + tag: ctx.descriptor.tag, + buildCustomComponent: CustomComponentBuilder + }) + } ++ else if (ctx.componentName == RNGestureHandlerRootView.NAME){ ++ RNGestureHandlerRootView({ ++ ctx: ctx.rnohContext, ++ tag: ctx.tag, ++ buildCustomComponent: CustomComponentBuilder ++ }) ++ } else if (ctx.componentName == RNGestureHandlerButton.DESCRIPTOR_TYPE){ ++ RNGestureHandlerButton({ ++ ctx: ctx.rnohContext, ++ tag: ctx.tag, ++ buildCustomComponent: CustomComponentBuilder ++ }) ++ } + ... + } + ... + build() { + Column() { + if (this.rnAbility && this.shouldShow) { + RNApp({ ++ onSetUp: (rnInstance) => { // 1.x ++ rnInstance.bindComponentNameToDescriptorType(RNGestureHandlerRootView.NAME, "RootView") // 1.x ++ rnInstance.getTurboModule(RNGestureHandlerModule.NAME).install() // 1.x ++ }, // 1.x + ... + }) + } + } + .height('100%') + .width('100%') + } +``` + +### 运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行: + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[@react-native-oh-tpl/react-native-gesture-handler Releases](https://github.com/react-native-oh-library/react-native-gesture-handler/releases) + +> [!tip] [官方文档](https://docs.swmansion.com/react-native-gesture-handler/docs/) + +## Gestures + +### Gesture detector + +GestureDetector 是 Gesture Handler 库 2.x 版本的一个主要组件。 + +#### Gesture detector 属性 +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | -------- | +| gesture | A gesture object containing the configuration and callbacks. | base gestures or any ComposedGesture | yes | All | yes | +| userSelect | This parameter allows to specify which userSelect property should be applied to underlying view. | ("none" \| "auto" \| "text") | no | Web | no | + +目前 GestureDetector 支持: + +`Gesture.Tap() ` + +Creates a new instance of [TapGesture](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture) with its default config and no callbacks. + +`Gesture.Pan()` + +Creates a new instance of [PanGesture](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture) with its default config and no callbacks. + +## Components + +### Touchables + +Gesture Handler 库提供了一种基于原生按钮的 React Native touchable 组件的实现,它不依赖于 React Native 的 JS responder system。这些组件的实现遵循相同的API,旨在替代 React Native 中的 touchable 组件 + +目前支持: + +- [Touchable Opacity](https://reactnative.dev/docs/touchableopacity) + +- [Touchable Without Feedback](https://reactnative.dev/docs/touchablewithoutfeedback) + +## Gesture handlers(legacy) + +> [!WARNING] Consider using the new [gestures API](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/gesture) instead. The old API is not actively supported and is not receiving the new features. Check out [RNGH 2.0 section in Introduction](https://docs.swmansion.com/react-native-gesture-handler/docs/#rngh-20) for more information. + +### Gesture handlers 通用属性 + +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | -------- | +| enabled | Indicates whether the given handler should be analyzing stream of touch events or not. | boolean | no | All | yes | +| shouldCancelWhenOutside | When true the handler will cancel or fail recognition (depending on its current state) whenever the finger leaves the area of the connected view. | boolean | no | All | no | +| cancelsTouchesInView | When true, the handler will cancel touches for native UI components (UIButton, UISwitch, etc) it's attached to when it becomes ACTIVE. | boolean | no | iOS | no | +| simultaneousHandlers | When set, the handler will be allowed to activate even if one or more of the handlers provided by their refs are in an ACTIVE state. | refs | no | All | no | +| waitFor | When set the handler will not activate as long as the handlers provided by their refs are in the BEGAN state. | refs | no | All | no | +| hitSlop | This parameter enables control over what part of the connected view area can be used to begin recognizing the gesture. | object | no | All | yes | +| userSelect | This parameter allows to specify which userSelect property should be applied to underlying view. | ("none" \| "auto" \| "text") | no | Web | no | +| activeCursor | This parameter allows to specify which cursor should be used when gesture activates. | CSS cursor values | no | Web | no | +| onGestureEvent | Takes a callback that is going to be triggered for each subsequent touch event while the handler is in an ACTIVE state. | callback | no | All | yes | +| onHandlerStateChange | Takes a callback that is going to be triggered when state of the given handler changes. | callback | no | All | yes | + +### Gesture handlers 通用事件数据 + +以下是提供给 `onGestureEvent` 和 `onHandlerStateChange` 回调的通用事件数据: + +| 名称 | 说明 | 类型 | 原库平台 | 鸿蒙支持 | +| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | +| state | Current state of the handler. | State | All | yes | +| numberOfPointers | Represents the number of pointers (fingers) currently placed on the screen. | number | All | yes | + +### PanGestureHandler + +#### PanGestureHandler 属性 + +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | -------- | +| minDist | Minimum distance the finger (or multiple finger) need to travel before the handler activates. | number | no | All | yes | +| minPointers | A number of fingers that is required to be placed before handler can activate. | number | no | All | yes | +| maxPointers | When the given number of fingers is placed on the screen and handler hasn't yet activated it will fail recognizing the gesture. | number | no | All | yes | +| activeOffsetX | Range along X axis (in points) where fingers travels without activation of handler. | number | no | All | yes | +| activeOffsetY | Range along Y axis (in points) where fingers travels without activation of handler. | number | no | All | yes | +| failOffsetY | When the finger moves outside this range (in points) along Y axis and handler hasn't yet activated it will fail recognizing the gesture. | number | no | All | yes | +| failOffsetX | When the finger moves outside this range (in points) along X axis and handler hasn't yet activated it will fail recognizing the gesture. Range can be given as an array or a single number. | number | no | All | yes | +| maxDeltaX | This method is deprecated but supported for backward compatibility. Instead of using maxDeltaX={N} you can do failOffsetX={[-N, N]}. | number | no | All | yes | +| maxDeltaY | This method is deprecated but supported for backward compatibility. Instead of using maxDeltaY={N} you can do failOffsetY={[-N, N]}. | number | no | All | yes | +| minOffsetX | This method is deprecated but supported for backward compatibility. Instead of using minOffsetX={N} you can do activeOffsetX={N}. | number | no | All | yes | +| minOffsetY | This method is deprecated but supported for backward compatibility. Instead of using minOffsetY={N} you can do activeOffsetY={N}. | number | no | All | yes | +| minDeltaX | This method is deprecated but supported for backward compatibility. Instead of using minDeltaX={N} you can do activeOffsetX={[-N, N]}. | number | no | All | yes | +| minDeltaY | This method is deprecated but supported for backward compatibility. Instead of using minDeltaY={N} you can do activeOffsetY={[-N, N]}. | number | no | All | yes | +| avgTouches | Android, by default, will calculate translation values based on the position of the leading pointer (the first one that was placed on the screen). | number | no | Android | no | +| enableTrackpadTwoFingerGesture | Enables two-finger gestures on supported devices, for example iPads with trackpads. | boolean | no | iOS | no | + +#### PanGestureHandler 事件数据 + +请到查看[基础 handler 类的通用事件数据](#gesture-handlers-通用事件数据)。以下是 PanGestureHandler 特有的事件数据。 + +`translationX` + +Translation of the pan gesture along X axis accumulated over the time of the gesture. The value is expressed in the point units. + +`translationY` + +Translation of the pan gesture along Y axis accumulated over the time of the gesture. The value is expressed in the point units. + +`velocityX` + +Velocity of the pan gesture along the X axis in the current moment. The value is expressed in point units per second. + +`velocityY` + +Velocity of the pan gesture along the Y axis in the current moment. The value is expressed in point units per second. + +`x` + +X coordinate of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the handler. Expressed in point units. + +`y` + +Y coordinate of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the handler. Expressed in point units. + +### TapGestureHandler + +#### TapGestureHandler 属性 + +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | -------- | +| minPointers | Minimum number of pointers (fingers) required to be placed before the handler activates. | number | no | All | yes | +| maxDurationMs | Maximum time, expressed in milliseconds, that defines how fast a finger must be released after a touch. | number | no | All | yes | +| maxDelayMs | Maximum time, expressed in milliseconds, that can pass before the next tap — if many taps are required. | number | no | All | yes | +| maxDeltaX | Maximum distance, expressed in points, that defines how far the finger is allowed to travel along the X axis during a tap gesture. | number | no | All | yes | +| maxDeltaY | Maximum distance, expressed in points, that defines how far the finger is allowed to travel along the Y axis during a tap gesture. | number | no | All | yes | +| maxDist | Maximum distance, expressed in points, that defines how far the finger is allowed to travel during a tap gesture. | number | no | All | yes | + +#### TapGestureHandler 事件数据 + +请到查看[基础 handler 类的通用事件数据](#gesture-handlers-通用事件数据)。以下是 TapGestureHandler 特有的事件数据。 + +`x` + +X coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the handler. + +`y` + +Y coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the handler. + +`absoluteX` + +X coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the window. It is recommended to use absoluteX instead of x in cases when the view attached to the handler can be transformed as an effect of the gesture. + +`absoluteY` + +Y coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the window. It is recommended to use absoluteY instead of y in cases when the view attached to the handler can be transformed as an effect of the gesture. + +## 遗留问题 + +- 目前只支持 Pan 和 Tag 手势 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-linear-gradient/blob/harmony/LICENSE) ,请自由地享受和参与开源。 diff --git a/zh-cn/README.md b/zh-cn/README.md index 7d3aca41f..f7f779631 100644 --- a/zh-cn/README.md +++ b/zh-cn/README.md @@ -12,23 +12,33 @@ >[!tip] NPM Github Packages 私仓坐标:@react-native-oh-library -| 序号 | 原库名 | 原库基线版本 | 原库是否支持新架构 | 鸿蒙化进度 | Releases | 文档链接 -|:---:| :----------: |:-------------:| :----------: | :----------: | :----------: | :----------: | -| 1 | [@react-native-async-storage/async-storage](https://github.com/react-native-async-storage/async-storage) | 1.19.5 | 是 | 100% | [@react-native-oh-library/async-storage](https://github.com/react-native-oh-library/async-storage/releases) | [链接](async-storage.md) | -| 2 | [@react-native-clipboard/clipboard](https://github.com/react-native-clipboard/clipboard) | 1.12.1 | 是 | 80% | [@react-native-oh-library/clipboard](https://github.com/react-native-oh-library/clipboard/releases) | [链接](clipboard.md) | -| 3 | [@react-native-picker/picker](https://github.com/react-native-picker/picker) | 2.5.1 | 否 | 90% | [@react-native-oh-library/picker](https://github.com/react-native-oh-library/picker/releases) | [链接](picker.md) | -| 4 | [@react-native-community/progress-bar-android](https://github.com/react-native-progress-view/progress-bar-android) | 1.0.4 | 是 | 90% | [@react-native-oh-library/progress-bar-android](https://github.com/react-native-oh-library/progress-bar-android/releases) | [链接](progress-bar-android.md) | -| 5 | [@react-native-community/checkbox](https://github.com/react-native-checkbox/react-native-checkbox) | 0.5.16 | 否 | 100% | [@react-native-oh-library/checkbox](https://github.com/react-native-oh-library/react-native-checkbox/releases) | [链接](react-native-checkbox.md) | -| 6 | [react-native-fast-image](https://github.com/DylanVann/react-native-fast-image) | 8.6.3 | 否 | 70% | [@react-native-oh-tpl/react-native-fast-image](https://github.com/react-native-oh-library/react-native-fast-image/releases) | [链接](react-native-fast-image.md) | -| 7 | [react-native-linear-gradient](https://github.com/react-native-linear-gradient/react-native-linear-gradient) | 3.0.0-alpha.1 | 是 | 90% | [@react-native-oh-tpl/react-native-linear-gradient](https://github.com/react-native-oh-library/react-native-linear-gradient/releases) | [链接](react-native-linear-gradient.md) | -| 8 | [@react-native-masked-view/masked-view](https://github.com/react-native-masked-view/masked-view) | 0.2.9 | 否 | 90% | [@react-native-oh-library/masked-view](https://github.com/react-native-oh-library/masked-view/releases) | [链接](react-native-masked-view.md) | -| 9 | [@react-native-community/slider](https://github.com/callstack/react-native-slider) | 4.4.3 | 是 | 90% | [@react-native-oh-library/slider](https://github.com/react-native-oh-library/react-native-slider/releases) | [链接](react-native-slider.md) | -| 10 | [react-native-SmartRefreshLayout](https://github.com/react-native-studio/react-native-SmartRefreshLayout) | 0.6.7 | 否 | 70% | [@react-native-oh-tpl/react-native-SmartRefreshLayout](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases) | [链接](react-native-SmartRefreshLayout.md) | -| 11 | [lottie-react-native](https://github.com/lottie-react-native/lottie-react-native) | 6.4.1 | 是 | 50% | [@react-native-oh-tpl/lottie-react-native](https://github.com/react-native-oh-library/lottie-react-native/releases) | [链接](lottie-react-native.md) | -| 12 | [react-native-webview](https://github.com/react-native-webview/react-native-webview) | 13.6.2 | 是 | 15% | [@react-native-oh-tpl/react-native-webview](https://github.com/react-native-oh-library/react-native-webview/releases) | [链接](react-native-webview.md) | -| 13 | [react-native-svg](https://github.com/software-mansion/react-native-svg) | 13.14.0 | 是 | 10% | [@react-native-oh-tpl/react-native-svg](https://github.com/react-native-oh-library/react-native-svg/releases) | [链接](react-native-svg.md) | -| 14 | [react-native-exception-handler](https://github.com/a7ul/react-native-exception-handler) | 2.10.10 | 否 | 100% | [@react-native-oh-tpl/react-native-exception-handler](https://github.com/react-native-oh-library/react-native-exception-handler/releases) | [链接](react-native-exception-handler.md) | -| 15 | [react-native-pager-view](https://github.com/callstack/react-native-pager-view) | 6.2.2 | 是 | 100% | [@react-native-oh-tpl/react-native-pager-view](https://github.com/react-native-oh-library/react-native-pager-view/releases) | [链接](react-native-pager-view.md) | +| 序号 | 原库名 | 原库基线版本 | 原库是否支持新架构 | 鸿蒙化进度 | Releases | 文档链接 | +| :--: | :----: | :----------: | :----------------: | :--------: | :------: | :------: | +| 1 | [@react-native-async-storage/async-storage](https://github.com/react-native-async-storage/async-storage) | 1.19.5 | 是 | 100% | [@react-native-oh-library/async-storage](https://github.com/react-native-oh-library/async-storage/releases) | [链接](zh-cn/async-storage.md) | +| 2 | [@react-native-clipboard/clipboard](https://github.com/react-native-clipboard/clipboard) | 1.12.1 | 是 | 80% | [@react-native-oh-library/clipboard](https://github.com/react-native-oh-library/clipboard/releases) | [链接](zh-cn/clipboard.md) | +| 3 | [@react-native-community/datetimepicker](https://github.com/react-native-datetimepicker/datetimepicker) | x | x | x | [@react-native-oh-tpl/datetimepicker](https://github.com/react-native-oh-library/datetimepicker) | [链接](zh-cn/datetimepicker.md) | +| 4 | [@shopify/flash-list](https://github.com/Shopify/flash-list) | 1.6.3 | 否 | 80% | [@react-native-oh-tpl/flash-list](https://github.com/react-native-oh-library/flash-list/tree/harmony) | [链接](zh-cn/flash-list.md) | +| 5 | [lottie-react-native](https://github.com/lottie-react-native/lottie-react-native) | 6.4.1 | 是 | 50% | [@react-native-oh-tpl/lottie-react-native](https://github.com/react-native-oh-library/lottie-react-native/releases) | [链接](zh-cn/lottie-react-native.md) | +| 6 | [@react-native-picker/picker](https://github.com/react-native-picker/picker) | 2.5.1 | 否 | 90% | [@react-native-oh-library/picker](https://github.com/react-native-oh-library/picker/releases) | [链接](zh-cn/picker.md) | +| 7 | [@react-native-community/progress-bar-android](https://github.com/react-native-progress-view/progress-bar-android) | 1.0.4 | 是 | 90% | [@react-native-oh-library/progress-bar-android](https://github.com/react-native-oh-library/progress-bar-android/releases) | [链接](zh-cn/progress-bar-android.md) | +| 8 | [@react-native-community/checkbox](https://github.com/react-native-checkbox/react-native-checkbox) | 0.5.16 | 否 | 100% | [@react-native-oh-library/checkbox](https://github.com/react-native-oh-library/react-native-checkbox/releases) | [链接](zh-cn/react-native-checkbox.md) | +| 9 | [react-native-exception-handler](https://github.com/a7ul/react-native-exception-handler) | 2.10.10 | 否 | 100% | [@react-native-oh-tpl/react-native-exception-handler](https://github.com/react-native-oh-library/react-native-exception-handler/releases) | [链接](zh-cn/react-native-exception-handler.md) | +| 10 | [react-native-fast-image](https://github.com/DylanVann/react-native-fast-image) | 8.6.3 | 否 | 70% | [@react-native-oh-tpl/react-native-fast-image](https://github.com/react-native-oh-library/react-native-fast-image/releases) | [链接](zh-cn/react-native-fast-image.md) | +| 11 | [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler) | 2.12.1 | 是 | 50% | [@react-native-oh-tpl/react-native-gesture-handler](https://github.com/react-native-oh-library/react-native-gesture-handler/releases) | [链接](zh-cn/react-native-gesture-handler.md) | +| 12 | [react-native-image-picker](https://github.com/react-native-image-picker/react-native-image-picker) | 7.0.3 | 是 | 50% | [@react-native-oh-tpl/react-native-image-picker](https://github.com/react-native-oh-library/react-native-image-picker/releases) | [链接](zh-cn/react-native-image-picker.md) | +| 13 | [react-native-linear-gradient](https://github.com/react-native-linear-gradient/react-native-linear-gradient) | 3.0.0-alpha.1 | 是 | 90% | [@react-native-oh-tpl/react-native-linear-gradient](https://github.com/react-native-oh-library/react-native-linear-gradient/releases) | [链接](zh-cn/react-native-linear-gradient.md) | +| 14 | [@react-native-masked-view/masked-view](https://github.com/react-native-masked-view/masked-view) | 0.2.9 | 否 | 90% | [@react-native-oh-tpl/masked-view](https://github.com/react-native-oh-library/masked-view/releases) | [链接](zh-cn/react-native-masked-view.md) | +| 15 | [@react-native-community/netinfo](https://github.com/react-native-netinfo/react-native-netinfo) | 11.1.0 | 是 | 70% | [@react-native-oh-library/netinfo](https://github.com/react-native-oh-library/react-native-netinfo/releases) | [链接](zh-cn/react-native-netinfo.md) | +| 16 | [react-native-pager-view](https://github.com/callstack/react-native-pager-view) | 6.2.2 | 是 | 100% | [@react-native-oh-tpl/react-native-pager-view](https://github.com/react-native-oh-library/react-native-pager-view/releases) | [链接](zh-cn/react-native-pager-view.md) | +| 17 | [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) | 4.7.4 | 是 |100% | [@react-native-oh-tpl/react-native-safe-area-context](https://github.com/react-native-oh-library/react-native-safe-area-context/releases) | [链接](zh-cn/react-native-safe-area-context.md) | +| 18 | [react-native-screens](https://github.com/software-mansion/react-native-screens) | 3.29.0 | 是 | 0% | [react-native-screens](https://github.com/software-mansion/react-native-screens/releases) | [链接](zh-cn/react-native-screens.md) | +| 19 | [@react-native-community/slider](https://github.com/callstack/react-native-slider) | 4.4.3 | 是 | 90% | [@react-native-oh-library/slider](https://github.com/react-native-oh-library/react-native-slider/releases) | [链接](zh-cn/react-native-slider.md) | +| 20 | [react-native-SmartRefreshLayout](https://github.com/react-native-studio/react-native-SmartRefreshLayout) | 0.6.7 | 否 | 70% | [@react-native-oh-tpl/react-native-SmartRefreshLayout](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases) | [链接](zh-cn/react-native-SmartRefreshLayout.md) | +| 21 | [react-native-svg](https://github.com/software-mansion/react-native-svg) | 13.14.0 | 是 | 10% | [@react-native-oh-tpl/react-native-svg](https://github.com/react-native-oh-library/react-native-svg/releases) | [链接](zh-cn/react-native-svg.md) | +| 22 | [react-native-tab-view](https://github.com/react-navigation/react-navigation/tree/6.x/packages/react-native-tab-view) | 3.5.2 | - | 100% | [@react-native-oh-tpl/react-native-tab-view](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](zh-cn/react-native-tab-view.md) | +| 23 | [react-native-video](https://github.com/react-native-video/react-native-video) | 5.2.1 | 是 | 25% | [@react-native-oh-tpl/react-native-video](https://github.com/react-native-oh-library/react-native-video) | [链接](zh-cn/react-native-video.md) | +| 24 | [react-native-webview](https://github.com/react-native-webview/react-native-webview) | 13.6.2 | 是 | 15% | [@react-native-oh-tpl/react-native-webview](https://github.com/react-native-oh-library/react-native-webview/releases) | [链接](zh-cn/react-native-webview.md) | +| 25 | [@react-navigation/elements](https://github.com/react-navigation/react-navigation/tree/6.x/packages/elements) | 1.3.21 | - | 100% | [@react-native-oh-tpl/elements](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](zh-cn/react-navigation-elements.md) | ## 社区 diff --git a/zh-cn/react-native-gesture-handler.md b/zh-cn/react-native-gesture-handler.md new file mode 100644 index 000000000..fe3384368 --- /dev/null +++ b/zh-cn/react-native-gesture-handler.md @@ -0,0 +1,449 @@ +> 模板版本:v0.0.1 + +

+

react-native-gesture-handler

+

+

+ + Supported platforms + + + License + + +

+ +## 安装与使用 + +**正在 npm 发布中,当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-gesture-handler/releases)中获取库 tgz,通过使用本地依赖来安装本库。** + +打开 `package.json`,添加: + +```json +... +"dependencies": { + ... + "@react-native-oh-tpl/react-native-gesture-handler": "xxx.tgz", +}, +... +``` + +然后再终端运行 + +```bash +npm i +``` + +发布到 npm 之后可以正常使用命令安装(暂未发布) + +进入到工程目录并输入以下命令: + + + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-gesture-handler +``` + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-gesture-handler +``` + + + +快速使用: + +```js +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 ( + + + + + + + + ); + } +} + +export default function App() { + return ; +} +``` + +## Link + +目前鸿蒙暂不支持 AutoLink,所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` + +### 引入原生端代码 + +目前有两种方法: + +1. 通过 har 包引入(在 IDE 完善相关功能后该方法会被遗弃,目前首选此方法); +2. 直接链接源码。 + +方法一:通过 har 包引入 +打开 `entry/oh-package.json5`,添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-gesture-handler": "file:../../node_modules/@react-native-tpl-oh/react-native-gesture-handler/harmony/gesture_handler.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行: + +```bash +cd entry +ohpm install +``` + +方法二:直接链接源码 +打开 `entry/oh-package.json5`,添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-gesture-handler": "file:../../node_modules/@react-native-tpl-oh/react-native-gesture-handler/harmony/gesture_handler" + } +``` + +打开终端,执行: + +```bash +cd entry +ohpm install --no-link +``` + +### 配置 CMakeLists 和引入 GestureHandlerPackage + +打开 `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-gesture-handler/src/main/cpp" ./gesture-handler) +# 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_gesture_handler) +# RNOH_END: link_packages +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`,添加: + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "GestureHandlerPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 在 ArkTs 侧引入 gesture-handler 组件 + +react-native-gesture-handler 在 2.x 版本里,不再从原生端引入 ``,而是在 JS 端添加。详情请看官方说明:[Migrating off RNGHEnabledRootView](https://docs.swmansion.com/react-native-gesture-handler/docs/guides/migrating-off-rnghenabledroot)。 + +鸿蒙支持 1.x 在原生端替换 `RootView` 来添加 `` 的方式。 + +**如果使用 2.x 方式,则把后面带有 `1.x` 注释的代码删掉即可** + +打开 `entry/src/main/ets/pages/index.ets`,添加: + +```diff +... ++ import { RNGestureHandlerRootView, RNGestureHandlerButton } from "rnoh-gesture-handler" ++ import { RNGestureHandlerModule } from 'rnoh-gesture-handler/src/main/ets/RNGestureHandlerModule' // 1.x + + @Builder + function CustomComponentBuilder(ctx: ComponentBuilderContext) { + if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) { + SampleView({ + ctx: ctx.rnohContext, + tag: ctx.descriptor.tag, + buildCustomComponent: CustomComponentBuilder + }) + } ++ else if (ctx.componentName == RNGestureHandlerRootView.NAME){ ++ RNGestureHandlerRootView({ ++ ctx: ctx.rnohContext, ++ tag: ctx.tag, ++ buildCustomComponent: CustomComponentBuilder ++ }) ++ } else if (ctx.componentName == RNGestureHandlerButton.DESCRIPTOR_TYPE){ ++ RNGestureHandlerButton({ ++ ctx: ctx.rnohContext, ++ tag: ctx.tag, ++ buildCustomComponent: CustomComponentBuilder ++ }) ++ } + ... + } + ... + build() { + Column() { + if (this.rnAbility && this.shouldShow) { + RNApp({ ++ onSetUp: (rnInstance) => { // 1.x ++ rnInstance.bindComponentNameToDescriptorType(RNGestureHandlerRootView.NAME, "RootView") // 1.x ++ rnInstance.getTurboModule(RNGestureHandlerModule.NAME).install() // 1.x ++ }, // 1.x + ... + }) + } + } + .height('100%') + .width('100%') + } +``` + +### 运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行: + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[@react-native-oh-tpl/react-native-gesture-handler Releases](https://github.com/react-native-oh-library/react-native-gesture-handler/releases) + +> [!tip] [官方文档](https://docs.swmansion.com/react-native-gesture-handler/docs/) + +## Gestures + +### Gesture detector + +GestureDetector 是 Gesture Handler 库 2.x 版本的一个主要组件。 + +#### Gesture detector 属性 +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | -------- | +| gesture | A gesture object containing the configuration and callbacks. | base gestures or any ComposedGesture | yes | All | yes | +| userSelect | This parameter allows to specify which userSelect property should be applied to underlying view. | ("none" \| "auto" \| "text") | no | Web | no | + +目前 GestureDetector 支持: + +`Gesture.Tap() ` + +Creates a new instance of [TapGesture](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture) with its default config and no callbacks. + +`Gesture.Pan()` + +Creates a new instance of [PanGesture](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture) with its default config and no callbacks. + +## Components + +### Touchables + +Gesture Handler 库提供了一种基于原生按钮的 React Native touchable 组件的实现,它不依赖于 React Native 的 JS responder system。这些组件的实现遵循相同的API,旨在替代 React Native 中的 touchable 组件 + +目前支持: + +- [Touchable Opacity](https://reactnative.dev/docs/touchableopacity) + +- [Touchable Without Feedback](https://reactnative.dev/docs/touchablewithoutfeedback) + +## Gesture handlers(legacy) + +> [!WARNING] Consider using the new [gestures API](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/gesture) instead. The old API is not actively supported and is not receiving the new features. Check out [RNGH 2.0 section in Introduction](https://docs.swmansion.com/react-native-gesture-handler/docs/#rngh-20) for more information. + +### Gesture handlers 通用属性 + +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | -------- | +| enabled | Indicates whether the given handler should be analyzing stream of touch events or not. | boolean | no | All | yes | +| shouldCancelWhenOutside | When true the handler will cancel or fail recognition (depending on its current state) whenever the finger leaves the area of the connected view. | boolean | no | All | no | +| cancelsTouchesInView | When true, the handler will cancel touches for native UI components (UIButton, UISwitch, etc) it's attached to when it becomes ACTIVE. | boolean | no | iOS | no | +| simultaneousHandlers | When set, the handler will be allowed to activate even if one or more of the handlers provided by their refs are in an ACTIVE state. | refs | no | All | no | +| waitFor | When set the handler will not activate as long as the handlers provided by their refs are in the BEGAN state. | refs | no | All | no | +| hitSlop | This parameter enables control over what part of the connected view area can be used to begin recognizing the gesture. | object | no | All | yes | +| userSelect | This parameter allows to specify which userSelect property should be applied to underlying view. | ("none" \| "auto" \| "text") | no | Web | no | +| activeCursor | This parameter allows to specify which cursor should be used when gesture activates. | CSS cursor values | no | Web | no | +| onGestureEvent | Takes a callback that is going to be triggered for each subsequent touch event while the handler is in an ACTIVE state. | callback | no | All | yes | +| onHandlerStateChange | Takes a callback that is going to be triggered when state of the given handler changes. | callback | no | All | yes | + +### Gesture handlers 通用事件数据 + +以下是提供给 `onGestureEvent` 和 `onHandlerStateChange` 回调的通用事件数据: + +| 名称 | 说明 | 类型 | 原库平台 | 鸿蒙支持 | +| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | +| state | Current state of the handler. | State | All | yes | +| numberOfPointers | Represents the number of pointers (fingers) currently placed on the screen. | number | All | yes | + +### PanGestureHandler + +#### PanGestureHandler 属性 + +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | -------- | +| minDist | Minimum distance the finger (or multiple finger) need to travel before the handler activates. | number | no | All | yes | +| minPointers | A number of fingers that is required to be placed before handler can activate. | number | no | All | yes | +| maxPointers | When the given number of fingers is placed on the screen and handler hasn't yet activated it will fail recognizing the gesture. | number | no | All | yes | +| activeOffsetX | Range along X axis (in points) where fingers travels without activation of handler. | number | no | All | yes | +| activeOffsetY | Range along Y axis (in points) where fingers travels without activation of handler. | number | no | All | yes | +| failOffsetY | When the finger moves outside this range (in points) along Y axis and handler hasn't yet activated it will fail recognizing the gesture. | number | no | All | yes | +| failOffsetX | When the finger moves outside this range (in points) along X axis and handler hasn't yet activated it will fail recognizing the gesture. Range can be given as an array or a single number. | number | no | All | yes | +| maxDeltaX | This method is deprecated but supported for backward compatibility. Instead of using maxDeltaX={N} you can do failOffsetX={[-N, N]}. | number | no | All | yes | +| maxDeltaY | This method is deprecated but supported for backward compatibility. Instead of using maxDeltaY={N} you can do failOffsetY={[-N, N]}. | number | no | All | yes | +| minOffsetX | This method is deprecated but supported for backward compatibility. Instead of using minOffsetX={N} you can do activeOffsetX={N}. | number | no | All | yes | +| minOffsetY | This method is deprecated but supported for backward compatibility. Instead of using minOffsetY={N} you can do activeOffsetY={N}. | number | no | All | yes | +| minDeltaX | This method is deprecated but supported for backward compatibility. Instead of using minDeltaX={N} you can do activeOffsetX={[-N, N]}. | number | no | All | yes | +| minDeltaY | This method is deprecated but supported for backward compatibility. Instead of using minDeltaY={N} you can do activeOffsetY={[-N, N]}. | number | no | All | yes | +| avgTouches | Android, by default, will calculate translation values based on the position of the leading pointer (the first one that was placed on the screen). | number | no | Android | no | +| enableTrackpadTwoFingerGesture | Enables two-finger gestures on supported devices, for example iPads with trackpads. | boolean | no | iOS | no | + +#### PanGestureHandler 事件数据 + +请到查看[基础 handler 类的通用事件数据](#gesture-handlers-通用事件数据)。以下是 PanGestureHandler 特有的事件数据。 + +`translationX` + +Translation of the pan gesture along X axis accumulated over the time of the gesture. The value is expressed in the point units. + +`translationY` + +Translation of the pan gesture along Y axis accumulated over the time of the gesture. The value is expressed in the point units. + +`velocityX` + +Velocity of the pan gesture along the X axis in the current moment. The value is expressed in point units per second. + +`velocityY` + +Velocity of the pan gesture along the Y axis in the current moment. The value is expressed in point units per second. + +`x` + +X coordinate of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the handler. Expressed in point units. + +`y` + +Y coordinate of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the handler. Expressed in point units. + +### TapGestureHandler + +#### TapGestureHandler 属性 + +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | -------- | +| minPointers | Minimum number of pointers (fingers) required to be placed before the handler activates. | number | no | All | yes | +| maxDurationMs | Maximum time, expressed in milliseconds, that defines how fast a finger must be released after a touch. | number | no | All | yes | +| maxDelayMs | Maximum time, expressed in milliseconds, that can pass before the next tap — if many taps are required. | number | no | All | yes | +| maxDeltaX | Maximum distance, expressed in points, that defines how far the finger is allowed to travel along the X axis during a tap gesture. | number | no | All | yes | +| maxDeltaY | Maximum distance, expressed in points, that defines how far the finger is allowed to travel along the Y axis during a tap gesture. | number | no | All | yes | +| maxDist | Maximum distance, expressed in points, that defines how far the finger is allowed to travel during a tap gesture. | number | no | All | yes | + +#### TapGestureHandler 事件数据 + +请到查看[基础 handler 类的通用事件数据](#gesture-handlers-通用事件数据)。以下是 TapGestureHandler 特有的事件数据。 + +`x` + +X coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the handler. + +`y` + +Y coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the handler. + +`absoluteX` + +X coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the window. It is recommended to use absoluteX instead of x in cases when the view attached to the handler can be transformed as an effect of the gesture. + +`absoluteY` + +Y coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the window. It is recommended to use absoluteY instead of y in cases when the view attached to the handler can be transformed as an effect of the gesture. + +## 遗留问题 + +- 目前只支持 Pan 和 Tag 手势 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-linear-gradient/blob/harmony/LICENSE) ,请自由地享受和参与开源。 -- Gitee From d24551ab2f6cb0e6a6d2b57a70c8813bf7a69778 Mon Sep 17 00:00:00 2001 From: Louis-C7 <972339262@qq.com> Date: Fri, 22 Dec 2023 11:58:34 +0800 Subject: [PATCH 3/3] =?UTF-8?q?[Issues:=20#I8QJAT]=20flash-list=E5=88=9D?= =?UTF-8?q?=E5=A7=8B=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/flash-list.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 zh-cn/flash-list.md diff --git a/zh-cn/flash-list.md b/zh-cn/flash-list.md new file mode 100644 index 000000000..57db2e978 --- /dev/null +++ b/zh-cn/flash-list.md @@ -0,0 +1 @@ +404 \ No newline at end of file -- Gitee