React Native 文本输入基础知识

在 React Native 中提供了一个文本输入组件TextInput。此组件主要是监听键盘输入事件,并把对应的输入值显示在组件中,此组件还提供了很多功能配置参数,例如自动更正、自动大写、占位符文本和不同的键盘类型(例如数字键盘)。

我们首先来编写一个简单的实例,使用onChangeText事件监听用户的输入:

export default function InputText() {const [name, setName] = useState<string>("");const [age, setAge] = useState<string>("");return (<View style={styles.container}><Text style={styles.mainTitle}>InputText 组件实例</Text><View style={styles.formItem}><Text style={styles.labelTitle}>姓名:</Text><TextInputstyle={styles.formInput}placeholder="请输入姓名"value={name}onChangeText={(value) => setName(value)}></TextInput></View><View style={styles.formItem}><Text style={styles.labelTitle}>年龄:</Text><TextInputstyle={styles.formInput}keyboardType="numeric"placeholder="请输入年龄"value={age}onChangeText={(value) => setAge(value)}></TextInput></View><View style={styles.infoContainer}><Text>姓名:{name}</Text><Text>年龄:{age}</Text></View></View>);
}const styles = StyleSheet.create({container: {margin: 8,},mainTitle: {fontSize: 22,fontWeight: "bold",padding: 10,borderBottomWidth: 1,borderColor: "#e3e3e3",},input: {borderWidth: 1,borderRadius: 4,borderColor: "#e3e3e3",marginVertical: 8,padding: 8,},formItem: {flexDirection: "row",justifyContent: "flex-start",alignItems: "center",rowGap: 8,columnGap: 8,marginVertical: 12,},labelTitle: {fontSize: 16,},formInput: {borderWidth: 1,borderRadius: 6,paddingHorizontal: 10,paddingVertical: 6,flex: 1,},infoContainer: {flexDirection: "row",marginVertical: 8,justifyContent: "center",alignItems: "center",rowGap: 8,columnGap: 8,},
});

TextInput组件除了可以监听onChangeText事件外,还可以监听.focus().blur()事件。并且此组件还可以通过设置multiline属性来允许用户输入多行文本数据,例如我们可以允许用户最多输入 4 行文本,字数最大 100 个字符:

<View style={styles.formItem}><Text style={styles.labelTitle}>备注:</Text><TextInputstyle={styles.formInput}multilinenumberOfLines={4}maxLength={100}placeholder="请输入备注"value={summary}></TextInput>
</View>

默认情况下,TextInput 在其视图底部有一个边框。该边框的内边距由系统提供的背景图像设置,并且无法更改。避免这种情况的解决方案是要么不显式设置高度,在这种情况下系统将负责在正确的位置显示边框,要么通过将 underlineColorAndroid 设置为透明来不显示边框。underlineColorAndroid此属性只是针对于安卓设备而言。

请注意,在 Android 上,在输入中执行文本选择可以将应用程序的活动 windowSoftInputMode 参数更改为 adjustmentResize。当键盘处于活动状态时,这可能会导致具有“绝对”位置的组件出现问题。要避免此行为,请在 AndroidManifest.xml 中指定 windowSoftInputMode 或使用本机代码以编程方式控制此参数。

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

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

相关文章

RT-Thread 的环形缓冲区 ---- 镜像指示位

可以看一下这篇我写的博客&#xff0c;了解一下大概&#xff1a; RingBuffer 环形缓冲区----镜像指示位_呵呵哒(&#xffe3;▽&#xffe3;)"的博客-CSDN博客https://blog.csdn.net/weixin_41987016/article/details/132340883?spm1001.2014.3001.5501 【回顾】缓冲区…

Mock平台-08开发:项目管理(四)编辑功能和Component抽离

【Mock平台】为系列测试开发教程&#xff0c;从0到1编码带你一步步使用Spring Boot 和 Antd React框架完成搭建一个测试工具平台&#xff0c;希望作为一个实战项目对各位的测试开发学习之路有帮助&#xff0c;大奇一个专注测试技术干货原创与分享的家伙。 本篇重点&#xff1a;…

MetaMask Mobile +Chrome DevTools 调试Web3应用教程

注&#xff1a;本教程来源网络&#xff0c;根据项目做的整理 写好了WEB3应用&#xff0c;在本地调试用得好好的&#xff0c;但是用钱包软件访问就报莫名的错&#xff0c;但是又不知道是什么原因&#xff0c;排查的过程非常浪费时间 。 因此在本地同一局域网进行调试就非常有必要…

mybatis-plus--配置-(sql)日志输出-自动填充-分页-多数据源-逻辑删除

写在前面&#xff1a; 本文主要介绍mybatis-plus的配置&#xff0c;以后在有的时候在补充。欢迎交流。 文章目录 日志输出自动填充分页全局字段配置多数据源 日志输出 调试的时候需要看执行的sql&#xff0c;这时候就很需要日志来记录查看了。 mybatis-plus的日志配置在yml…

Python爬虫——scrapy_读书网数据入库和链接跟进

数据入库 先创建一个数据库 create table book(id int primary key auto_increment,name varchar(128),src varchar(128));settings.py DB_HOST 169.254.38.183 # 端口号是一个整数 DB_PORT 3306 DB_USER root DB_PASSWORD 123456 # 数据库名称 DB_NAME spider01 DB_CHA…

软件建模的4个视图

逻辑视图 元素&#xff1a;类和包。 关系&#xff1a;它们之间的关系。 用途&#xff1a;说明人、事、物、规则是如何分类的。 进程视图 元素&#xff1a;进程。 关系&#xff1a;进程间通信。 用途&#xff1a;说明进程的详细组织结构&#xff0c;其中包含类和子系统到进程和…

