《React-Native系列》15、 RN之可触摸组件

最新推荐文章于 2022-10-17 22:00:52 发布
最新推荐文章于 2022-10-17 22:00:52 发布
阅读量3.9k 收藏 3
点赞数 1
分类专栏： ReactNative ReactNative实战系列 文章标签： ReactNative
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/codetomylaw/article/details/52206989
版权

今天，我们来看下ReactNative提供的可触摸组件。

分别为:TouchableHighlight、TouchableNativeFeedback、TouchableOpacity、TouchableWithoutFeedback。

TouchableWithoutFeedback控件是触摸点击不带反馈效果的，另外三个都是有反馈效果。这三个组件都继承了所有TouchableWithoutFeedback的属性。


1、TouchableWithoutFeedback

官网解释：

除非你有一个很好的理由，否则不要用这个组件。所有能够响应触屏操作的元素在触屏后都应该有一个视觉上的反馈（然而本组件没有任何视觉反馈）。这也是为什么一个"web"应用总是显得不够"原生"的主要原因之一。

注意：TouchableWithoutFeedback只支持一个子节点，如果你希望包含多个子组件，用一个View来包装它们。


属性
accessible bool 

delay

最低0.47元/天 解锁文章
coder_小刀
关注
专栏目录
react-native触摸组件TouchableOpacity
番薯大佬的专栏
05-17 4961
效果图代码示例import React, { Component } from 'react'; import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native'; type Props = {}; export default class TouchableOpa...
ReactNative 之 TouchableHighlight 组件简易使用 - RN
survivorsfyh的博客
03-24 355
因 ReactNative 的 Button 组件对 iOS 和 Android 的样式存在差异，所以改变套路尝试使用 TouchableHighlight 手势响应控件来替代按钮的思路，具体 code 如下： export function CallAdminEvent() { // 按钮点击事件 - 右导航栏 const { signIn } = useContext(AuthCo...
React-Native进阶_3.触摸高亮显示TouchableHighlight
编程之美
07-29 4374
在安卓原生ListView 点击 其中一个子视图时，会有高亮效果，这个效果在ReactNative 中通过TouchableHighlight 实现，具体使用如下
react native (RN) TouchableOpacity用法总结
涂涂
07-20 9595
本组件用于封装视图，使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低。这个过程并不会真正改变视图层级，大部分情况下很容易添加到应用中而不会带来一些奇怪的副作用。（译注：此组件与TouchableHighlight的区别在于并没有额外的颜色变化，更适于一般场景） 例子： <TouchableOpacity style={styles.touch} onPre...
react-native---rn中的修饰组件（TouchableHightlight、TouchableOpacity、TouchableNativeFeedback等）
Wbiokr的博客
01-25 4046
react-native中View组件这是单纯的视图容器，并不能响应交互变化，绑定事件，rn提供了TouchableOpacity等封装组件以正确响应触摸操作。 TouchableWithoutFeedback：单纯的用户点击触摸响应组件，不会改变视图UI，仅绑定press、longPress等事件； TouchableOpacity：响应用户触摸操作，继承TouchableWithoutFe
RN基础组件4 —— Button 和 TouchableOpacity 和 Pressable
hdj0511的博客
10-17 1093
RN基础组件4 —— Button 和 TouchableOpacity 和 Pressable
react-native-event-listeners：用于react或react-native的全局事件侦听器扩展
02-05
使用全局事件侦听器时，您不必将触摸事件通过组件树传递到其他组件中，也可以轻松绕开Redux架构。 安装 npm install --save react-native-event-listeners 要么 yarn add react-native-event-listeners 使用范例 ...
react-native-sketch-canvas:一个通过在iOS和Android上触摸来进行绘图的React Native组件
04-28
一个通过在iOS和Android上触摸来进行绘图的React Native组件。 特征 支持iOS和Android 绘画时笔触的厚度和颜色是可变的。 可以一一撤消笔画。 可以将路径数据序列化为JSON。 因此，它可以同步其他设备或其他人并...
react-native-premier-league:用RN开发的非官方英超联赛浏览器
06-15
- React Native中的组件是可复用的代码块，类似于UI的小型独立部分，如导航栏、比分显示等。 - 使用JSX语法（JavaScript与XML的融合）来编写组件，可以方便地声明式地定义UI结构。 - 组件之间通过props传递数据，...
react-native-user-inactivity:一个简单的组件，当用户处于非活动状态时（例如，在X毫秒内未触摸App界面时）发出警报
05-05
React Native组件，用于通知用户是否处于活动状态（即，未触摸应用程序表面的时间超过一定的毫秒数）。 从1.1.0版开始，当键盘出现或消失时， react-native-user-inactivity也将重置计时器。 如果要避免这种行为，...
React Native-15：状态栏组件-StatusBar
臧小川的博客
11-12 427
import React, { useState } from 'react' import { StyleSheet, Text, View, TouchableOpacity, StatusBar // 状态栏组件 } from 'react-native' const App = () => { const [DataModel, SetDataModel] = useState({ // 定义数据模型 hidden: false,
Navicat 15下载
白豆五的博客
04-05 3882
此Navicat非彼Navicat； 一、下载软件； 官方下载地址：https://www.navicat.com.cn/navicat-15-highlights/ 二、安装软件； 双击navicat150_premium_cs_x64安装包，然后进入安装界面：
React-native学习-15-React Native State(状态)使用详解(转)
Green
09-01 513
目前的Component仍然在react框架中，也就是说React Native使用的Component是react框架中的组件，而Component有两大数据管理核心State和Props。也就是说即使你仅仅想用React Native开发APP，你也需要去了解React的相关知识，比如Component、State和Props，本文主要介绍State的使用。 React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
react-native系列(15)导航篇：底部导航TabNavigator参数及使用详解
@黄小泽的个人博客
03-09 3275
本篇主要介绍的是TabNavigator，假设你已经对它的用法已经有了基本的认识，或重新去官网看一下 官网地址：https://reactnavigation.org/zh-Hans/ 底部导航TabNavigator的效果类似于微信，效果图： TabNavigator生成的底部导航的结构，它包括4部分： 选项卡栏 选项卡 图标 标签文本 createBottomTabNav...
RN TouchableOpacity点击事件不响应原因详解
https://www.xiaohongshu.com/user/profile/5f3543150000000001002b2e
12-20 3053
问题 首先是整个页面布局如上： 在实际开发中发现 如下红框中的所有区域点击事件均没有效果，不会触发 问题定位 RN基本触摸组件尝试 TouchableHighlight、TouchableNativeFeedback、 TouchableOpacity 、 TouchableWithoutFeedback onPressIn：点击开始； onPressOut：点击结束或者离开； onPress：单击事件回调； onLongPress：长按事件回调。 以上触摸事件无论怎么尝试在红框区域
[深入剖析React Native]React Native组件之Touchable*
Geek马走日
09-09 2231
Touchable＊系列组件封装了触摸点击的相关事件，比如：触摸、点击、长按、反馈等，官方提供Touchable＊系列组件包括四种： TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback 其中，TouchableWithoutFeedback的触摸点击不带反馈效果，其他三个都有反馈效
react native手势触摸
hisans1216的博客
03-22 2289
简介 在诸多移动应用中，需要有许多手势识别的使用场景。比如当涂抹、上滑、下滑、侧滑、拖动等，都涉及到方方面面的功能交互。而在react native中，就有提供处理这些手势的API，下面就来一一介绍相关的响应方法。 Touchable组件 rn也有提供一些比较基础的触摸组件，比如Touchable组件 TouchableWithoutFeedback：这个组件在点击后没有任何的视觉反馈，并且只支持一个子节点（不能为0 && 不能>1），并且该组件不支持加style样式。 <T
React Native 之 Touchable 介绍与使用
黑森林工作室
11-04 753
前言 学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢 文章第一版出自简书，如果出现图片或页面显示问题，烦请转至 简书 查看 也希望喜欢的朋友可以点赞，谢谢 View 中的触摸属性 与
ReactNative进阶（十九）：React Native 按钮 Touchable 系列组件使用详解
IT全栈 华强工作室
05-10 1969
文章目录前言TouchableWithoutFeedback使用详解TouchableHighlight使用详解TouchableOpacity使用详解TouchableNativeFeedback使用详解 前言 在做RN App开发过程中离不了用户交互，在React Native中没有专门的按钮组件。 为了让视图能够响应用户的点击事件，我们需要借助Touchablexxx组件，来包裹我们的视图。为什么说是Touchablexxx呢，因为它不只是一个组件，而是一组组件，以下四个组件都可以用来包裹视图来响应
React Native基于antd-mobile-rn 3.0.0-8版本组件库介绍
资源摘要信息:"ant-design-mobile-rn-3.0.0-8.zip是一个基于React Native框架开发的UI组件库，版本为3.0.0-8。React Native是由Facebook开发的一个开源框架，允许开发者使用React来构建跨平台的移动应用。Ant Design...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值