搜索页面

如图的搜索页面

1. 搜索后添加最近搜索

2. 删除历史搜索

3.模糊查询

4 点击历史标签，自动填充输入框

5 接收到搜索结果后 隐藏历史搜索

6 空格搜索不计入历史

头部搜索条组件

import {
    StyleSheet,
    View,
    Text,
    Image,
    AsyncStorage,
    TextInput,
    TouchableOpacity, Dimensions, Button, FlatList, Platform
} from 'react-native';
import i18n from '../util/I18n'
import React, {Component} from 'react';
import NetUtil from '../util/net/NetUtil'
const {width, height} = Dimensions.get('window');


const SearchTopBar = (back) => {
    console.log(back)
    return (
        <View style={styles.container}>
            <TouchableOpacity style={{width: 60, height: 23, flexDirection: 'row', justifyContent: 'center'}}
                              onPress={() => back.back.goBack()}>
                <Image source={require('../image/common/btn_back.png')} style={styles.back}/>
            </TouchableOpacity>
            <View style={{backgroundColor: '#dad9d9', flexDirection: "row", borderRadius: 4,}}>
                <TextInput
                    underlineColorAndroid="transparent"
                    onChangeText={(text) => back.getText(text)}
                    style={styles.input}
                    placeholderTextColor="#9b9b9b"
                    placeholder={i18n.t('搜索内容')}
                    value={back.value}
                />
                <TouchableOpacity onPress={
                    back.textPush
                }>
                    <Image source={require('../image/zoom.png')} style={styles.back}/>
                </TouchableOpacity>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        marginTop: Platform.OS === 'ios' ? 20 : 20,
        flexDirection: 'row',
        width: width,
        height: 44,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 0,
    },
    back: {
        width: 17,
        height: 16,
        marginTop: 3.5,
        marginRight: 5
    },
    input: {
        width: 273,
        height: 23,
        padding: 0,
        textAlign: 'center'
    }
});
export default SearchTopBar

主体页面

import React, {Component} from 'react';
import {View, Text, StyleSheet, TouchableOpacity,Dimensions,Image,FlatList,ListView} from 'react-native';
import SearchTopBar from '../component/SearchTopBar'
import i18n from '../util/I18n'
import Bhpx from "../util/Bhpx";
import Button from 'react-native-button';
import NetUtil from "../util/net/NetUtil";
const {width, height} = Dimensions.get('window');

