TextInput 類似于iOS的UITextField，也是常用控件。先簡單介紹一下基本屬性：

      autoCapitalize: 枚舉類型，可選值有'none'、'sentences'、‘words’、‘characters’，當用戶輸入時用于提示
      placeholder：占位符，在輸入前顯示的文本
      value：文本輸入框的默認值
      placeholderTextColor：占位符文本的顏色
      password：如果為true，則是密碼輸入框，文本顯示為‘*’
      multiline：如果為true，則是多行輸入
      editable：如果為false，文本框不可輸入，默認為true
      autoFocus：如果為true，將自動聚焦
      clearButtonMode：枚舉類型，可選值有‘never’、‘while-editing’、‘unless-editing’、‘always’，用以顯示清除按鈕
      maxLength：能夠輸入的最長字符數
      enablesReturnKeyAutomatically：如果值為true，表示沒有文本時鍵盤是不能有返回鍵的，默認為false
      returnKeyType：枚舉類型，可選值有‘default’、‘go’、‘google’、‘join’、‘next’、‘route’、‘search’、‘senvar React = require('react-native');

以高德搜索提示為例，如圖：

屏幕快照 2016-05-09 上午9.44.36.png

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput
} = React;

var Search = React.createClass ({
  render:function() {
    return (
      <View style={[styles.flex, styles.flexDirection]}>
        <View style={styles.flex}>
          <TextInput style={styles.input} returnKeyType="search"/>
        </View>
        <View style={styles.btn}>
          <Text style={styles.search}>搜索</Text>
        </View>
      </View>
    );
  }
});

var TI = React.createClass ({
  render:function() {
    return (
      <View style={[styles.flex, styles.topStatus]}>
        <Search></Search>
      </View>
    );
  }
});

var styles = StyleSheet.create ({
  flex: {
    flex:1
  },
  flexDirection: {
    flexDirection:'row'
  },
  btn: {
    width:55,
    marginLeft:-5,
    marginRight:5,
    backgroundColor:'#23BEFF',
    height:45,
    justifyContent:'center',
    alignItems:'center'
  },
  input: {
    height:45,
    borderWidth:1,
    marginLeft:5,
    paddingLeft:5, //TextInput輸入內容相對外邊框起點
    borderColor:'#ccc',
    borderRadius:4
  },
  search: {
    color:'#fff',
    fontSize:15,
    fontWeight:'bold'
  },
  topStatus: {
    marginTop:25
  }
});

AppRegistry.registerComponent('InformationServicesRN', () => TI);

2.自動提示列表

var onePT = 1 / React.PixelRatio.get();
var Search = React.createClass ({

  getInitialState:function() {
    return {
      show:false
    };
  },
  getValue:function(text) {
    var value = text;
    this.setState({
      show:true,
      value:value
    });
  },
  hide:function(val) {
    this.setState({
      show:false,
      value:val
    });
  },

  render:function() {
    return (
      <View style={styles.flex}>
      <View style={[styles.inputHeight, styles.flexDirection]}>
        <View style={styles.flex}>
          <TextInput style={styles.input}
                     returnKeyType="search"
                     placeholder="請輸入關鍵字"
                     onEndEditing={this.hide.bind(this, this.state.value)}
                     value={this.state.value}
                     onChangeText={this.getValue}/>
        </View>
        <View style={styles.btn}>
          <Text style={styles.search}
                 onPress={this.hide.bind(this, this.state.value)}>搜索</Text>
        </View>
      </View>

      {this.state.show ?
        <View style={styles.result}>
          <Text onPress={this.hide.bind(this, this.state.value + '莊')}
                style={styles.item}
                numberOfLines={1}>{this.state.value}莊</Text>
          <Text onPress={this.hide.bind(this, this.state.value + '園街')}
                style={styles.item}
                numberOfLines={1}>{this.state.value}園街</Text>
          <Text onPress={this.hide.bind(this, 80 + this.state.value + '綜合商店')}
                style={styles.item}
                numberOfLines={1}>80{this.state.value}綜合商店</Text>
          <Text onPress={this.hide.bind(this, this.state.value + '桃')}
                style={styles.item}
                numberOfLines={1}>{this.state.value}桃</Text>
          <Text onPress={this.hide.bind(this, '楊林' + this.state.value + '園')}
                style={styles.item}
                numberOfLines={1}>楊林{this.state.value}園</Text>
        </View>
        : null
      }
      </View>
    );
  },
});

樣式：

item: {
    fontSize:16,
    padding:5,
    paddingTop:10,
    paddingBottom:10,
    borderWidth:onePT,
    borderColor:'#ddd',
    borderTopWidth:onePT
  },
  result: {
    marginTop:onePT,
    marginLeft:5,
    marginRight:5,
    height:200,
    borderColor:'#ccc',
    borderTopWidth:onePT,
    // backgroundColor:'red'
  }