React Native-8.React Native TextInput组件详解
TextInput组件介绍输入框组件的主要属性如下:
我们来做一个小实例看图: 由于我们没有具体的搜索接口,所以,我们写成模拟的,追求个界面 'use strict';
var React = require('react-native');
var {
AppRegistry,StyleSheet,Text,View,PixelRatio,TextInput,} = React;
var styles = StyleSheet.create({
flex: {
flex: 1,},green : {
backgroundColor: 'cd2d1c'
},flexDirection: {
flexDirection: 'row',topStaus: {
marginTop:25,inputHeight: {
height: 45,inputs: {
height: 45,borderWidth: 1,marginLeft: 5,paddingLeft: 5,borderColor: '#CCC',borderRadius: 4,btn: {
width: 55,marginLeft: -5,marginRight: 5,backgroundColor: '#23bfff',height: 45,justifyContent: 'center',alignItems: 'center',search: {
color: '#fff',fontSize: 15,fontWeight: 'bold',result: {
marginTop: 1,height:200,borderColor: '#ccc',borderTopWidth: onePT,item: {
fontSize: 16,padding: 5,paddingTop: 10,paddingBottom: 10,borderWidth: onePT,borderColor: '#ddd',borderTopWidth: 0,}
});
var onePT = 1 / React.PixelRatio.get(); //一个像素
var Search = React.createClass({
//初始化方法
getInitialState: function(){
return{
show: false
};
},//获取value值调用的方法
getValue: function(text) {
var value = text;
this.setState({
show: true,value: value
});
},//隐藏
hide: function(val){
this.setState({
show: false,value: val
});
},render:function(){
return(
<View style = {[styles.flex]}>
<View style={[styles.flexDirection,styles.inputHeight]}>
<View style = {styles.flex}>
<TextInput style = {styles.inputs}
returnKeyType = "search"
placeholder= "请输入搜索关键字"
onEndEditing = {this.hide.bind(this,this.state.value)}
value = {this.state.value}
onChangeText = {this.getValue}/>
</View>
<View style = {styles.btn}>
<Text style = {styles.search} onPress = {this.hide.bind(this,this.state.value)}>搜索</Text>
</View>
</View>
//结果列表
{this.state.show?
<View style = {[styles.result]}>
<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>
<Text onPress = {this.hide.bind(this,'办公' + this.state.value + '大厦')}
style = {styles.item}
numberOfLines = {1}>办公{this.state.value}大厦</Text>
</View>
:null
}
</View>
);
}
});
var wxsPrj = React.createClass({
render: function() {
return (
<View style = {[styles.flex,styles.topStaus]}>
<Search/>
</View>
);
}
})
AppRegistry.registerComponent('wxsPrj',() => wxsPrj);
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |