@nativescript-community/gesturehandler

声明式 API，将平台原生触摸和手势系统暴露给 NativeScript。

安装

从您的项目的根目录运行以下命令

ns 插件添加 @nativescript-community/gesturehandler

API

当您的应用启动时，我们需要做一些连接，因此打开 app.ts 并在创建任何 View/App/Frame 之前添加此内容

TypeScript

import { install } from '@nativescript-community/gesturehandler';
install();

您可以使用类似以下方式创建手势处理程序

import { GestureHandlerTouchEvent, GestureHandlerStateEvent, GestureStateEventData, GestureTouchEventData, HandlerType, Manager } from '@nativescript-community/gesturehandler';

function onGestureTouch(args: GestureTouchEventData) {
    const { state, extraData, view } = args.data;
    view.translateX = extraData.translationX;
    view.translateY = extraData.translationY;
}
function onGestureState(args: GestureStateEventData) {
    const { state, prevState, extraData, view } = args.data;
    console.log('onGestureState', state, prevState, view, extraData);
}
const manager = Manager.getInstance();
const gestureHandler = manager.createGestureHandler(HandlerType.PAN, 10, {
    shouldCancelWhenOutside: false
});
gestureHandler.on(GestureHandlerTouchEvent, onGestureTouch, this);
gestureHandler.on(GestureHandlerStateEvent, onGestureState, this);
gestureHandler.attachToView(view);

目前，您必须记住将 gestureHandler 存储在某个地方，否则手势在 iOS 上将不起作用（原生对象正在释放）。这将在未来的版本中得到修复。

现在关于 API。所有与 React 对应的手势都存在，具有相同的选项和相同的 extraData 事件。

GestureRootView

为了让手势正常工作，我们需要一个 root 视图，该视图知道如何处理手势。如果您使用 Page（因此 Frame），则无需执行任何操作。如果您不这样做（抽屉根视图、模态框等），则可以将您的视图包装在 GestureRootView 中，该视图继承自 GridLayout

重写 Nativescript 手势

此插件还可以完全重写 N 个手势。这将使对手势的控制更加精细，特别是将允许正确处理同时手势，如 tap 和 longpress。

要实现这一点

致谢

这是 react-native-gesturehandler 的移植。源代码基于 Krzysztof Magiera 的源代码。不要犹豫，去感谢他为他的工作！

示例

基本
- 一个基本示例显示重写 N 个手势在模态框中也有效

演示和开发

仓库设置

该仓库使用子模块。如果您没有使用 --recursive 进行克隆，则需要调用

git submodule update --init

用于安装和链接依赖项的包管理器必须是 pnpm 或 yarn。 npm 不会工作。

要开发和测试：如果您使用 yarn，则运行 yarn；如果您使用 pnpm，则运行 pnpm i

交互式菜单

要启动交互式菜单，运行 npm start（或 yarn start 或 pnpm start）。这将列出所有常用脚本。

构建

npm run build.all

警告：似乎 yarn build.all 不会始终工作（在 node_modules/.bin 中找不到二进制文件），这就是为什么文档明确使用 npm run

演示

npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example

贡献

更新仓库

您可以轻松更新仓库文件。

首先更新子模块

npm run update

然后提交更改然后更新常用文件

npm run sync

然后您可以运行 yarn|pnpm，如果有任何更改，则提交更改文件

更新 README

npm run readme

更新文档

npm run doc

发布

发布完全由 lerna 处理（您可以添加 -- --bump major 来强制发布主要版本）只需简单运行

npm run publish

修改子模块

该仓库使用 https:// 子模块，这意味着您无法直接向子模块推送。一个简单的解决方案是修改 ~/.gitconfig 并添加

[url "ssh://[email protected]/"]
	pushInsteadOf = https://github.com/

问题

如果您有任何问题/问题/评论，请随时在 NativeScript 社区 Discord 中创建问题或开始对话。