React Native 之 处理触摸事件(八)

news/2024/7/20 17:26:00/文章来源:https://blog.csdn.net/qq_35876316/article/details/139104338

React Native 提供了可以处理常见触摸手势(例如点击或滑动)的组件, 以及可用于识别更复杂的手势的完整的手势响应系统。

Button是一个简单的跨平台的按钮组件。下面是一个最简示例:

<ButtononPress={() => {Alert.alert('你点击了按钮!');}}title="点我!"
/>

Touchable 系列组件

使用哪种组件,取决于你希望给用户什么样的视觉反馈:

TouchableHighlight:制作按钮或者链接,注意此组件的背景会在用户手指按下时变暗。

在 Android 上可以使用TouchableNativeFeedback:它会在用户手指按下时形成类似墨水涟漪的视觉效果。

TouchableOpacity:会在用户手指按下时降低按钮的透明度,而不会改变背景的颜色。

TouchableWithoutFeedback:在处理点击事件的同时不显示任何视觉反馈使用。

某些场景中你可能需要检测用户是否进行了长按操作。可以在上面列出的任意组件中使用onLongPress属性来实现。


上面几个API使用代码栗子:

import React, { Component } from 'react';
import { Alert, Platform, StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View } from 'react-native';export default class Touchables extends Component {_onPressButton() {Alert.alert('You tapped the button!')}_onLongPressButton() {Alert.alert('You long-pressed the button!')}render() {return (<View style={styles.container}><TouchableHighlight onPress={this._onPressButton} underlayColor="white"><View style={styles.button}><Text style={styles.buttonText}>TouchableHighlight</Text></View></TouchableHighlight><TouchableOpacity onPress={this._onPressButton}><View style={styles.button}><Text style={styles.buttonText}>TouchableOpacity</Text></View></TouchableOpacity><TouchableNativeFeedbackonPress={this._onPressButton}background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}><View style={styles.button}><Text style={styles.buttonText}>TouchableNativeFeedback</Text></View></TouchableNativeFeedback><TouchableWithoutFeedbackonPress={this._onPressButton}><View style={styles.button}><Text style={styles.buttonText}>TouchableWithoutFeedback</Text></View></TouchableWithoutFeedback><TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton} underlayColor="white"><View style={styles.button}><Text style={styles.buttonText}>Touchable with Long Press</Text></View></TouchableHighlight></View>);}
}const styles = StyleSheet.create({container: {paddingTop: 60,alignItems: 'center'},button: {marginBottom: 30,width: 260,alignItems: 'center',backgroundColor: '#2196F3'},buttonText: {textAlign: 'center',padding: 20,color: 'white'}
})

处理在列表中上下滑动,或是在视图上左右滑动

ScrollView是一个通用的可滚动的容器,你可以在其中放入多个组件和视图,而且这些组件并不需要是同类型的。ScrollView 不仅可以垂直滚动,还能水平滚动(通过horizontal属性来设置)。

代码栗子:

import React from 'react';
import { Image, ScrollView, Text } from 'react-native';const logo = {uri: 'https://reactnative.dev/img/tiny_logo.png',width: 64,height: 64
};export default App = () => (<ScrollView><Text style={{ fontSize: 96 }}>Scroll me plz</Text><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Text style={{ fontSize: 96 }}>If you like</Text><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Text style={{ fontSize: 96 }}>Scrolling down</Text><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Text style={{ fontSize: 96 }}>What's the best</Text><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Text style={{ fontSize: 96 }}>Framework around?</Text><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Text style={{ fontSize: 80 }}>React Native</Text></ScrollView>
);

使用长列表

React Native 提供了几个适用于展示长列表数据的组件,一般而言会选用FlatList或是SectionList。

