React Native 可触摸组件基础知识
在 React Native 中要实现可触摸的组件方式有三种,第一种方式就是使用TouchableHighlight
组件,第二种方式就是使用TouchableOpacity
组件,最后一种方式就是使用TouchableWithoutFeedback
组件。
TouchableHighlight
TouchableHighlight
组件主要是响应触摸的组件。当用户按下此组件时,此组件的亮度会变成高亮显示(由透明改为不透明),从而让用户感知到进行了交互。TouchableHighlight
假如不设置underlayColor
属性的话,underlayColor 的默认值为黑色。假如此组件的子元素也有样式的话,可能会发生颜色重叠导致一些问题。
TouchableHighlight
组件必须有一个子级(不能为零个或多个)。如果您希望有多个子组件,请将它们包装在视图中。具体实例如下:
import { StyleSheet, Text, TouchableHighlight, View } from "react-native";
import React, { useState } from "react";export default function TouchComponent() {const [count, setCount] = useState<number>(0);return (<View style={styles.container}><Text style={styles.mainTitle}>触摸组件实例</Text><TouchableHighlightactiveOpacity={0.4}underlayColor="#DDDDDD"onPress={() => setCount(count + 1)}><View style={styles.button}><Text>点击加1</Text></View></TouchableHighlight><Text>{count}</Text></View>);
}const styles = StyleSheet.create({container: {margin: 8,},mainTitle: {fontSize: 22,fontWeight: "bold",padding: 10,borderBottomWidth: 1,borderColor: "#e3e3e3",},button: {alignItems: "center",backgroundColor: "#DDDDDD",padding: 10,},
});
TouchableOpacity
TouchableOpacity
组件跟TouchableHighlight
的作用一致,此组件的透明度会发生改变(由不透明改为透明),从而能让用户感知到进行了交互。假如此组件的子元素也有样式的话,可能会发生颜色重叠导致一些问题。
通过将子组件包装在 Animated.View 中(添加到视图层次结构中)来控制不透明度。请注意,这可能会影响布局。具体的实例如下:
import {StyleSheet,Text,TouchableHighlight,TouchableOpacity,View,
} from "react-native";
import React, { useState } from "react";export default function TouchComponent() {const [count, setCount] = useState<number>(0);return (<View style={styles.container}><Text style={styles.mainTitle}>触摸组件实例</Text><TouchableOpacity onPress={() => setCount(count + 1)}><Text style={styles.button}>点击加1</Text></TouchableOpacity><Text>{count}</Text></View>);
}const styles = StyleSheet.create({container: {margin: 8,},mainTitle: {fontSize: 22,fontWeight: "bold",padding: 10,borderBottomWidth: 1,borderColor: "#e3e3e3",},button: {alignItems: "center",backgroundColor: "#DDDDDD",padding: 10,},
});
TouchableWithoutFeedback
TouchableWithoutFeedback
此组件是不会发生任何视觉反馈信息的。TouchableWithoutFeedback 仅支持一个孩子。如果您希望有多个子组件,请将它们包装在视图中。重要的是,TouchableWithoutFeedback 的工作原理是克隆其子级并向其应用响应者道具。因此,任何中间组件都需要通过这些 props 传递给底层的 React Native 组件。
import {StyleSheet,Text,TouchableHighlight,TouchableOpacity,TouchableWithoutFeedback,View,
} from "react-native";
import React, { useState } from "react";export default function TouchComponent() {const [count, setCount] = useState<number>(0);return (<View style={styles.container}><Text style={styles.mainTitle}>触摸组件实例</Text><TouchableWithoutFeedback onPress={() => setCount(count + 1)}><View style={styles.button}><Text>点击加1</Text></View></TouchableWithoutFeedback><Text>{count}</Text></View>);
}const styles = StyleSheet.create({container: {margin: 8,},mainTitle: {fontSize: 22,fontWeight: "bold",padding: 10,borderBottomWidth: 1,borderColor: "#e3e3e3",},button: {alignItems: "center",backgroundColor: "#DDDDDD",padding: 10,},
});
相关文章:
React Native 可触摸组件基础知识
在 React Native 中要实现可触摸的组件方式有三种,第一种方式就是使用TouchableHighlight组件,第二种方式就是使用TouchableOpacity组件,最后一种方式就是使用TouchableWithoutFeedback组件。 TouchableHighlight TouchableHighlight组件主…...