const styles = StyleSheet.create({
    container: {
        flex: 1,
        //alignItems: 'center',
        // justifyContent: 'center',
    },
    dialogContentView: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    navigationBar: {
        borderBottomColor: '#b5b5b5',
        borderBottomWidth: 0.5,
        backgroundColor: '#ffffff',
    },
    navigationTitle: {
        padding: 10,
    },
    navigationButton: {
        padding: 10,
    },
    navigationLeftButton: {
        paddingLeft: 20,
        paddingRight: 40,
    },
    navigator: {
        flex: 1,
        // backgroundColor: '#000000',
    },
    len: {
        marginVertical: 2,
        width: width,
        backgroundColor: '#000',
        height: 0.5
    },
    row:{
        flexDirection:'row',
        height:Bhpx(48),
        alignItems:'center'
    },
    label:{
        paddingVertical:Bhpx(4),paddingHorizontal:Bhpx(8),
        borderRadius:2,
        borderColor:'#979797',
        borderWidth:1,
        color:'#9B9B9B',
        fontSize:Bhpx(16),
        marginTop:Bhpx(12),
        marginLeft:Bhpx(42)
    }
});
var ee = [{name: '0000'}]
export default class SearchScreen extends Component {
    static navigationOptions = {
        header: null,
    };
    tt=''
    tempArray=[]
    state={
        historySearch:[],
        ready:false,
        searchResult:[],
        hide:true,
        value:''
    }
    onClickSearch = () => {

    }
    //搜索商品 get eshopId=2 (查询失败data=null)
    componentDidMount() {
        global.storage.load({
            key: 'historySearch',
            autoSync: false
        }).then(result => {
            this.tempArray=result
            this.setState({
                historySearch:result,
                ready:true
            })
            console.log(result)
        }).catch(e => {
            console.log('获取失败')
        })
    }
    render() {
        return (
            <View style={styles.container}>
                <SearchTopBar back={this.props.navigation} getText={this.getText} textPush={this.textPush} value={this.state.value}/>
                <View style={styles.len}></View>
                {  this.state.hide?
                    <View>
                        <View style={styles.row}>
                            <Text style={{marginLeft:Bhpx(8),height:Bhpx(48),fontSize:Bhpx(16),textAlignVertical:'center',color:'#9B9B9B'}}>最近搜索</Text>
                            <View style={{flex:1}}></View>
                            <TouchableOpacity onPress={this.remove}>
                                <Image source={require('../image/bin.png')} style={{width:16,height:16,marginRight:Bhpx(16)}}/>
                            </TouchableOpacity>
                        </View>
                        {this.historyList()}
                    </View>
                    :null
                }
                <View>
                    <FlatList
                        style={{height:height-80}}
                        horizontal={false}
                        numColumns={2}
                        data={this.state.searchResult}
                        renderItem={this.searchResultItem}
                        />
                </View>
            </View>
        )
    }
    searchResultItem=(item)=>{
        console.log(item)
        return(
            <TouchableOpacity style={{marginLeft:(width-300)/3,marginTop:8}}>
                <Image style={{width:150,height:150}} source={{uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1515395638&di=c34193e6c6eabc741282c00953c45733&src=http://static.chinacaipu.com/uploads/img/a/41446168454.jpg'}}/>
                <View style={{paddingHorizontal:8,width:150,backgroundColor:'#F8F8F8'}}>
                    <Text style={{textAlignVertical:'center',fontSize:Bhpx(18),color:'#4a4a4a'}}>{item.item.productName}</Text>
                    <Text style={{textAlignVertical:'center',fontSize:Bhpx(12),color:'#9b9b9b'}}>({item.item.categoryName})</Text>
                    <Text style={{textAlignVertical:'center',fontSize:Bhpx(12),color:'#4a4a4a'}}>{item.item.eshopProductDesc}</Text>
                    <Text style={{textAlignVertical:'center',fontSize:Bhpx(16),color:'#f5a623'}}>{item.item.eshopProductPrice}元/kg</Text>
                </View>

            </TouchableOpacity>

        )
    }
    historyList=()=>{
        return(
            <View style={{flexDirection:'row', flexWrap: "wrap",width:width,paddingRight:Bhpx(42)}}>
                {this.state.historySearch.map((i)=>{
                    return(
                    <Text style={styles.label} onPress={()=>{
                        console.log()
                        this.setState({
                            value:i
                        })
                    }}>{i}</Text>
                    )
                })}
            </View>
        )
    }
    getText=(text)=>{
        this.setState({value: text});
    }
    fetchData=(text)=>{
        NetUtil.get('/borderbuyer/eshop/serchproduct?serch='+text+'&page=0&size=8',(body) => {
            console.log(body)
            this.setState({
                searchResult:body.data.products
            })
        },(e) => {
            if (e) {
                alert('删除失败' + JSON.stringify(e));
            }
        })
    }
    textPush=()=>{
        let repeat=1
        //非空

        if(this.state.value.trim()!=''){
            //去重
            this.tempArray.forEach((i)=>{
                if(i==this.state.value){
                    repeat *=0
                }
            })
            //推进
        if(repeat){
            this.tempArray.push(this.state.value.concat())
        }
        if(this.tempArray.length>10){
            this.tempArray.shift()
        }
            //存
            global.storage.save({
                key: 'historySearch',
                data: this.tempArray,
                expires: null
            })
            //设置状态
            global.storage.load({
                key: 'historySearch',
                autoSync: false
            }).then(result => {
                this.setState({
                    historySearch:result,
                    hide:false
                })
            }).catch(e => {
                console.log('获取失败')
            })
            this.fetchData(this.state.value)
        }
    }
    remove=()=>{
        global.storage.save({
            key: 'historySearch',
            data: [],
            expires: null
        })
        this.tempArray=[]
        global.storage.load({
            key: 'historySearch',
            autoSync: false
        }).then(result => {
            this.setState({
                historySearch:result
            })
        }).catch(e => {
            console.log('获取失败')
        })
    }
}