import React from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';const styles = StyleSheet.create({container: {flex: 1,paddingTop: 22},item: {padding: 10,fontSize: 18,height: 44,},
});const FlatListBasics = () => {return (<View style={styles.container}><FlatListdata={[{key: 'Devin'},{key: 'Dan'},{key: 'Dominic'},{key: 'Jackson'},{key: 'James'},{key: 'Joel'},{key: 'John'},{key: 'Jillian'},{key: 'Jimmy'},{key: 'Julie'},]}renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}/></View>);
}SectionList使用:export default FlatListBasics;
import React from 'react';
import { SectionList, StyleSheet, Text, View } from 'react-native';const styles = StyleSheet.create({container: {flex: 1,paddingTop: 22},sectionHeader: {paddingTop: 2,paddingLeft: 10,paddingRight: 10,paddingBottom: 2,fontSize: 14,fontWeight: 'bold',backgroundColor: 'rgba(247,247,247,1.0)',},item: {padding: 10,fontSize: 18,height: 44,},
})const SectionListBasics = () => {return (<View style={styles.container}><SectionListsections={[{title: 'D', data: ['Devin', 'Dan', 'Dominic']},{title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},]}renderItem={({item}) => <Text style={styles.item}>{item}</Text>}renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}keyExtractor={(item, index) => index}/></View>);
}export default SectionListBasics;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1054665.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kafka原生API使用Java代码-生产者-异步发送消息回调

文章目录 1、异步发送消息&回调1.1、pom.xml1.2、KafkaProducer1.java 1、异步发送消息&回调 回调就是接收kafka的响应 1.1、pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0&q…

Facebook开户 | 如何检查公共主页的状态

想要了解你的Facebook公共主页的状态吗&#xff1f; Facebook公共主页是让广告主与粉丝互动、传播信息的绝佳平台&#xff0c;但是大家知道如何检查并维护自己的主页状态吗&#xff1f;别担心&#xff0c;Facebook提供了一系列简单易用的工具来帮助大家实现这一目标。 *Page Q…

Vue——事件修饰符

文章目录 前言阻止默认事件 prevent阻止事件冒泡 stop 前言 在官方文档中对于事件修饰符有一个很好的说明&#xff0c;本篇文章主要记录验证测试的案例。 官方文档 事件修饰符 阻止默认事件 prevent 在js原生的语言中&#xff0c;可以根据标签本身的事件对象进行阻止默认事件…

【全开源】场馆预定系统源码(ThinkPHP+FastAdmin+UniApp)

一款基于ThinkPHPFastAdminUniApp开发的多场馆场地预定小程序&#xff0c;提供运动场馆运营解决方案&#xff0c;适用于体育馆、羽毛球馆、兵乒球馆、篮球馆、网球馆等场馆。 场馆预定系统源码&#xff1a;打造高效便捷的预定体验 一、引言&#xff1a;数字化预定时代的来临 …

Node性能如何进行监控以及优化?

一、 是什么 Node作为一门服务端语言&#xff0c;性能方面尤为重要&#xff0c;其衡量指标一般有如下&#xff1a; CPU内存I/O网络 CPU 主要分成了两部分&#xff1a; CPU负载&#xff1a;在某个时间段内&#xff0c;占用以及等待CPU的进程总数CPU使用率&#xff1a;CPU时…

PowerPivot-跨表取值

在PowerPivot中&#xff0c;跨表取值通常涉及创建关系和使用DAX&#xff08;数据分析表达式&#xff09;函数。 以下是一些基本步骤和常用的DAX函数&#xff0c;帮助你在PowerPivot中实现跨表取值&#xff1a; 步骤1&#xff1a;创建关系 加载数据&#xff1a;确保你已将需要…

02--大数据Hadoop集群实战

前言&#xff1a; 前面整理了hadoop概念内容&#xff0c;写了一些概念和本地部署和伪分布式两种&#xff0c;比较偏向概念或实验&#xff0c;今天来整理一下在项目中实际使用的一些知识点。 1、基础概念 1.1、完全分布式 Hadoop是一个开源的分布式存储和计算框架&#xff0…

【Linux】centos7编写C语言程序,补充:使用yum安装软件包组

确保已安装gcc编译器 C语言程序&#xff0c;一般使用gcc进行编译&#xff0c;需确保已安装gcc。 若没有&#xff0c;可以使用yum安装gcc&#xff08;版本4.8.5&#xff09;&#xff0c;也可以使用SCL源安装gcc&#xff08;例如&#xff1a;版本9.3&#xff09;。 安装gcc&am…

markdown语法保存

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

K8s 小白入门|从电影配乐谈起,聊聊容器编排和 K8s

来听听音乐 电影&#xff0c;是我们生活中的重要调味剂。 配乐&#xff0c;是电影中不可或缺的一部分。 有的时候&#xff0c;配乐可以跟剧情共振&#xff0c;让你按捺不住自己的情绪&#xff0c;或眼含热泪、或慷慨激昂、或人仰马翻、或怅然若失&#xff1b; 有的时候&…

