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