React Native Text组件之点击和长按事件

最新推荐文章于 2025-11-09 01:01:59 发布
原创 最新推荐文章于 2025-11-09 01:01:59 发布 · 1.1w 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react native #点击和长按事件

本文介绍了Text组件中的两种交互事件：onPress（点击事件）和onLongPress（长按事件），并提供了具体的代码实现示例。

Text组件的点击事件是onPress，长按事件是onLongPress

下面是对应的代码实现

1：onPress事件


对应的效果


2：onLongPress事件


长按事件效果


参考源码

react-native入门之处理触摸事件
蛐蛐的博客
04-05 885
文档：https://reactnative.cn/docs/handling-touches 1.简介 移动应用上的用户交互基本靠“摸”。当然，“摸”也是有各种姿势的：在一个按钮上点击，在一个列表上滑动，或是在一个地图上缩放。 React Native 提供了可以处理常见触摸手势（例如点击或滑动）的组件， 以及可用于识别更复杂的手势的完整的手势响应系统。 2.按钮 Button是一个简单的跨平台的按钮组件。一般用于处理点击事件 <Button onPress...
React Native组件篇（一） — Text组件
2301_79099480的博客
04-20 1037
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽有帮助，可以扫码获取！！（备注：前端）**
react-native-swipe-gestures-plus:4向滑动手势，长按事件和长按事件可进行本机React
03-29
React本机滑动手势加 React Native组件可通过Press和Long Press Events处理上，下，左，右方向的轻扫手势。 安装 npm i react-native-swipe-gestures-plus 执照 这是的更新版本。 原始作者 ， 用法 'use strict' ; import React , { Component } from 'react' ; import { View , Text } from 'react-native' ; import GestureRecognizer , { swipeDirections } from 'react-native-swipe-gestures-plus' ; export default function App ( ) { const [ myText , setMyText ] = Re
use-long-press:React钩子，用于检测单击（或点击）并按住事件
05-27
React长按挂钩 :backhand_index_pointing_down: React钩子，用于检测单击（或点击）并按住事件。 易于使用 高度可定制的选项 经过全面测试 安装 yarn add use-long-press 或者 npm install --save use-long-press 基本用法 import React from 'react' ; import { useLongPress } from 'use-long-press' ; const Example = ( ) => { const bind = useLongPress ( ( ) => { console . log ( 'Long pressed!' ) ; } ) ; return < button { ... bind } > Press me < / button > ; } ; 现场例子 进阶用法
告别编辑卡顿：ReactPage移动端手势操作全解析
最新发布
gitblog_01107的博客
11-09 432
你是否遇到过在手机上编辑内容时滑动卡顿、缩放失灵的情况？作为基于React和TypeScript构建的下一代内容编辑器，ReactPage（项目路径）通过精心设计的手势系统，让移动端编辑体验丝滑流畅。本文将带你深入了解其滑动、缩放与长按功能的实现原理，以及如何为你的项目打造专业级触摸交互。 ## 为什么移动手势对编辑器至关重要 在移动设备上编辑内容时，传统编辑器常面临两大痛点：一是触摸事件响应
React Native点击
新世界后半段
10-09 1888
React Native 中的点击事件React Native中Text组件有点击事件其他还没有碰见自带点击事件的， 一般用Touchable..来做点击 TouchableHighlight 点击会有点击背景颜色 TouchableOpacity 点击会有一个渐变透明的效果 TouchableWithoutFeedback 毫无效果和Text的onPress一样 上面三个组件中的点击方法有四
React Native 触摸事件处理详解
jw_45840的专栏
08-27 8483
React Native 触摸事件处理详解 时间 2016-06-19 20:11:15  Jlog 原文  http://www.race604.com/react-native-touch-event/ 主题 React Native 触控是移动设备的核心功能，也移动应用交互的基础，Android 和 iOS 各自都有完善的触摸事件处理机制。React Nati
React Native实现4向滑动与长按事件处理
react-native-swipe-gestures-plus是一个专门用于处理4向滑动手势以及长按事件的库，它扩展了React Native的事件处理能力，使其能够更加方便地捕捉和响应用户的滑动和长按操作。 安装react-native-swipe-gestures-...
React Native悬浮按钮组件的示例代码
08-27
`ActionButton`内部还可以嵌套`ActionButton.Item`，每个`Item`代表一个子按钮，同样可以设置大小、颜色、标题和点击事件。例如： ```jsx buttonColor='#9b59b6' title="New Task" onPress={() => console.log...
React Native组件（四）TextInput组件解析
Android进阶三部曲 - 刘望舒
08-21 4294
TextInput组件和Text组件类似，内部都没有使用FlexBox布局，不同的是TextInput组件支持文字的输入，因为支持文字输入， TextInput组件要比Text组件多了一些属性和方法。TextInput组件支持Text组件所有的Style属性，而TextInput组件本身是没有特有的Style属性的。
为你的reactnative应用程序实现一个气泡菜单效果
08-10
React Native是由Facebook开发的开源框架，它允许使用JavaScript和React来构建原生移动应用。通过JSX语法，开发者可以方便地创建组件，并将它们组合成复杂的用户界面。 为了实现气泡菜单，我们首先需要安装相关的...
Javascript React 手机上的 右键点击（长按）事件
一朵小呆毛
04-05 2488
前戏： 开会不准玩电脑，只能玩手机，玩儿了阵子扫雷，决定自己做一个网页版。三下五除二做完之后，猛然发现，手机没有右键。。。。。。没有右键怎么插小红旗？！ 想起来app上是用长按来插小红旗的，于是开始了长达几个小时的纠结。 最开始的时候，格子接受左键和右键点击不同的event。 onClick用来监听左键点击，onContextMenu用来监听右键点击，可以愉快的玩耍，么得问题的。 import ...
react事件
懒猫慵阳的博客
02-07 2064
一、事件处理函数的使用 鼠标事件： onClick onContextMenu onDoubleClick onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp onDrop onDrag onDragEnd onDragEnter onDragExit
react native 图片长按保存
10-30 1517
``` import React, {Component} from 'react'; import { Platform, CameraRoll, TouchableWithoutFeedback, } from 'react-native'; impo...
ReactNative进阶（二十二）：点击事件.bind(this)引发的思考
IT全栈 华强工作室
05-11 1787
文章目录前言React中bind方法的选择 前言 在React或React-native的点击事件中，会经常用到bind(this)。比如说一个简单的React-native点击组件： export default class AwesomeProject extends Component { constructor(props){ super(props); this.state = { } } handleClick () { console.log('
native react 二级菜单_react-native – 在React Native中长按打开上下文菜单
weixin_35663032的博客
12-29 443
所有可触摸组件(TouchableWithoutFeedback,TouchableOpacity等)都有一个名为onLongPress的属性.您可以使用此prop来收听长按,然后显示上下文菜单.为了消除代码混乱并进行大量复制粘贴,您可以将上下文菜单分离为不同的组件,并在长按时将其调用.您还可以使用ActionSheet库来显示所需的选项. React native有一个名为ActionSheet...
React Native之触摸事件(Touchable系列和onLongPress)
weixin_44519342的博客
03-18 643
React Native之触摸事件(Touchable系列和onLongPress)
React Native（第二节点击事件）
热门推荐
liu8021203的专栏
03-08 2万+
React Native的提供了四种点击事件 TouchableHighlightTouchableNativeFeedbackTouchableOpacityTouchableWithoutFeedback 其实可以将点击事件当成一个特殊的UI组件， 将这个特殊的UI组件包在UI组件的外面，就可以使指定的UI组件有了点击响应能力。 TouchableHighlight
React Native 的手势和触摸事件
读心悦
07-30 867
ReactNative单独提供了一套统一的处理方法，能够方便处理界面中组件的触摸事件和用户手势等等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值