TextInput组件是最基本的组件,相关介绍请查看TextInput组件介绍
输入框组件的主要属性如下:
在实际开发中,我们经常会碰到联想输入的情况,有的是结合后台返回的,有的是本地联想的。那么今天我们看一个联想输入的例子:
我们通过给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;