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'}/>
...

效果图：

其它跨平台属性

Android 平台独有属性

iOS 平台独有属性

方法

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

返回值表明当前输入框是否获得了焦点。