react-native - 使用 ListView reactNative 搜索过滤器

Question

嗨，我还是 react-native 的新手，我正在尝试在列表视图中实现搜索而不重新获取数据（按名称搜索），比如搜索我第一次获取的 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;

标签： react-nativelistviewaxiossearchbar