//利用FlatList與TextInput實(shí)現(xiàn)時(shí)時(shí)搜索查詢

 import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ScrollView,
  Dimensions,
  TextInput,
  FlatList,
  TouchableOpacity
} from 'react-native';
var  NumberArr = [{name:'1',city:'北京'},{name:'2',city:'上海'},{name:'3',city:'深圳'},{name:'4',city:'廣州'},{name:'5',city:'杭州'},{name:'6',city:'蘇州'},{name:'7',city:'滄州'},{name:'8',city:'邢臺'},{name:'9',city:'邯鄲'},{name:'10',city:'保定'},{name:'11',city:'石家莊'},{name:'12',city:'山東'},{name:'13',city:'濰坊'},{name:'14',city:'錦州'},{name:'15',city:'固州'},{name:'16',city:'西安'},{name:'17',city:'袁州'},{name:'18',city:'江西'},{name:'19',city:'承德'},{name:'20',city:'秦皇島'},{name:'21',city:'唐山'},{name:'22',city:'廊坊'},{name:'23',city:'呂梁'},{name:'24',city:'衡水'},{name:'25',city:'山西'},{name:'26',city:'太原'},{name:'27',city:'朔州'},{name:'28',city:'大同'},{name:'29',city:'陽泉'},{name:'30',city:'長治'},{name:'31',city:'晉城'},{name:'32',city:'忻州'},{name:'33',city:'晉中'},{name:'34',city:'臨汾'},{name:'35',city:'運(yùn)城'},{name:'35',city:'包頭'},{name:'37',city:'烏海'},{name:'38',city:'赤峰'},{name:'39',city:'沈陽'},{name:'40',city:'通遼'},{name:'41',city:'朝陽'},{name:'42',city:'阜新'},{name:'43',city:'撫順'},{name:'44',city:'本溪'},{name:'45',city:'遼陽'},{name:'46',city:'鞍山'},{name:'47',city:'丹東'},{name:'48',city:'大連'},{name:'49',city:'營口'},{name:'50',city:'盤錦'},{name:'51',city:'白城'},{name:'52',city:'長春'},{name:'53',city:'吉林'},{name:'54',city:'四平'},{name:'55',city:'遼源'},{name:'56',city:'大慶'},{name:'57',city:'鶴崗'},{name:'58',city:'伊春'},{name:'59',city:'南京'},{name:'60',city:'雞西'},{name:'61',city:'徐州'},{name:'62',city:'綏化'},{name:'63',city:'宿遷'},{name:'64',city:'淮安'},{name:'65',city:'揚(yáng)州'},{name:'66',city:'泰州'},{name:'67',city:'南通'},{name:'68',city:'鎮(zhèn)江'},{name:'69',city:'常州'},{name:'70',city:'無錫'}];

