React Native组件(四)TextInput组件解析
相关文章
React Native探索系列
React Native组件系列
1 概述
TextInput组件和Text组件类似,内部都没有使用FlexBox布局,不同的是TextInput组件支持文字的输入,因为支持文字输入, TextInput组件要比Text组件多了一些属性和方法。TextInput组件支持Text组件所有的Style属性,而TextInput组件本身是没有特有的Style属性的。
2 属性
TextInput组件支持所有的View组件的属性,除此之外,它还有许多其他属性。
2.1 onChangeText
当输入框的内容发生变化时,就会调用onChangeText。
index.android.js
import React, {Component} from 'react';
import {AppRegistry, StyleSheet, View, TextInput, Button,Alert} from 'react-native';
class TextApp extends Component {constructor(props) {super(props);this.state = {searchText: ""}}render() {return (<View style={styles.container}><View style={styles.searchBar}><TextInput style={styles.input} placeholder='请输入内容'onChangeText={(text) => {this.setState({searchText: text});}}/><Button style={styles.button} title='搜索'onPress={ () => {Alert.alert('输入的内容为:' + this.state.searchText);}}/></View></View>);}
}
const styles = StyleSheet.create({container: {flex: 1,},searchBar: {flexDirection: 'row',height: 45,justifyContent: 'center',alignItems: 'center'},input: {flex: 1,borderColor: 'gray'},button: {flex: 1}
});
AppRegistry.registerComponent('ViewSample', () => TextApp);复制代码
上面的例子我们用到了TextInput组件的onChangeText属性,当我们在TextInput中输入内容时,这个内容就会通过onChangeText的参数text传递回来,在onChangeText中将text的内容保存到state中。当我们点击Button时,通过Alert将state中保存的内容展现出来。
运行程序效果如下图所示。
在输入框中输入Android,点击搜索Button,可以看到输入的Android展示到了Alert中。
2.2 onChange
当输入框的内容发生变化时,也会调用onChange,只不过它所返回的参数是一个event,我们来改写2.1的代码:
...<TextInput style={styles.input} placeholder='请输入内容' keyboardType='default'onChange={(event) => {this.setState({searchText: event.nativeEvent.text});}}/>
...复制代码
通过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是跨平台。
...<TextInput style={styles.input} placeholder='请输入内容' keyboardType='phone-pad'onChangeText={(text) => {this.setState({searchText: text}); }}/>
...复制代码
将keyboardType的值设置为phone-pad,效果如下图所示。
2.4 blurOnSubmit
如果blurOnSubmit值为true,文本框会在按下提交键时失去焦点。对于单行输入框,blurOnSubmit默认值为true,多行则为false。
在单行的情况下,点击键盘上的提交按钮时,TextInput的效果如下图所示。
将blurOnSubmit设置为false:
...<TextInput style={styles.input} placeholder='请输入内容' blurOnSubmit={false} onChangeText={(text) => {this.setState({searchText: text});}}/>
...复制代码
点击键盘上的提交按钮时,TextInput的效果如下图所示。
2.5 onSubmitEditing
当提交键被按下时会调用onSubmitEditing,如果multiline等于true,则此属性不可用。
...<TextInput style={styles.input} placeholder='请输入内容' blurOnSubmit={true} multiline={false}onChangeText={(text) => {this.setState({searchText: text});}}onSubmitEditing={(event) => {console.log(event.nativeEvent.text);}}/>
...复制代码
运行程序并在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 其他跨平台属性
属性名 | 取值 | 说明 |
---|---|---|
autoCapitalize | enum('none', 'sentences', 'words', 'characters') | 设置英文字母自动大写规则,取值分别表示:不自动大写、每句话首字母自动大写、每个单词首字母大写、全部字母自动大写 |
autoCorrect | bool | 是否会自动检测用户输入的英语单词正确性,默认值为true |
autoFocus | bool | 如果为true,在componentDidMount后会获得焦点。默认值为false。 |
defaultValue | string | 字符初始值,当用户开始输入时,该值将改变 |
placeholder | node | 文本输入之前将呈现的字符串,多用于提示用户应该输入什么 |
placeholderTextColor | color | 文本输入之前将呈现的字符串的颜色 |
editable | bool | 是否允许修改字符,默认值为true |
maxLength | number | 最多允许用户输入多少字符 |
caretHidden | bool | 如果为true,则隐藏光标 |
multiline | bool | 如果为true,则文本输入可以是多行的,默认值为false |
secureTextEntry | bool | 文本框是否用于输入密码,默认值为false |
selectTextOnFocus | bool | 如果为true,则文本框获取焦点时,组件中的内容会被自动选中 |
onFocus | function | 当文本框获得焦点的时候调用此回调函数 |
onEndEditing | function | 当文本输入结束后调用此回调函数 |
onLayout | function | 当组件挂载或者布局变化的时候调用,参数为{x, y, width, height} |
onScroll | function | 在内容滚动时持续调用,传回参数的格式形如{ nativeEvent: { contentOffset: { x, y } } } |
onSelectionChange | function | 长按选择文本时,选择范围变化时调用此函数,传回参数的格式形如 { nativeEvent: { selection: { start, end } } } |
value | string | 文本框中的文字内容 |
2.8 Android平台独有属性
属性名 | 取值 | 说明 |
---|---|---|
inlineImageLeft | string | 指定一个图片放置在左侧 |
inlineImagePadding | number | 左侧图片的Padding(如果有的话),以及文本框本身的Padding |
numberOfLines | number | TextInput的行数 |
underlineColorAndroid | string | TextInput的下划线颜色 |
returnKeyLabel | string | 设置软键盘回车键的内容,优先级高于returnKeyType |
disableFullscreenUI | bool | 值为false时(默认值),如果TextInput的输入空间小,系统可能会进入全屏文本输入模式 |
2.9 iOS平台独有属性
属性名 | 取值 | 说明 |
---|---|---|
clearButtonMode | enum('never', 'while-editing', 'unless-editing', 'always') | 何时在文本框右侧显示清除按钮 |
clearTextOnFocus | bool | 如果为true,每次开始输入的时候都会清除文本框的内容 |
keyboardAppearance | enum('default', 'light', 'dark') | 键盘的颜色 |
onKeyPress | function | 一个键被按下的时候调用此回调,传递给回调函数的参数为{ nativeEvent: { key: keyValue } } |
spellCheck | bool | 如果为false,则禁用拼写检查的样式(比如红色下划线) |
enablesReturnKeyAutomatically | bool | 如果为true,键盘会在文本框内没有文字的时候禁用确认按钮 ,默认值为false |
3 方法
clear()
clear用于清空输入框的内容。
想要使用组件的方法则需要使用组件的引用,例子如下所示。
...
render() {return (<View style={styles.container}><View style={styles.searchBar}><TextInput style={styles.input} ref="textInputRefer" placeholder='请输入内容' blurOnSubmit={true}returnKeyType='send'onChangeText={(text) => {this.setState({searchText: text});}}/><Button style={styles.button} title='清除'onPress={ () => {this.refs.textInputRefer.clear();}}/></View></View>);}...复制代码
在TextInput标签中定义引用的名称:ref="textInputRefer"
,这样我们通过 this.refs.textInputRefer
就可以得到TextInput 组件的引用。在Button的onPress函数中,调用了TextInput的clear方法,这样当我们点击“清除”按钮时,文本框中的内容就会被清除。
isFocused(): boolean
返回值表明当前输入框是否获得了焦点。
好了,到这里TextInput组件就介绍到这里,还有一些没有列出的属性请查看官方文档。
参考资料
官方文档
《React Native跨平台移动应用开发》第二版
《React Native 移动开发实战》
React Native-组件的引用
欢迎关注我的微信公众号,第一时间获得博客更新提醒,以及更多成体系的Android相关原创技术干货。
扫一扫下方二维码或者长按识别二维码,即可关注。
React Native组件(四)TextInput组件解析相关推荐
- 16、React Native实战之TextInput组件
文本输入框:基本组件 自动补全的搜索功能 TextInput的主要属性和事件如下: autoCapitalize:枚举类型,可选值有none sentences words characters ...
- React Native 项目常用第三方组件汇总
React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...
- React Native中的TextInput (补充)
React Native中的TextInput (补充) TextInput 的属性: import React, { Component } from 'react'; import { AppRe ...
- Android React Native使用原生UI组件
Android React Native 已经将几个常用的原生组件进行了封装,比如 ScrollView 和 TextInput,但是并不是所有系统的原始组件都被封装了,因此有的时候我们不得不自己动手 ...
- React Native 项目简单整理-组件优化
2019独角兽企业重金招聘Python工程师标准>>> 断断续续敲了一天,记录一下没有优化的分类的代码,App.js 里的代码 /*** Sample React Native Ap ...
- React Native中一些常用组件用法
View组件 View是一个支持Flexbox布局.样式.一些触摸处理.和一些无障碍功能的容器,并且它可以放到其它的视图里,也可以有任意多个任意类型的子视图. View的设计初衷是和StyleShee ...
- React Native获取设备信息组件
转载 https://www.jianshu.com/p/907b003835dc 本文原创首发于公众号:ReactNative开发圈,转载需注明出处. 这次介绍的获取移动设备信息的组件名叫:reac ...
- java去掉rn,React Native删除第三方开源组件的依赖包
最近项目即将上线,但是遇到了一个问题,安装之后第一次打开时,在有的Android手机上崩溃,之后再次运行就好了,好多Android机型都遇到这种情况,定位问题,发现是之前加载的第三方开源控件:reac ...
- react native 中下拉列表FlatList组件的讲解以及实例demo
RN中的下拉列表组件.以前RN的下拉列表是listView,但是这个组件的性能不咋地.当数据较多的时候就会很卡.所以RN就新出了一个FaltList组件来代替它.这里我们简单总结一下新的下拉组件. 一 ...
- react native 0.50 源码解析 再出发 持续更新
1.核心类 1.1 RCTRootView 一个RCTRootView持有一个RCTBridge成员变量 RCTRootView : UIViewRCTBridge *bridge;UIViewCon ...
最新文章
- ats 5.3.2中的header-rewrite插件调研
- centos7 systemctl配置开机自启动服务
- Internet:从区块链的底层技术思考互联网是如何构成的
- 如何在 ASP.NET 4.6 与 IIS10 中运用 HTTP/2 ?
- iOS 转换BGR24 为 RGB24
- next() 与 nextLine() 区别
- Redmine 数据库连接错误
- finalshell日志乱码问题_Tomcat乱码问题
- vc的UI编程PngTextButton控件的适用情况
- 双用户windows linux系统,Windows与Linux合二为一?终于能在windows上运行Linux了!
- 平衡的括号[UVA-673]
- FineReport 11.0 五大全新功能,让报表开发更快、更好看
- (转)SpringMVC学习(二)——SpringMVC架构及组件
- NIO系列六:流行 NIO Framework netty 和 mina 性能测评与分析
- 写的函数符号表里没有_DATEDIF函数,看看你的Excel里有没有?
- Linux入门篇(1)
- 产品画的Axure原型图打不开解决办法
- 【无标题】win排查可以外联进程
- 程序员真的需要一台 Mac 吗?
- 第一章 软件开发入门引导及概述
热门文章
- 数据结构实验病毒感染检测问题(C++)
- CSS和JS引用图片(资源)的路径问题
- 【SLAM笔记】如何使用Eigen进行矩阵运算
- IMU-Allan方差分析
- 安徽省级办公室高级应用计算机二级,2019年9月安徽省计算机等级二级考试教程:二级MSOffice高级应用上机指导...
- docker的php教程https,Docker搭建php环境教程详解
- qpsk的映射过程_FPGA数字信号处理(28)QPSK星座映射与解映射
- winform list集合怎么 in过滤_你有真正把 Python Set 当作数学集合吗?
- linux能力集机制,linux能力机制
- java注解_Java注解