基础8 探索JAVA图形编程桌面:邮件操作组件详解

在一个静谧的午后&#xff0c;卧龙和凤雏相邀来到一家古朴典雅的茶馆。茶馆内环境清幽&#xff0c;袅袅的茶香与悠扬的古筝声交织在一起&#xff0c;营造出一种宁静而祥和的氛围。 卧龙和凤雏坐在茶馆的一角&#xff0c;面前的桌子上摆放着一套精致的茶具。茶香四溢&#xff0c…

开源DMS文档管理系统 Nuxeo Vs Alfresco对比及 API 使用概述

1. 文档管理系统是什么 文档管理系统&#xff08;DMS&#xff1a;Document Management System&#xff09;是一种软件系统&#xff0c;用于组织、存储、检索和管理电子文档和文件。这些文件可以是各种格式的电子文档&#xff0c;如文本文档、电子表格、图像、音频或视频文件等…

成都爱尔眼科医院《中、欧国际近视手术大数据白皮书2.0》解读会圆满举行

2024年5月12日&#xff0c;爱尔眼科联合中国健康促进基金会健康传播与促进专项基金、新华社新媒体中心与中南大学爱尔眼科研究院、爱尔数字眼科研究所重磅发布《中、欧国际近视手术大数据白皮书2.0》。这是继2021、2022年在国内相继发布《国人近视手术白皮书》、《2022中、欧近…

GVM: Golang多版本管理利器

本文介绍了 Go Version Manager 的功能和使用方法&#xff0c;介绍了如何通过 GVM 在系统上安装和管理多个 Go 语言版本。原文: GVM: Go Version Manager, for Golang manage multiple versions Go 版本管理器&#xff08;GVM&#xff0c;Go Version Manager&#xff09;是一款…

微服务村庄的守护神:Eureka Server的奇幻之旅

在数字化的浪潮中&#xff0c;微服务架构成为了构建高效系统的新宠。《微服务村庄的守护神&#xff1a;Eureka Server的奇幻之旅》带您走进一个由Eureka Server守护的微服务世界&#xff01; 文章目录 Spring Cloud Eureka 详解1. 引言微服务架构概述服务发现的重要性Spring Cl…

二叉树介绍及堆

文章目录 树 概念及结构 二叉树 概念及结构 特殊的二叉树 完全二叉树 满二叉树 性质 储存 顺序存储 链式储存 堆 概念及结构 小堆 大堆 建堆 向上调整建堆 向下调整建堆 TOPK问题 法一&#xff1a; 法二&#xff1a; 树 概念及结构 树是一种非线性的数据…

idea configuration 配置 方便本地启动环境切换

idea 再项目启动的时候避免切换环境导致上线的时候出现环境配置问题 可以再idea 的 configuration 中配置项目的 vm options 虚拟机的内容占用 -Xmx256m -Xms256m -Xmn100m -Xss256k program arguments properties 文件中需要修改的配置参数 active profiles 指定启动的本…

SOLIDWORKS正版价格多少钱

SOLIDWORKS作为目前应用较为广泛的3D CAD软件之一&#xff0c;具有强大的功能和实用性&#xff0c;它为各类工程设计提供综合解决方案。但是&#xff0c;正版SOLIDWORKS价格是个不可忽视的问题。那SOLIDWORKS的正版价格究竟如何呢&#xff1f;又是受什么因素影响&#xff1f; 先…

如何降本增效获得目标客户?AI企业使用联盟营销这个方法就对了!

AI工具市场正在迅速发展&#xff0c;现仍有不少企业陆续涌出&#xff0c;那么如何让你的工具受到目标群体的关注呢&#xff1f;这相比是AI工具营销人员一直在思考的问题。 为什么AI企业难以获客呢&#xff1f; 即使这个市场正蓬勃发展&#xff0c;也无法保证营销就能轻易成功…

宁盾身份域管与天翼云电脑完成兼容互认证

近日&#xff0c;宁盾身份域管与天翼云电脑完成兼容互认证&#xff01;这是继中兴、深信服、升腾威讯云桌面/云电脑后&#xff0c;宁盾对接的第4个国产云桌面品牌。企业在引入国产云桌面时&#xff0c;同时会考虑微软AD目录的替代方案。宁盾国产化身份域管对接天翼云电脑从终端…