React Native组件(四)TextInput组件解析
1 概述
TextInput组件和Text组件类似,内部都没有使用FlexBox布局,不同的是TextInput组件支持文字的输入,因为支持文字输入, TextInput组件要比Text组件多了一些属性和方法。TextInput组件支持Text组件所有的Style属性,而TextInput组件本身是没有特有的Style属性的。
2 属性
TextInput组件支持所有的View组件的属性,除此之外,它还有许多其他属性。
2.1 onChangeText
当输入框的内容发生变化时,就会调用onChangeText。 index.android.js
上面的例子我们用到了TextInput组件的onChangeText属性,当我们在TextInput中输入内容时,这个内容就会通过onChangeText的参数text传递回来,在onChangeText中将text的内容保存到state中。当我们点击Button时,通过Alert将state中保存的内容展现出来。
运行程序效果如下图所示。
在输入框中输入Android,点击搜索Button,可以看到输入的Android展示到了Alert中。
2.2 onChange
当输入框的内容发生变化时,也会调用onChange,只不过它所返回的参数是一个event,我们来改写2.1的代码:
通过event.nativeEvent.text可以得到用户输入的内容,如果只是想要得到用户输入的内容,还是用onChangeText比较合适。
2.3 keyboardType
keyboardType用于设置弹出软键盘的类型。它的取值为范围为: enum(‘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和phone-pad是跨平台。
将keyboardType的值设置为phone-pad,效果如下图所示。
2.4 blurOnSubmit
如果blurOnSubmit值为true,文本框会在按下提交键时失去焦点。对于单行输入框,blurOnSubmit默认值为true,多行则为false。 在单行的情况下,点击键盘上的提交按钮时,TextInput的效果如下图所示。
将blurOnSubmit设置为false:
点击键盘上的提交按钮时,TextInput的效果如下图所示。
2.5 onSubmitEditing
当提交键被按下时会调用onSubmitEditing,如果multiline等于true,则此属性不可用。
运行程序并在App的开发菜单中选择Debug JS Remotely,这时我们输入Android并按下提交键,在Console控制台中就会输出结果。(笔者用的是WebStorm)
2.6 returnKeyType
用于设置软键盘回车键的样式,Android平台可以使用returnKeyLabel来设置软键盘回车键的内容。 returnKeyType的取值为enum(‘done’, ‘go’, ‘next’, ‘search’, ‘send’, ‘none’, ‘previous’, ‘default’, ‘emergency-call’, ‘google’, ‘join’, ‘route’, ‘yahoo’)。 其中跨平台的取值有:done、next、search、send。 Android平台独有:none、previous。 iOS平台独有:default、emergency-call、google、join、route、yahoo。 如果我们将returnKeyType设置为go时,效果如下图所示。
returnKeyType设置为send时,效果如下图所示。
2.7 其他跨平台属性
2.8 Android平台独有属性
2.9 iOS平台独有属性
3 方法
clear()
clear用于清空输入框的内容。 想要使用组件的方法则需要使用组件的引用,例子如下所示。
在TextInput标签中定义引用的名称:ref="textInputRefer"
,这样我们通过 this.refs.textInputRefer
就可以得到TextInput 组件的引用。在Button的onPress函数中,调用了TextInput的clear方法,这样当我们点击“清除”按钮时,文本框中的内容就会被清除。
isFocused(): boolean
返回值表明当前输入框是否获得了焦点。
好了,到这里TextInput组件就介绍到这里,还有一些没有列出的属性请查看官方文档。
- 浅谈用户行为分析之用户身份识别:cookie 知多少?
- 串口通信控制器的Verilog HDL实现(四) 接收模块的Verilog HDL 实现
- 串口通信控制器的Verilog HDL实现(三) 发送模块的Verilog HDL 实现
- 串口通信控制器的Verilog HDL实现(二) 波特率发生器模块
- 串口通信控制器的Verilog HDL实现(一) 顶层模块
- 双口同步RAM
- 单口RAM
- Python 基础:类与函数
- 论 Python 装饰器控制函数 Timeout 的正确姿势
- 巧用 SecureCRT 实现复杂的 ssh 登录过程自动化
- pyDes 实现 Python 版的 DES 对称加密/解密
- 流水灯
- Chrome 自动化交互利器:用 tampermonkey 向页面注入自定义 Javascript
- 一次小折腾:PyCharm 调用 Cygwin Python 找不到 time、sys 等内置模块
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- html+js开发模拟考试在线评分系统
- iOS音视频接入 - TRTC接入实时视频通话
- LRU缓存淘汰机制C++实现
- ant-design-vue运行时动态切换主题色
- 使用electron将vue-cli3.x项目打包为桌面应用
- Ubuntu 16.04下安装服务器端Shadowsocks
- 解决vue cli3.x打包上线静态资源找不到路径问题
- Ant-design-vue+vue-i18n实现前端国际化
- Mac OSX终端安装主题(oh my zsh)
- 谷歌浏览器油猴插件安装教程,让你的浏览器更加强大
- zabbix模块配置学习
- Windows下安装及使用NVM
- U盘上安装多个Linux发行版和PE
- ubuntu18.04部署python3、nginx项目
- CentOS8.x系统配置记录