react-native 电商搜索界面

react-native 电商搜索界面

此界面实现了搜索，自动补全搜索内容，热门搜索，搜索历史记录，清除搜索历史记录等功能，欢迎大家使用

import React from 'react';
import {
    AppRegistry,
    Text,
    View,
    Button,
    StyleSheet,
    ScrollView,
    Image,
    TextInput,
    Dimensions,
    TouchableOpacity,
      PixelRatio,

} from 'react-native';

import {getsearchinitdata} from "../network/interface";
import AutoSearch from './childComponents/autoSearch'
import axios from 'axios';
import DeviceStorage from '../commen/DeviceStorage';

//获取屏幕的宽度
var {height, width} = Dimensions.get('window');


class Search extends React.Component {
    static navigationOptions = {
        title: 'Search',
    };
    constructor(props){
        super(props);
        this.state={
            historyKeyword: [],            
            defaultKeyword: {},
            hotKeyword: [],
            
             text: '',
            show: false,
            textlist:[],
        }
    };

     //输入框文字改变
    textChange(text){
        console.log(text)
       axios(`https://suggest.taobao.com/sug?code=utf-8&q=${text}`).then(responseJSON=>{
            console.log('11')
            var data=JSON.parse(responseJSON.request._response);

           this.setState({
               show: true,
               text:text,
               textlist: data.result
           });
       })
            .catch(error=>{
                console.log('22')
                console.log(error)})
        console.log('123')


    }

    //隐藏自动提示列表
    hideList(text){
        console.log('hideList')
       // alert("您输入的内容为："+text);

       this.setState({
            show: false,
            text:text
        });
        setTimeout(()=>{ this.search();},500)//一秒之后自动搜索，不需点击搜索键


    }

    //搜索按钮点击
    search(){
        //搜索之前先存储数据
        //先判断此记录之前是否存在过
        let kw=this.state.historyKeyword;
        let tx=this.state.text;
        console.log(kw.indexOf(tx))
        if(kw.ind