首页 > 代码库 > TextInput组件的常用属性
TextInput组件的常用属性
1.TextInput组件基本介绍:
TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,譬如自动完成、自动大小写、占位文字,以及多种不同的键盘类型(如纯数字键盘)等等。
最简单的用法就是丢一个TextInput到应用里,然后订阅它的onChangeText事件来读取用户的输入。它还有一些其它的事件,譬如onSubmitEditing和onFocus。一个简单的例子如下:
<TextInput
style={{height: 40, borderColor: ‘gray‘, borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value=http://www.mamicode.com/{this.state.text}
/>
注意有些属性仅在multiline为true或者为false的时候有效。此外,当multiline=false时,为元素的某一个边添加边框样式(例如:borderBottomColor,borderLeftWidth等)将不会生效。为了能够实现效果你可以使用一个View来包裹TextInput:
<View style={{ borderBottomColor: ‘#000000‘, borderBottomWidth: 1, }}>
<TextInput {...props} />
</View>
2>属性
属性autoCapitalize enum(‘none‘, ‘sentences‘, ‘words‘, ‘characters‘) 控制TextInput是否要自动将特定字符切换为大写:characters: 所有的字符。words: 每个单词的第一个字符。sentences: 每句话的第一个字符(默认)。none: 不自动切换任何字符为大写。autoCorrect bool 如果为false,会关闭拼写自动修正。默认值是true。autoFocus bool 如果为true,在componentDidMount后会获得焦点。默认值为false。blurOnSubmit bool 如果为true,文本框会在提交的时候失焦。对于单行输入框默认值为true,多行则为false。注意:对于多行输入框来说,如果将blurOnSubmit设为true,则在按下回车键时就会失去焦点同时触发onSubmitEditing事件,而不会换行。defaultValue string 提供一个文本框中的初始值。当用户开始输入的时候,值就可以改变。在一些简单的使用情形下,如果你不想用监听消息然后更新value属性的方法来保持属性和状态同步的时候,就可以用defaultValue来代替。editable bool 如果为false,文本框是不可编辑的。默认值为true。keyboardType enum("default", ‘numeric‘, ‘email-address‘, "ascii-capable", ‘numbers-and-punctuation‘, ‘url‘, ‘number-pad‘, ‘phone-pad‘, ‘name-phone-pad‘, ‘decimal-pad‘, ‘twitter‘, ‘web-search‘) 决定弹出的何种软键盘的,譬如numeric(纯数字键盘)。这些值在所有平台都可用:defaultnumericemail-addressmaxLength number 限制文本框中最多的字符数。使用这个属性而不用JS逻辑去实现,可以避免闪烁的现象。multiline bool 如果为true,文本框中可以输入多行文字。默认值为false。onBlur function 当文本框失去焦点的时候调用此回调函数。onChange function 当文本框内容变化时调用此回调函数。onChangeText function 当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。onEndEditing function 当文本输入结束后调用此回调函数。onFocus function 当文本框获得焦点的时候调用此回调函数。onLayout function 当组件挂载或者布局变化的时候调用,参数为{x, y, width, height}。onSubmitEditing function 此回调函数当软键盘的确定/提交按钮被按下的时候调用此函数。如果multiline={true},此属性不可用。placeholder string 如果没有任何文字输入,会显示此字符串。placeholderTextColor string 占位字符串显示的文字颜色。secureTextEntry bool 如果为true,文本框会遮住之前输入的文字,这样类似密码之类的敏感文字可以更加安全。默认值为false。selectTextOnFocus bool 如果为true,当获得焦点的时候,所有的文字都会被选中。selectionColor string 设置输入框高亮时的颜色(在iOS上还包括光标)style Text#style 译注:这意味着本组件继承了所有Text的样式。value string 文本框中的文字内容。TextInput是一个受约束的(Controlled)的组件,意味着如果提供了value属性,原生值会被强制与value属性保持一致。在大部分情况下这都工作的很好,不过有些情况下会导致一些闪烁现象——一个常见的原因就是通过不改变value来阻止用户进行编辑。如果你希望阻止用户输入,可以考虑设置editable={false};如果你是希望限制输入的长度,可以考虑设置maxLength属性,这两个属性都不会导致闪烁。iosclearButtonMode enum(‘never‘, ‘while-editing‘, ‘unless-editing‘, ‘always‘) 是否要在文本框右侧显示“清除”按钮。iosclearTextOnFocus bool 如果为true,每次开始输入的时候都会清除文本框的内容。iosenablesReturnKeyAutomatically bool 如果为true,键盘会在文本框内没有文字的时候禁用确认按钮。默认值为false。ioskeyboardAppearance enum(‘default‘, ‘light‘, ‘dark‘) 指定键盘的颜色。iosonKeyPress function 当一个键被按下的时候调用此回调。被按下的键会作为参数传递给回调函数。会在onChange之前调用。iosreturnKeyType enum(‘default‘, ‘go‘, ‘google‘, ‘join‘, ‘next‘, ‘route‘, ‘search‘, ‘send‘, ‘yahoo‘, ‘done‘, ‘emergency-call‘) 决定“确定”按钮显示的内容。iosselectionState DocumentSelectionState 参见DocumentSelectionState.js,可以控制一个文档中哪段文字被选中的状态。androidnumberOfLines number 设置输入框的行数。当multiline设置为true时使用它,可以占据对应的行数。androidunderlineColorAndroid string 文本框的下划线颜色(译注:如果要去掉文本框的边框,请将此属性设为透明transparent)。
3>方法:
isFocused(): boolean #返回值表明当前输入框是否获得了焦点。clear() 清空输入框的内容。
4>实现:
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from ‘react‘;import { AppRegistry, StyleSheet, Text, View, TextInput,} from ‘react-native‘;class ViewDemo extends Component { render() { return ( // 一定要设置样式和宽高,TextInput才能显示出来 <View style ={styles.container}> <TextInput style = {styles.inputStyle} // 键盘类型 keyboardType = {‘number-pad‘} // 默认文字 注意默认文字是不能删除的 value = http://www.mamicode.com/{‘我是默认文字‘} // // 多行显示 multiline = {true} // // 密码输入 注意和multiline冲突 password = {true} // // 占位字符 palceholder = {"请输入"} // // 清除按钮 clearButtonMode = {‘always‘} /> </View> ); }}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: ‘#f5fcff‘, }, inputStyle: { // 间距 marginTop: 25, // 背景颜色 backgroundColor: ‘red‘, // 边框 borderWidth: 1, // 宽度 width: 300, // 高度 height: 60, borderColor: ‘#ebebeb‘ },});AppRegistry.registerComponent(‘ViewDemo‘, () => ViewDemo);
TextInput组件的常用属性
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。