TextInput 類(lèi)似于iOS的UITextField，也是常用控件惋戏。先簡(jiǎn)單介紹一下基本屬性：

      autoCapitalize: 枚舉類(lèi)型，可選值有'none'表鳍、'sentences'骇窍、‘words’、‘characters’包吝，當(dāng)用戶(hù)輸入時(shí)用于提示
      placeholder：占位符饼煞，在輸入前顯示的文本
      value：文本輸入框的默認(rèn)值
      placeholderTextColor：占位符文本的顏色
      password：如果為true，則是密碼輸入框诗越，文本顯示為‘*’
      multiline：如果為true砖瞧，則是多行輸入
      editable：如果為false，文本框不可輸入嚷狞，默認(rèn)為true
      autoFocus：如果為true块促，將自動(dòng)聚焦
      clearButtonMode：枚舉類(lèi)型，可選值有‘never’床未、‘while-editing’竭翠、‘unless-editing’、‘a(chǎn)lways’薇搁，用以顯示清除按鈕
      maxLength：能夠輸入的最長(zhǎng)字符數(shù)
      enablesReturnKeyAutomatically：如果值為true斋扰，表示沒(méi)有文本時(shí)鍵盤(pán)是不能有返回鍵的，默認(rèn)為false
      returnKeyType：枚舉類(lèi)型，可選值有‘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輸入內(nèi)容相對(duì)外邊框起點(diǎn)
    borderColor:'#ccc',
    borderRadius:4
  },
  search: {
    color:'#fff',
    fontSize:15,
    fontWeight:'bold'
  },
  topStatus: {
    marginTop:25
  }
});

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

2.自動(dòng)提示列表

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="請(qǐng)輸入關(guān)鍵字"
                     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'
  }