React Native之TextInput组件实现联想输入

TextInput组件是最基本的组件，相关介绍请查看TextInput组件介绍

输入框组件属性

输入框组件的主要属性如下：

• autoCapitalize :
  枚举类型，可选值有none,sentences,words,characters.当用户输入时，用于提示。
• placeholder：占位符，在输入前显示的文本内容。
• value ： 文本输入框的默认值。
• placeholdertTextColor : 占位符文本颜色。
• password ： 如果为ture ， 则是密码输入框，文本显示为＊＊＊。
• multiline ： 如果为true ， 则是多行输入。
• editable ： 如果为false ， 文本框不可输入。其默认值事true。
• autoFocus : 如果为true， 将自动聚焦。
• clearButtonMode : 枚举类型，可选值有never，while－enditing,
  unless-editing,always.用于显示清除按钮。
• maxLength : 能够输入的最长字符数。
• enablesReturnKeyAutomatically :
  如果值为true，表示没有文本时键盘是不能有返回键的。其默认值为false。
• returnKeyType :
  表示软键盘返回键显示的字符串。枚举类型，可选值有default,go,google,join,next,route,search,send,yahoo,done,emergency-call。
• onChangeText : 当文本输入框的内容发生变化时，调用该函数。
• onChangeText接收一个文本的参数对象。
• onChange : 当文本变化时，调用该函数。
• onEndEditing : 当结束编辑时，调用该函数。
• onBlur : 失去焦点出发事件。
• onFocus : 获得焦点出发事件。
• onSubmitEditing : 当结束编辑后，点击键盘的提交按钮出发该事件。

实例

在实际开发中，我们经常会碰到联想输入的情况，有的是结合后台返回的，有的是本地联想的。那么今天我们看一个联想输入的例子：

我们通过给TextInput绑定onChangeText监听事件，从而实现联想功能。

/** * Sample React Native App * https://github.com/facebook/react-native * @flow TextInput自动提示输入 */

 import React,{ Component } from 'react';
 import {
   AppRegistry,StyleSheet,Text,Image,TextInput,View
 } from 'react-native';

 var Dimensions = require('Dimensions');
 var ScreenWidth = Dimensions.get('window').width;

class TextInputView extends Component {

  //构造函数
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

   //隐藏
    hide(val){
        this.setState({
            show: false,value: val
        });
    }

    //获取value值调用的方法
    getValue(text) {
        var value = text;
        this.setState({
            show: true,value: value
        });
    }

   render() {
     return (
       <View style={styles.container}>
       <TextInput style = {styles.styleInput}
          returnKeyType = "search"
          placeholder= "请输入搜索关键字"
          onEndEditing = {this.hide.bind(this,this.state.value)}
          value = {this.state.value}
          onChangeText = {this.getValue.bind(this)}/>

          <Text style={styles.styleText}>搜索结果：</Text>

         {this.state.show?
          <View style = {[styles.styleResult]}>
          <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,111 + this.state.value + '超市')}
            style = {styles.item}
            numberOfLines = {1}>111{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>
     );
    }
  }

 const styles = StyleSheet.create({
   container: {
     flex: 1,backgroundColor:'#ffffff',marginTop:20
   },styleInput: {
     height: 40,borderWidth: 1,marginLeft: 10,marginRight:10,paddingLeft: 5,borderColor: '#cccccc',borderRadius: 4,},styleResult: {
    marginTop: 10,marginLeft: 15,styleText: {
     fontSize: 18,marginTop:10,marginLeft:15
   },styleItem: {
    fontSize: 20,padding: 5,paddingTop: 10,paddingBottom: 10,marginLeft:15,borderColor: '#dddddd',borderTopWidth: 0,}
 });

export default TextInputView;