用户、权限和Vim编辑器
用户 用户分类 超级管理员:可以登录,拥有所有权限,用户Id为0 普通用户:可以登录,但只能操作家目录,用户Id为1000 程序用户:不能登录,用于管理程序,用户Id为1~999 添…...

git版本管理加合并笔记
目录 1.创建空文件夹,右键Bash here打开 2.打开链接,点击克隆下载,复制SSH链接 3.输入git SSH链接 回车 4.换成https在桌面上进行克隆仓库就正常了 5.去vscode里改东西 6.提交 7.创建dev分支 8.在dev里修改内容,提交&…...

Failed to load property source from location ‘classpath:/application.yml‘
项目场景: 今天到公司启动项目,突然发现项目起不起来了 问题描述 出现 Failed to load property source from location ‘classpath:/application.yml’ 错误 原因分析: 刚开始以为是 application.yml 中格式错误,但是发现同…...
Ajax复习
Ajax复习 一、简介 AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML。 一句话总结:无刷新通信。 二、 特点 优点 无刷新通信 允许你根据用户事件来更新部分页面内容 缺点 没有浏览历史,不能回退 存在跨域问题…...

里式替换原则(LSP)
目录 简介: 作用: 过程: 总结: 简介: 里式替换原则(Liskov Substitution Principle,简称LSP)的提出者是美国计算机科学家Barbara Liskov。Barbara Liskov是一位计算机科学家,麻省理工学院教授,也是美国第一个计算机…...

