使用ListView reactNative搜索过滤器

时间:2019-05-07 17:55:04

标签: react-native listview axios searchbar

hii我仍然是本机反应的新手,我试图在listview中实现搜索而不重新获取数据(按名称搜索) 就像搜索我第一次获取的json文件一样 我如何使它起作用?我遵循了许多教程,但仍然无法做到listView始终为空 这是我的代码,希望我能找到解决方案

import React, { Component } from "react";
import { View, Text, Image, ListView } from "react-native";
import axios from "axios";
import { SearchButton } from "./utilities/SearchButton";
import SearchBar from "react-native-searchbar";
class SearchScreen extends Component {
  constructor(props) {
    super(props);
    this.ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });
    this.state = {
      doctors: [],
      specefic: []
    };
  }
  componentWillMount() {
    this.fetchdata();
  }
  fetchdata = () => {
    axios
      .get("http://localhost:3000/api/Doctor")
      .then(response => this.setState({ doctors: response.data }));
  };
  static navigationOptions = ({ navigation }) => {
    return {
      headerRight: <SearchButton navigation={navigation} />
    };
  };

  render() {
    return (
      <View>
        <View>
          <SearchBar
            ref={ref => (this.props.navigation.searchBar = ref)}
            data={this.state.doctors}
            handleResults={results => {
              this.setState({ specefic: results });
            }}
            iOSPadding={false}
            allDataOnEmptySearch={true}
            fontSize={23}
            hideBack={true}
            heightAdjust={-5}
          />
        </View>
        <View>
          <ListView
            enableEmptySections={true}
            dataSource={this.ds.cloneWithRows(this.state.doctors)}
            renderRow={service => {
              return (
                <View style={styles.box}>
                  <Image
                    style={styles.image}
                    source={{ uri: service.profileImageUrl }}
                  />
                  <View style={styles.boxContent}>
                    <Text style={styles.title}>{service.nom}</Text>
                    <Text style={styles.description}>{service.email}</Text>
                  </View>
                </View>
              );
            }}
          />
        </View>
      </View>
    );
  }
}

export default SearchScreen;


0 个答案:

没有答案