React Native（iOS）新手小白零基础自学（四）TextInput组件

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 (
      
        
          
        
        
          搜索
        
      
    );
  }
});

var TI = React.createClass ({
  render:function() {
    return (
      
        
      
    );
  }
});

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 (
      
      
        
          
        
        
          搜索
        
      

      {this.state.show ?
        
          {this.state.value}庄
          {this.state.value}园街
          80{this.state.value}综合商店
          {this.state.value}桃
          杨林{this.state.value}园
        
        : null
      }
      
    );
  },
});

样式：

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