mysql------做主从复制,读写分离
1.为什么要做主从复制(主从复制的作用) 做数据的热备,作为后备数据库,主数据库服务器故障后,可切换到从数据库继续工作,避免数据丢失。 架构的扩展。业务量越来越大,I/O访问频率过高,单机无法满…...
Anaconda虚拟环境跨系统迁移
旧设备运行代码 conda activate name conda env export > environment.yml注意:如果当前路径已经有了 environment.yml 文件,conda 会重写这个文件 新设备运行代码 # 将environment.yml 拷贝到新设备中conda env create -f environment.yml...
第四章 IRIS 编程简介 - Macros
文章目录 第四章 IRIS 编程简介 - MacrosMacrosInclude Files这些代码元素如何协同工作 第四章 IRIS 编程简介 - Macros Macros ObjectScript 还支持定义替换的宏。定义可以是一个值、整行代码或(使用 ##continue 指令)多行。使用宏来确保一致性。例如…...
大厂考核重点:mysql索引面试题
很多同学面对Mysql索引相关的面试题都是死记硬背的,这肯定是不行的,也不容易记住,所以大家还是要循循渐进,从理解开始,慢慢掌握,当然对于想要准备面试题的同学,这几个问题是需要记住并理解的&am…...
MySQL使用binlog日志做数据恢复
MySQL的binlog日志是MySQL日志中非常重要的一种日志,记录了数据库所有的DML操作。通过binlog日志我们可以进行数据库的读写分离、数据增量备份以及服务器宕机时的数据恢复。 定期备份固然可以在服务器发生宕机的时候快速的恢复数据,但传统的全量备份不可…...

USB Type-C端口集成式ESD静电保护方案 安全低成本
Type-C端口是根据USB3.x和USB4协议传输数据的,很容易受到电气过载(EOS)和静电放电(ESD)事件的影响。由于Type-C支持随意热插拔功能,其内部高集成度的芯片,更容易受到人体静电放电的伤害和损坏。…...

Shiro学习总结
第一章 入门概述 1.概念 shiro是一个Java安全框架,可以完成:认证、授权、加密、会话管理、与web集成、缓存… 2.优势 ● 易于使用,构建简单 ● 功能全面 ● 灵活,可以在任何应用程序环境中工作,并且不需要依赖它们…...

AS中回退git历史版本并删除历史提交记录
当您想把某个版本后的代码删除,回滚到指定的版本。可以使用一下的方法。 一、打开AS中git历史提交窗口 二、选择需要回滚的版本选项,右键弹出菜单。选择Reset Current Branch to Here... 三、选择 Hard 选项 soft:将合并的更改应用到当前分支…...

线性代数的学习和整理5: 矩阵的加减乘除及其几何意义
目录 1 矩阵加法 1.1 矩阵加法的定义 1.2 加法的属性 1.2.1 只有同类型,相同n*m的矩阵才可以相加 1.2.1 矩阵加法的可交换律: 1.2.2 矩阵加法的可结合律: 1.3矩阵加法的几何意义 2 矩阵的减法 2.1 矩阵减法定义和原理基本同 矩阵的…...
sqlsugar 使用TNS连接oracle
在使用SqlSugar连接Oracle数据库时,可以通过TNS来实现连接。以下是一个示例代码,展示了如何使用TNS连接Oracle数据库: 首先,确保您已经安装了Oracle客户端,并正确配置了TNS的相关信息。 // 引入SqlSugar命名空间 usi…...
用python解压zip文件
因为某个需求,需要用python处理解压文件,这里记录下完成的代码,需要注意的是删除解压出来的文件夹时,很多博客都说直接用removedirs就行,实际我在py3.7上测试会提示“文件夹非空”,而且想想如果直接移除了根…...
代码随想录22| 216.组合总和III, 17.电话号码的字母组合
216.组合总和III 题目链接/文章讲解:链接地址 视频讲解:链接地址 代码思路:回溯三部曲: 1.确定函数参数:n,k,sum,startIndex; 2.结束条件,path k,并且如果sumn 结束递归 3.递归回溯逻辑。 class Solution…...

ITIL4—战略与指导
战略与指导 成功的服务提供,需要朝着商定的目标采取协调一致的行动。本节将探讨服务供应商战略的创建和管理,其目的是首先对战略的本质、范围,以及战略与指导的关系建立基本的理解,然后为与该战略一致的指导活动提供指导。 本节…...

【Spring】Spring循环依赖(超重要!!)
目录 什么是循环依赖问题 循环依赖具体是怎么解决的 具体的解决步骤: 通俗实例: 严谨的循环依赖解决图例 为什么使用的是三级缓存,二级缓存不够用吗? 什么是循环依赖问题 Spring的循环依赖是指在Bean之间存在相互依赖关…...

工业安全零事故的智能守护者:一体化AI智能安防平台
前言: 通过AI视觉技术,为船厂提供全面的安全监控解决方案,涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面,能够实现对应负责人反馈机制,并最终实现数据的统计报表。提升船厂…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...

dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块,用户不点击提交按钮,只要输入框失去焦点,就会提前提示验证码是否正确。 一,模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA(Direct Memory Access)直接存储器存取 DMA可以提供外设…...

【单片机期末】单片机系统设计
主要内容:系统状态机,系统时基,系统需求分析,系统构建,系统状态流图 一、题目要求 二、绘制系统状态流图 题目:根据上述描述绘制系统状态流图,注明状态转移条件及方向。 三、利用定时器产生时…...

2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来,实在找不到,希望有大佬教一下我。 还有就会议时间,我感觉不是图片时间,因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

MySQL 8.0 OCP 英文题库解析(十三)
Oracle 为庆祝 MySQL 30 周年,截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始,将英文题库免费公布出来,并进行解析,帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
rnn判断string中第一次出现a的下标
# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...

基于Java+MySQL实现(GUI)客户管理系统
客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息,对客户进行统一管理,可以把所有客户信息录入系统,进行维护和统计功能。可通过文件的方式保存相关录入数据,对…...