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,
borderWidth: 1,
marginLeft:15,
borderColor: '#dddddd',
borderTopWidth: 0,
}
});

export default TextInputView;