123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125 |
- import React, {Component} from 'react';
- import {StyleSheet, Text, View, TextInput, PixelRatio} from 'react-native';
- //输入框组件
- export default class search_bar extends Component {
- //构造函数
- constructor(props) {
- super(props);
- this.state = {text: '', show: false};
- }
- //组件渲染
- render() {
- return (
- <View style={styles.flex}>
- <View style={[styles.flexDirection, styles.inputHeight]}>
- <View style={styles.flex}>
- <TextInput
- style={styles.input}
- returnKeyType="search"
- placeholder="请输入关键字"
- value={this.state.text}
- onChangeText={this.textChange.bind(this)}
- />
- </View>
- <View style={styles.btn}>
- <Text
- style={styles.search}
- onPress={() => this.props._searchData(this.state.text)}>
- 搜索
- </Text>
- </View>
- </View>
- {/*{this.state.show?*/}
- {/* <View style={styles.list}>*/}
- {/* <Text onPress={this.hideList.bind(this, this.state.text + '网站')}*/}
- {/* style={styles.item} numberOfLines={1}>{this.state.text}网站</Text>*/}
- {/* <Text onPress={this.hideList.bind(this, this.state.text + '文章')}*/}
- {/* style={styles.item} numberOfLines={1}>{this.state.text}文章</Text>*/}
- {/* <Text onPress={this.hideList.bind(this, this.state.text + '最新消息')}*/}
- {/* style={styles.item} numberOfLines={1}>{this.state.text}最新消息</Text>*/}
- {/* </View>*/}
- {/* : null*/}
- {/*}*/}
- </View>
- );
- }
- //输入框文字改变
- textChange(text) {
- this.setState({
- show: text != '' ? true : false,
- text: text,
- });
- }
- //隐藏自动提示列表
- hideList(text) {
- this.setState({
- show: false,
- text: text,
- });
- }
- //搜索按钮点击
- search() {
- alert('您输入的内容为:' + this.state.text);
- }
- }
- //样式定义
- const styles = StyleSheet.create({
- flex: {
- height: 50,
- flexGrow: 1,
- },
- flexDirection: {
- flexDirection: 'row',
- },
- topStatus: {
- marginTop: 15,
- },
- inputHeight: {
- height: 45,
- },
- input: {
- height: 45,
- borderWidth: 1,
- marginLeft: 5,
- paddingLeft: 5,
- borderColor: '#ccc',
- borderRadius: 4,
- },
- btn: {
- width: 55,
- marginLeft: -5,
- marginRight: 5,
- backgroundColor: '#23BEFF',
- height: 45,
- justifyContent: 'center',
- alignItems: 'center',
- },
- search: {
- color: '#fff',
- fontSize: 15,
- fontWeight: 'bold',
- },
- // list:{
- // marginTop: 1/PixelRatio.get(),
- // marginLeft:5,
- // marginRight:5,
- // height:200,
- // borderColor:'#ccc',
- // borderTopWidth: 1/PixelRatio.get(),
- // },
- // item:{
- // fontSize:16,
- // padding:5,
- // paddingTop:10,
- // paddingBottom:10,
- // borderWidth: 1/PixelRatio.get(),
- // borderColor:'#ddd',
- // borderTopWidth:0,
- // }
- });
|