当前位置: 首页 > news >正文

react-native-gesture-handler 手势的使用

要在React Native项目中使用react-native-gesture-handler,可以按照以下步骤进行设置:

1、首先,在你的React Native项目中安装react-native-gesture-handler。可以使用npm或者yarn命令来安装:

npm install react-native-gesture-handler

或者

yarn add react-native-gesture-handler

2、安装完成后,需要链接react-native-gesture-handler到你的原生代码。运行以下命令:

npx react-native link react-native-gesture-handler

3、接下来,在你的项目中导入GestureHandler库。在你的入口文件(通常是App.js或index.js)中添加以下内容:

import 'react-native-gesture-handler';

4、然后,你需要在你的原生代码中进行一些额外的配置。具体的配置取决于你使用的平台。

  • 对于Android平台,在android/app/src/main/java/com/<your-app>/MainApplication.java文件中添加以下导入语句:
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

然后,修改getMainComponentName方法如下:

@Override
protected ReactActivityDelegate createReactActivityDelegate() {return new ReactActivityDelegate(this, getMainComponentName()) {@Overrideprotected ReactRootView createRootView() {return new RNGestureHandlerEnabledRootView(MainApplication.this);}};
}
  • 对于iOS平台,如果您使用的是CocoaPods进行包管理,可以通过在项目的Podfile中添加以下代码来简化这个过程:
pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'

然后,执行 pod install。

6、接下来,你可以在你的React Native组件中使用react-native-gesture-handler提供的手势组件了。例如,你可以使用TapGestureHandlerPanGestureHandler来处理点击和拖动手势。

import { useState } from 'react'
import { Text, View } from 'react-native'
import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";export default function registerScreens() {const [a, setA] = useState("1"),[b, setB] = useState("2"),[c, setC] = useState("3");const gesture = Gesture.Pan().onBegin(() => {setA("A");}).onUpdate(({ translationX, translationY }) => {setB("B");}).onEnd(({ velocityX, velocityY }) => {setC("C");});return (<GestureHandlerRootView><GestureDetector gesture={gesture}><View><Text>{ a }</Text><Text>{ b }</Text><Text>{ c }</Text></View></GestureDetector></GestureHandlerRootView>)
}

以上是使用react-native-gesture-handler的基本步骤。你可以根据文档进一步了解各种手势组件和属性的使用方式。

http://www.lryc.cn/news/138280.html

相关文章:

  • 【SA8295P 源码分析】系列文章链接汇总 - 持续更新中
  • springBoot防止重复提交
  • lvs-dr模式+keepalived
  • [C++]笔记-知识点总结
  • 1.RabbitMQ介绍
  • 软考高级系统架构设计师系列论文七十三:论中间件在SIM卡应用开发中的作用
  • 【Java架构-包管理工具】-Maven进阶(二)
  • 『C语言入门』分支和循环语句
  • 【给自己挖个坑】三维视频重建(NSR技术)-KIRI Engine
  • Chrome历史版本下载和Selenium驱动版本下载
  • 联合注入步骤
  • 后端项目开发:整合redis缓存
  • 美国访问学者签证好办吗?
  • Linux之基础IO文件系统讲解
  • Django主要特点
  • element-ui中的el-table合并单元格
  • 自组织地图 (SOM) — 介绍、解释和实现
  • Arduino程序设计(四)按键消抖+按键计数
  • Scrum Guide Chinese Simplified.pdf
  • Module not found: Error: Can‘t resolve ‘vue-pdf‘ in ‘xxx‘
  • ELK之LogStash介绍及安装配置
  • docker学习(1)
  • UE5 Niagara基础知识讲解
  • 缓存穿透、缓存击穿和缓存雪崩
  • 自动化编排工具Terraform介绍(一)
  • zhm_real/MotionPlanning运动规划库中A*算法源码详细解读
  • SpringMVC中Controller层获取前端请求参数的几种方式
  • 记Flask-Migrate迁移数据库失败的两个Bug——详解循环导入问题
  • 在线求助。。npm i 报错,连公司内部网,无法连外网
  • TCP/UDP/IP协议简介