TextInput 是一个允许用户输入文本的基础组件。它有一个 onChangeText 的属性，该属性接受一个函数，每当文本输入发生变化时，此函数就会被调用。它还有一个 onSubmitEditing 的属性，当文本输入完被提交的时候调用。
属性
onChangeText
当输入框的内容发生变化时，就会调用 onChangeText。
实例代码：
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
Button,
Alert
} from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
searchText:''
}
}
render() {
return (
<View style={styles.container}>
<View style={styles.title_view}>
<Text style={styles.title_text}>
TextInput
</Text>
</View>
<View style = {styles.search}>
<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,
backgroundColor: 'white',
},
title_view:{
flexDirection:'row',
height:50,
justifyContent: 'center',
alignItems: 'center',
backgroundColor:'#27b5ee',
},
title_text:{
color:'white',
fontSize:22,
textAlign:'center'
},
search:{
flexDirection:'row',
height:45,
marginTop:10,
justifyContent: 'center',
alignItems: 'center',
},
input: {
flex: 1,
borderColor: 'red'
},
button: {
flex: 1,
}
});
效果图：
onChange
当输入框的内容发生变化时，也会调用 onChange，只不过它所返回的参数是一个event。通过 event.nativeEvent.text 可以得到用户输入的内容，如果只是想要得到用户输入的内容，还是用 onChangeText 比较合适。
<TextInput
style = {styles.input}
placeholder = '请输入搜索内容'
onChange = {(event)=>{
this.setState({searchText:event.nativeEvent.text});
}}/>
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});
}}/>
...
效果图：
blurOnSubmit
如果 blurOnSubmit 值为 true，文本框会在按下提交键时失去焦点。对于单行输入框， blurOnSubmit 默认值为 true，多行则为false。
onSubmitEditing
当提交键被按下时会调用onSubmitEditing，如果multiline等于true，则此属性不可用。
...
<TextInput
style = {styles.input}
placeholder = '请输入搜索内容'
blurOnSubmit = {true}
onChangeText = {(text)=>{
this.setState({searchText:text});
}}
onSubmitEditing = {(event) => {
console.log(event.nativeEvent.text);
}}/>
...
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。
...
<TextInput
style = {styles.input}
placeholder = '请输入搜索内容'
blurOnSubmit = {true}
onChangeText = {(text)=>{
this.setState({searchText:text});
}}
returnKeyType = {'search'}/>
...
效果图：
其它跨平台属性
name | type | desc |
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 | 文本框中的文字内容 |
Android 平台独有属性
name | value | desc |
inlineImageLeft | string | 指定一个图片放置在左侧 |
inlineImagePadding | number | 左侧图片的Padding(如果有的话)，以及文本框本身的Padding |
numberOfLines | number | TextInput的行数 |
underlineColorAndroid | string | TextInput的下划线颜色 |
returnKeyLabel | string | 设置软键盘回车键的内容，优先级高于returnKeyType |
disableFullscreenUI | bool | 值为false时(默认值)，如果TextInput的输入空间小，系统可能会进入全屏文本输入模式 |
iOS 平台独有属性
name | value | desc |
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 |
方法
clear()
clear用于清空输入框的内容。
实例代码：
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
Button,
Alert
} from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
searchText:''
}
}
render() {
return (
<View style={styles.container}>
<View style={styles.title_view}>
<Text style={styles.title_text}>
TextInput
</Text>
</View>
<View style = {styles.search}>
<TextInput
style = {styles.input}
placeholder = '请输入搜索内容'
ref = 'textInputRefer'
onChangeText = {(text)=>{
this.setState({searchText:text});
}}
returnKeyType = {'search'}/>
<Button
style= {styles.button}
title = '清除'
onPress = {()=>{
this.refs.textInputRefer.clear();
}}/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
title_view:{
flexDirection:'row',
height:50,
justifyContent: 'center',
alignItems: 'center',
backgroundColor:'#27b5ee',
},
title_text:{
color:'white',
fontSize:22,
textAlign:'center'
},
search:{
flexDirection:'row',
height:45,
marginTop:10,
justifyContent: 'center',
alignItems: 'center',
},
input: {
flex: 1,
borderColor: 'red'
},
button: {
flex: 1,
}
});在TextInput标签中定义引用的名称：ref="textInputRefer"，这样我们通过 this.refs.textInputRefer就可以得到 TextInput 组件的引用。在 Button 的 onPress() 函数中，调用了 TextInput 的 clear() 方法，这样当我们点击“清除”按钮时，文本框中的内容就会被清除。
isFocused(): boolean
返回值表明当前输入框是否获得了焦点。
