TextInput组件的常⽤属性
1.TextInput组件基本介绍:
TextInput是⼀个允许⽤户在应⽤中通过键盘输⼊⽂本的基本组件。本组件的属性提供了多种特性的配置，譬如⾃动完成、⾃动⼤⼩写、占位⽂字，以及多种不同的键盘类型（如
纯数字键盘）等等。
最简单的⽤法就是丢⼀个TextInput到应⽤⾥，然后订阅它的onChangeText事件来读取⽤户的输⼊。它还有⼀些其它的事件，譬如onSubmitEditing和onFocus。⼀个简单的例⼦
如下：
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={}
/>
注意有些属性仅在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（纯数字键盘）。
这些值在所有平台都可⽤：
default
numeric
email-address
maxLength 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来阻⽌⽤户进⾏编辑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
* github/facebook/react-native
* @flow
*/
import React, { Component } from'react';
input标签placeholder属性import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
} from'react-native';
class ViewDemo extends Component {
render() {
return (
// ⼀定要设置样式和宽⾼,TextInput才能显⽰出来
<View style ={ainer}>
<TextInput
style = {styles.inputStyle}
// 键盘类型
keyboardType = {'number-pad'}
// 默认⽂字注意默认⽂字是不能删除的
value = {'我是默认⽂字'}
//// 多⾏显⽰
multiline = {true}
//// 密码输⼊注意和multiline冲突
password = {true}
//// 占位字符
palceholder = {"请输⼊"}
/
/// 清除按钮
clearButtonMode = {'always'}
/>
</View>
);
}
}
const styles = ate({
container: {
flex: 1,
backgroundColor: '#f5fcff',
},
inputStyle: {
// 间距
marginTop: 25,
// 背景颜⾊
backgroundColor: 'red',
// 边框
borderWidth: 1,
// 宽度
width: 300,
// ⾼度
height: 60,
borderColor: '#ebebeb'
},
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。