'use strict';
import React, {Component} from 'react';
import {StyleSheet, View, Text, TextInput, Dimensions} from 'react-native';
const win = Dimensions.get('window');
export default class SearchInputView extends Component {
constructor(props) {
super(props);
this.state = {
show: false,
};
}
getValue(val) {
this.setState({
show: (val) ? true : false,
value: val
});
}
hide(val) {
this.setState({
show: false,
value: val, true
});
}
render() {
return (
<View>
<View style={[styles.inputStyle,styles.flexDirection]}>
<View style={[styles.flex,styles.searchInput]}>
<TextInput
style={{textAlign:'center'}}
returnKeyType="search"
placeholder="搜索"
// onEndEditing={}
value={this.state.value}
onChangeText={this.getValue.bind(this)}
/>
</View>
</View>
{
this.state.show ?
<View style={[styles.result]}>
<View style={styles.resultItem}>
<Text
style={styles.resultItemFont}
numberOfLines={1}
onPress={this.hide.bind(this,this.state.value+'庄')}
>{this.state.value}庄</Text>
</View>
<View style={styles.resultItem}>
<Text
style={styles.resultItemFont}
numberOfLines={1}
onPress={this.hide.bind(this,this.state.value+'园街')}
>{this.state.value}园街</Text>
</View>
<View style={styles.resultItem}>
<Text
style={styles.resultItemFont}
numberOfLines={1}
onPress={this.hide.bind(this,'80'+this.state.value+'综合商店')}
>80{this.state.value}综合商店</Text>
</View>
<View style={styles.resultItem}>
<Text
style={styles.resultItemFont}
numberOfLines={1}
onPress={this.hide.bind(this,this.state.value+'桃')}
>{this.state.value}桃</Text>
</View>
<View style={styles.resultItem}>
<Text
style={styles.resultItemFont}
numberOfLines={1}
onPress={this.hide.bind(this,'杨林'+this.state.value+'园')}
>杨林{this.state.value}园</Text>
</View>
</View>
: null
}
<View>
<Text>321312</Text>
<Text>321312</Text>
<Text>321312</Text>
<Text>321312</Text>
</View>
</View>
);
}
}
var styles = StyleSheet.create({
flex: {
flex: 1,
},
inputStyle: {
backgroundColor: '#CCC',
},
flexDirection: {
flexDirection: 'row',
},
searchInput: {
height: 45,
borderWidth: 1,
marginLeft: 10,
marginRight: 10,
marginTop: 5,
marginBottom: 5,
borderColor: '#CCC',
borderRadius: 5,
backgroundColor: '#FFF',
},
result: {
width: win.width,
borderColor: "#DDD",
borderTopWidth: 1,
position: 'absolute',
left: 0,
top: 55,
zIndex: 1,
},
resultItem: {
paddingLeft: 10,
paddingRight: 10,
paddingTop: 5,
paddingBottom: 5,
borderWidth: 1,
borderColor: '#DDD',
borderTopWidth: 0,
backgroundColor: '#FFF',
},
resultItemFont: {
fontSize: 16,
}
});
搜索结果是通过this.state.show来控制的。。
当点击搜索结果的任意一个发现显示的文档会少一个。
然后再点击搜索结果没有任何反应,说明只能点击一次。
<View>
<Text>321312</Text>
<Text>321312</Text>
<Text>321312</Text>
<Text>321312</Text>
</View>
不加这些321312的文档的话,搜索结果可以点击很多次并且添加到input中。。好多坑。。。我受不了咧。