​8th参考文献:[8]许少辉.乡村振兴战略下传统村落文化旅游设计[M]北京:中国建筑出版传媒,2022.

​&#xff18;th参考文献&#xff1a;&#xff3b;&#xff18;&#xff3d;许少辉&#xff0e;乡村振兴战略下传统村落文化旅游设计&#xff3b;&#xff2d;&#xff3d;北京&#xff1a;中国建筑出版传媒&#xff0c;&#xff12;&#xff10;&#xff12;&#xff12;&…

IO多路复用中select的TCP服务器模型和poll服务模型

select的TCP服务器模型 服务器端 #include <head.h> #include <sys/types.h> #include <sys/socket.h> #include <arpa/inet.h> #include <unistd.h> #include <sys/select.h> #include <sys/time.h>#define PORT 6666 //1024~4…

RK3588平台开发系列讲解(AI 篇)RKNN C API 详细说明

文章目录 一、API 硬件平台支持说明二、API 函数介绍2.1、rknn_init2.2、rknn_destroy2.3、rknn_query2.4、rknn_inputs_set2.5、rknn_run2.6、rknn_outputs_get2.7、rknn_outputs_release沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇章主要讲解 RKNN C API 详细…

springboot 项目日志配置文件详解

spring boot 项目指定 日志配置文件 在Spring Boot项目中&#xff0c;可以通过在application.properties或application.yml文件中指定日志配置文件来配置日志。 1. 使用application.properties文件&#xff1a; 在application.properties中&#xff0c;您可以使用以下属性来…

【ARM】Day4 点亮LED灯

1. 思维导图 2. 自己编写代码实现三盏灯点亮 .text .global _start _start: /**********LED1&#xff0c;LED2,LED3点灯:PE10,PF10,PE8**************/ RCC_INIT:使能GPIOE组/GPIOF组控制器,通过RXCC_MP_AHB4ENSETR设置第[5:4]位写1,地址:0x50000A28[5:4]1ldr r0,0x50000A28 …

01_Redis单线程与多线程

01——Redis单线程与多线程 一、Redis是单线程还是多线程 在谈Redis的单线程或多线程时&#xff0c;需要根据版本来区分。 在redis 3.x之前&#xff0c;redis是单线程的从redis 4.x开始&#xff0c;redis引入多线程。处理客户端请求时&#xff0c;使用单线程&#xff1b;在异…

B-树和B+树的区别

B-树和B树的区别 一、B-tree数据存储 在下图中 P 代表的是指针&#xff0c;指向的是下一个磁盘块。在第一个节点中的 16、24 就是代表我们的 key 值是什么。date 就是这个 key 值对应的这一行记录是什么。 假设寻找 key 为 33 的这条记录&#xff0c;33 在 16 和 34 中间&am…

QT TLS initialization failed问题(已解决) QT基础入门【网络编程】openssl

问题: qt.network.ssl: QSslSocket::connectToHostEncrypted: TLS initialization failed 这个问题的出现主要是使用了https请求:HTTPS ≈ HTTP + SSL,即有了加密层的HTTP 所以Qt 组件库需要OpenSSL dll 文件支持HTTPS 解决: 1.加入以下两行代码获取QT是否支持opensll以…

如何在出差期间远程访问企业ERP系统?内网穿透解决您的难题!

文章目录 概述1.查看象过河服务端端口2.内网穿透3. 异地公网连接4. 固定公网地址4.1 保留一个固定TCP地址4.2 配置固定TCP地址 5. 使用固定地址连接 概述 ERP系统对于企业来说重要性不言而喻&#xff0c;不管是财务、生产、销售还是采购&#xff0c;都需要用到ERP系统来协助。…

SharkTeam:Worldcoin运营数据及业务安全分析

Worldcoin的白皮书中声明&#xff0c;Worldcoin旨在构建一个连接全球人类的新型数字经济系统&#xff0c;由OpenAI创始人Sam Altman于2020年发起。通过区块链技术在Web3世界中实现更加公平、开放和包容的经济体系&#xff0c;并将所有权赋予每个人。并且希望让全世界每一个人都…

Web3和去中心化:互联网的下一个演化阶段

文章目录 Web3和去中心化的定义Web3&#xff1a;去中心化&#xff1a; 为什么Web3和去中心化如此重要&#xff1f;数据隐私和安全&#xff1a;去中心化的创新&#xff1a;去除中间商&#xff1a; Web3和去中心化的应用领域去中心化金融&#xff08;DeFi&#xff09;&#xff1a…

typeScript 之 Map

工具&#xff1a; PlayGround 源码&#xff1a; GitHub TypeScript Map简介 Map是ES6引入的一种新的数据结构&#xff0c; 它是一只用于存储**键值对(key-value)**的集合。 let map new Map(); let map_1: Map<string, number> new Map(); let map_2: Map<string…

Linux驱动开发之点亮三盏小灯

头文件 #ifndef __HEAD_H__ #define __HEAD_H__//LED1和LED3的硬件地址 #define PHY_LED1_MODER 0x50006000 #define PHY_LED1_ODR 0x50006014 #define PHY_LED1_RCC 0x50000A28 //LED2的硬件地址 #define PHY_LED2_MODER 0x50007000 #define PHY_LED2_ODR 0x50007014 #define…

机器学习深度学习——NLP实战(情感分析模型——数据集)

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——BERT&#xff08;来自transformer的双向编码器表示&#xff09; &#x1f4da;订阅专栏&#xff1a;机器…