React Native之TextInput组件实现联想输入
发布时间:2020-12-15 07:19:50 所属栏目:百科 来源:网络整理
导读:TextInput组件是最基本的组件,相关介绍请查看TextInput组件介绍 输入框组件属性 输入框组件的主要属性如下: autoCapitalize : 枚举类型,可选值有none,sentences,words,characters.当用户输入时,用于提示。 placeholder:占位符,在输入前显示的文本内容
TextInput组件是最基本的组件,相关介绍请查看TextInput组件介绍 输入框组件属性输入框组件的主要属性如下:
实例在实际开发中,我们经常会碰到联想输入的情况,有的是结合后台返回的,有的是本地联想的。那么今天我们看一个联想输入的例子: /** * 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;
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |