【RN - 基础】之TextInput使用简介
TextInput组件允许用户在应用中通过键盘输入文本信息,其使用方法和Text、Image一样简单,实例代码如下:
<TextInput placeholder={'请输入用户名'} style={styles01.inputStyle} underlineColorAndroid={'transparent'}/>
<TextInput placeholder={'请输入密码'} secureTextEntry={true} style={styles01.inputStyle} underlineColorAndroid={'transparent'}/>
TextInput组件的属性如下表:
| 名称 | 作用 | 值 | 平台 |
|---|---|---|---|
| autoCapitalize | 自动切换成大写 | enum(‘none’,’sentences’,’words’,’characters’) none:不自动切换任何字符成大写;sentences:默认每个句子的首字母变成大写;words:每个字母的首字母变成大写;characters:每个字母全部变成大写 | iOS、Android |
| autoCorrent | 设置拼写自动修正功能,默认为开启(true) | bool | iOS、Android |
| autoFocus | 设置是否默认获取到焦点,默认为关闭(false),componentDidMount方法被调用之后才会获取焦点(componentDidMount是React组件被渲染之后React系统回调的方法) | bool | iOS、Android |
| defaultValue | 给文本输入设置一个默认初始值 | string | iOS、Android |
| editable | 设置文本框是否可以编辑 | bool | iOS、Android |
| keyboardType | 键盘类型:用来选择默认弹出键盘的类型,例如指定numeric就是弹出数字键盘。 | ‘default’, ‘email-address’, ‘numeric’, ‘phone-pad’, ‘ascii-capable’, ‘numbers-and-punctuation’, ‘url’, ‘number-pad’, ‘name-phone-pad’, ‘decimal-pad’, ‘twitter’, ‘web-search’,鉴于平台的原因如下的值是所有平台都可以进行通用:default,numeric,email-address | iOS、Android |
| maxLength | 限制文本输入框最大的输入字符长度 | number | iOS、Android |
| multiline | 设置可以输入多行文字,默认为false(表示无论文本输入多少,都是单行显示) | bool | iOS、Android |
| onBlur | 监听方法,文本框失去焦点回调方法 | function | iOS、Android |
| onChange | 监听方法,文本框内容发生改变回调方法 | function | iOS、Android |
| onChangeText | 监听方法,文本框内容发生改变回调方法,该方法会进行传递文本内容 | function | iOS、Android |
| onEndEditing | 监听方法,当文本结束文本输入回调方法 | function | iOS、Android |
| onFocus | 监听方法 文本框获取到焦点回调方法 | function | iOS、Android |
| onLayout | 监听方法 组价布局发生变化的时候调用,调用方法参数为 {nativeFunction:{x,y,width,height}} | function | iOS、Android |
| onSelectionChange | 监听方法 当Text input选中状态被改变时调用 | function | iOS、Android |
| onSubmitEditing | 监听方法,当编辑提交的时候回调方法。不过如果multiline={true}的时候,该属性就不生效 | function | iOS、Android |
| placeholder | 当文本输入框还没有任何输入的时候,默认显示信息,当有输入的时候该值会被清除 | string | iOS、Android |
| placeholderTextColor | 设置placeholderText颜色 | string | iOS、Android |
| returnKeyType | 决定return键怎么显示 | enum(‘done’, ‘go’, ‘next’, ‘search’, ‘send’, ‘none’, ‘previous’, ‘default’, ‘emergency-call’, ‘google’, ‘join’, ‘route’, ‘yahoo’)。双平台适用:done、go、next、search、send;Android:none、previous;iOS:default、emergency-call、google、join、route、yahoo | iOS、Android |
| secureTextEntry | 设置是否为密码安全输入框 | bool,默认为false | iOS、Android |
| selectTextOnFocus | 如果为true,当获得焦点,自动选中所有文本 | bool | iOS、Android |
| selectionColor | 输入框文本的高亮颜色(iOS中包括光标) | string | iOS、Android |
| value | 组件中的值 | string | iOS、Android |
| numberOfLines | 设置TextInput的行数,multiline设置为true,并结合该属性能够满足多行的TextInput | number | Android |
| returnKeyLabel | 设置return键为文本组件,利用它替换returnKeyType | string | android |
| underlineColorAndroid | 设置TextInput的下划线颜色 | string | android |
| clearButtonMode | 清除按钮模式,设置何时应该在TextInput右边出现清除按钮 | enum(‘never’, ‘while-editing’, ‘unless-editing’, ‘always’) | iOS |
| clearTextOnFocus | 如果为true,当编辑开始自动清除TextInput文本内容 | bool | iOS |
| enablesReturnKeyAutomatically | 如果为true,当没有输入文本键盘的return键自动失效,当输入文本键盘的return键自动生效,默认值是false | bool | iOS |
| keyboardAppearance | 设置键盘的颜色 | enum(‘default’, ‘light’, ‘dark’) | iOS |
| onKeyPress | 当任何一个键被按时调用,被按的键的值作为一个实参传入function,在onChange被调用之前先执行 | function | iOS |
| selectionState | 请看DocumentSelectionState.js一些状态负责维持一个文档的选中信息(我也不懂什么意思,官网翻译的。) | DocumentSelectionState | iOS |
TextInput组件还有如下方法:
isFocused() :判断当前的TextInput组件是否获取了焦点。
clear() :清空TextInput组件中的文本内容。
【RN - 基础】之TextInput使用简介的更多相关文章
- J2EE基础之Web服务简介
J2EE基础之Web服务简介 1.什么是Web服务? 在人们的日常生活中,经常会查询网页上某城市的天气信息,这些信息都是动态的.实时的,它是专业的气象站提供的一种服务.例如,在网上购物时,通常采用网上 ...
- Java基础-JVM调优策略简介
Java基础-JVM调优策略简介 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.JVM结构分析 1>.JVM结构图 2>.JVM运行时数据区功能说明 JVM管理的内 ...
- Django 06 Django模型基础1(ORM简介、数据库连接配置、模型的创建与映射、数据的增删改查)
Django 06 Django模型基础1(ORM简介.数据库连接配置.模型的创建与映射.数据的增删改查) 一.ORM系统 #django模型映射关系 #模型类-----数据表 #类属性-----表字 ...
- Spring Boot 基础,理论,简介
Spring Boot 基础,理论,简介 1.SpringBoot自动装配 1.1 Spring装配方式 1.2 Spring @Enable 模块驱动 1.3 Spring 条件装配 2.自动装配正 ...
- 【RN - 基础】之Image使用简介
Image组件是用来加载图片的.React Native项目加载图片往往有三种方式: 从React Native项目中加载图片: 从APP项目中加载图片: 从网络中加载图片. Image组件加载图片 ...
- 【RN - 基础】之View使用简介
简介 View是一个容器,支持FlexBox布局. View既可以作为容器容纳其他组件,也可以作为一个组件包含进另一个容器中. 无论运行在哪个平台上,View都会直接对应这个平台的原生视图,如iOS中 ...
- 【RN - 基础】之Text使用简介
基本用法 Text组件是React Native中的一个重要组件,相当于iOS中的UILabel和Android中的TextView.Text组件用来存放文本数据.下面是一个简单的例子: import ...
- 爬虫基础(五)-----scrapy框架简介
---------------------------------------------------摆脱穷人思维 <五> :拓展自己的视野,适当做一些眼前''无用''的事情,防止进入只关 ...
- python 基础 10.0 nosql 简介--redis 连接池及管道
一. NOSQL 数据库简介 NoSQL 泛指非关系型的数据库.非关系型数据库与关系型数据库的差别 非关系型数据库的优势: 1.性能NOSQL 是基于键值对的,可以想象成表中的主键和值的对应关系,而且 ...
随机推荐
- Unity5-ABSystem(一):AssetBundle原理
转载自:http://blog.csdn.net/lodypig/article/details/51863683 说明 AssetBundle简介 AssetBundle内部格式 normal bu ...
- 学习笔记36_Razor
*Razor视图引擎 在添加视图的时候,视图引擎除了有“aspx”外,还有Razor(CSHTML),就会在对应的文件夹下,产生 view.cshtml文件,那么,以后写C#代码,就可以 @for(v ...
- NOIP模拟 39
考的嘛也不是. 伤心(怎么可能) T1稍想想组合数,然后牢记: 取模题随时取模,包括刚刚读入的数据 T2想到了基环树,然而不会打QAQ.. 非常简洁但非常大神的做法:随便断掉环上的一条边 利用“这条 ...
- 『题解』POJ1753 Flip Game
题目传送门 题意描述 有\(4 \times 4\)的正方形,每个格子要么是黑色,要么是白色,当把一个格子的颜色改变(黑\(\to\)白 或 白\(\to\)黑)时,其周围上下左右(如果存在的话)的格 ...
- JS面试题-<变量和类型>-JavaScript浅拷贝与深拷贝
前言 最开始了解到深浅拷贝是因为准备面试,但那个时候因为在学校做的项目比较少需求也比较简单,所以没有在项目中遇到这类问题,所以对这个问题就属于知道这个知识点,看过相关内容,却没有自己的总结,也没有深入 ...
- Java-100天知识进阶-基本类型-知识铺(一)
知识铺: 致力于打造轻知识点,持续更新每次的知识点较少,阅读不累.不占太多时间,不停地来唤醒你记忆深处的知识点. Java的两大数据类型: 一.内置数据类型 二.引用数据类型 内置数据类型 Java语 ...
- 最近的项目系列1——core整合SPA
1.前言 当前,前后端分离大行其道,我本人之前不少项目也是纯前后端分离,但总有些场景,春前后端分离整起来比较痛苦,比如我手头这个公众号项目吧,它涉及到第三方鉴权,第三方凭证,以及微信凭证这些,都不适合 ...
- 创建OData Service(基于ASP.NET 4.6.1, EF 6),Part I:Project initialize
由于ASP.NET Core 1处于RC阶段,加上OData WebAPI 对ASP.NET Core 1的跟进不是很积极,基于ASP.NET Core 1的Alpha 1版本已经N月没有check ...
- Nginx做缓存服务器
Nginx做缓存服务器 Nginx配置 1.主配置/etc/nginx/nginx.conf worker_processes 1; events { worker_connections 1024; ...
- 深入讲解 Laravel 的 IoC 服务容器
众所周知,Laravel 控制反转 (IoC) / 依赖注入 (DI) 的功能非常强大.遗憾的是, 官方文档 并没有详细讲解它的所有功能,所以我决定自己实践一下,并整理成文.下面的代码是基于 Lara ...