export default class MyMap extends Component {
  constructor(props) {
    super(props);
  
    this.state = {
       NumberArr:[{name:'1',city:'北京'},{name:'2',city:'上海'},{name:'3',city:'深圳'},{name:'4',city:'廣州'},{name:'5',city:'杭州'},{name:'6',city:'蘇州'},{name:'7',city:'滄州'},{name:'8',city:'邢臺'},{name:'9',city:'邯鄲'},{name:'10',city:'保定'},{name:'11',city:'石家莊'},{name:'12',city:'山東'},{name:'13',city:'濰坊'},{name:'14',city:'錦州'},{name:'15',city:'固州'},{name:'16',city:'西安'},{name:'17',city:'袁州'},{name:'18',city:'江西'},{name:'19',city:'承德'},{name:'20',city:'秦皇島'},{name:'21',city:'唐山'},{name:'22',city:'廊坊'},{name:'23',city:'呂梁'},{name:'24',city:'衡水'},{name:'25',city:'山西'},{name:'26',city:'太原'},{name:'27',city:'朔州'},{name:'28',city:'大同'},{name:'29',city:'陽泉'},{name:'30',city:'長治'},{name:'31',city:'晉城'},{name:'32',city:'忻州'},{name:'33',city:'晉中'},{name:'34',city:'臨汾'},{name:'35',city:'運(yùn)城'},{name:'35',city:'包頭'},{name:'37',city:'烏海'},{name:'38',city:'赤峰'},{name:'39',city:'沈陽'},{name:'40',city:'通遼'},{name:'41',city:'朝陽'},{name:'42',city:'阜新'},{name:'43',city:'撫順'},{name:'44',city:'本溪'},{name:'45',city:'遼陽'},{name:'46',city:'鞍山'},{name:'47',city:'丹東'},{name:'48',city:'大連'},{name:'49',city:'營口'},{name:'50',city:'盤錦'},{name:'51',city:'白城'},{name:'52',city:'長春'},{name:'53',city:'吉林'},{name:'54',city:'四平'},{name:'55',city:'遼源'},{name:'56',city:'大慶'},{name:'57',city:'鶴崗'},{name:'58',city:'伊春'},{name:'59',city:'南京'},{name:'60',city:'雞西'},{name:'61',city:'徐州'},{name:'62',city:'綏化'},{name:'63',city:'宿遷'},{name:'64',city:'淮安'},{name:'65',city:'揚(yáng)州'},{name:'66',city:'泰州'},{name:'67',city:'南通'},{name:'68',city:'鎮(zhèn)江'},{name:'69',city:'常州'},{name:'70',city:'無錫'}],
    };
  }
  //改變搜索的文本
  onChanegeTextKeyword(text){

       this.timeA(text);
  }
  //利用防抖方式防止數(shù)據(jù)過大造成卡頓現(xiàn)象
  timeA(text){
    
     if(this.time){
       clearTimeout(this.time)
     }
     
     this.time = setTimeout(()=>{
              if (text==='') {
                    this.setState({
                      NumberArr:NumberArr,
                      });
                    return;
             }else{
                  for (var i = 0; i < NumberArr.length; i++) {
                     if (NumberArr[i].city===text) {
                          this.setState({
                               NumberArr:[NumberArr[i]],
                          });
                      return;
              }else{
                   this.setState({
                         NumberArr:[],
                    });
              }
         }
       }
      },500);
      
  }
  //點(diǎn)擊城市cell
  cityClicked(item){
    alert(item.city);
  }
  //列表的每一行
  renderItemView({item,index}){
    return(
      <TouchableOpacity style={{flex:1,
                                height:60,
                                backgroundColor:'orange',
                        }}
                        onPress={()=>{this.cityClicked(item)}}
                       >
        <View style={{backgroundColor:'green',
                      height:59,justifyContent: 'center',
                      alignItems: 'center'}}>
           <Text>{item.city}</Text>
        </View>
      </TouchableOpacity>
    );
  }
  //去除警告
  extraUniqueKey(item,index){
    return index+item;
  }
  render() {
     //給數(shù)據(jù)追加一個(gè)key的字段，不然會有警告的,參數(shù)數(shù)組中的每一項(xiàng)，需要包含 key 值作為唯一標(biāo)示
    for (var i = 0; i < NumberArr.length; i++) {
       NumberArr[i]['key'] = i;
    }
    return (
       <View style={styles.container}>
         <TextInput style={{height:50,borderColor:'red',borderWidth:1,marginTop:64}}
                    underlineColorAndroid="transparent"
                    maxLength={20} 
                    placeholder={'輸入城市名查詢'}
                    onChangeText={this.onChanegeTextKeyword.bind(this)}>
           
         </TextInput>
         <FlatList style={{backgroundColor:'orange',flex:1}}
                   data = {this.state.NumberArr}
                   renderItem={this.renderItemView.bind(this)}
                   keyExtractor = {this.extraUniqueKey}//去除警告
                  >
           
        </FlatList>
       </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});

AppRegistry.registerComponent('MyMap', () => MyMap);

效果圖如下

QQ20170821-220650-HD.gif