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; 举报
腾讯云开发者
