React native 在搜索栏中输入文本不会过滤掉姓名

我是RN的新手，我刚刚使用react原生元素在我的目录页面中创建了一个搜索栏。但是，当我在搜索栏中键入角色名称时，不会触发任何内容。我认为我的状态设置正确，因为我遵循了文档。有人能看看这一点，并阐明可能的错误吗

这是我设置搜索栏文件夹的方式

//SearchHeader.js
import React from "react";
import {
  Button,
  View,
  Text,
  StyleSheet,
  Platform,
  Animated,
  ScrollView,
  ImageBackground,
  TouchableOpacity
} from "react-native";
import {
  createStackNavigator,
  createAppContainer,
  createBottomTabNavigator
} from "react-navigation";
import { SearchBar } from "react-native-elements";
// import MaterialCommunications from 'react-native-vector-icons';
export default class SearchHeader extends React.Component {
  state = {
    search: ""
  };
  updateSearch = search => {
    this.setState({ search });
  };
  render() {
    const { search } = this.state;
    return (
      <View style={styles.container}>
        <SearchBar
          inputStyle={{ backgroundColor: "white" }}
          placeholder="Search for a character..."
          placeholderTextColor={"#g5g5g5"}
          onChangeText={this.updateSearch}
          value={search}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    height: 50,
    width: 390,
    justifyContent: "center",
    marginTop: 50
  }
});

以下是我将其导入目录文件夹的方式：

//EmployeeDirectory.js

import React from "react";
import {
  Button,
  View,
  Text,
  StyleSheet,
  Platform,
  Animated,
  ScrollView,
  ImageBackground,
  TouchableOpacity
} from "react-native";
import SearchHeader from './SearchHeader';
import { withNavigation } from "react-navigation";
import {
  createStackNavigator,
  createAppContainer,
  createBottomTabNavigator
} from "react-navigation";
import { SearchBar } from "react-native-elements";


class EmployeeDirectory extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: "Character Directory",
    headerStyle: {
      backgroundColor: "#53b4e6"
    },
    headerTintColor: "#f6c945",
    headerTitleStyle: {
      fontWeight: "bold"
    }
  });

  render() {
    return (
      <View style={styles.container}>
         <ImageBackground
          source={{
            uri:
              "https://backgrounddownload.com/wp-content/uploads/2018/09/simpsons-clouds-background-5.jpg"
          }}
          style={{
            width: "100%",
            height: "100%",
            alignContent: "center",
            justifyContent: "center",
            alignItems: "center"
          }}
        >

          <SearchHeader />

          <TouchableOpacity
            onPress={() => this.props.navigation.navigate("HomerSimpson")}
            style={styles.button}
          >
            <Text style={styles.text}>Homer Simpson</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => this.props.navigation.navigate("BartSimpson")}
            style={styles.button}
          >
            <Text style={styles.text}>Bart Simpson</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => this.props.navigation.navigate("MargeSimpson")}
            style={styles.button}
          >
            <Text style={styles.text}>Marge Simpson</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => this.props.navigation.navigate("LisaSimpson")}
            style={styles.button}
          >
            <Text style={styles.text}>Lisa Simpson</Text>
          </TouchableOpacity>  
        </ImageBackground>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    alignContent: "center"
  },
  text: {
    fontSize: 25,
    fontWeight: "bold",
    color: "#f6c945",
    alignItems: "center",
    justifyContent: "center",
    alignContent: "center"
  },
  button: {
    flexDirection: "row",
    backgroundColor: "#2d98da",
    alignItems: "center",
    justifyContent: "center",
    alignContent: "center",
    marginTop: 10,
    marginBottom: 10,
    borderRadius: 10,
    borderWidth: 1.0,
    borderColor: "black",
    height: 30,
    width: 260
  }
});
export default withNavigation(EmployeeDirectory)

---

我给你举个例子

从“React”导入*作为React； 从“react native”导入{文本、视图、样式表、平面列表、ActivityIndicator、平台}； 从“react native elements”导入{SearchBar}； 导出默认类App扩展React.Component{ 构造器{ 超级作物； //设置默认状态 this.state={isLoading:true，search:}； this.arrayholder=[]； } 组件安装{ 回传https://jsonplaceholder.typicode.com/posts' .thenresponse=>response.json .thenresponseJson=>{ 这是我的国家 { 孤岛加载：false， 数据来源：responseJson， }, 作用{ this.arrayholder=responseJson； } ; } .catcherror=>{ 控制台错误； }; } 搜索=文本=>{ console.logtext； }; 清除==>{ 这个。搜索。清除； }; SearchFilterFunctiontext{ //在textinput中传递插入的文本 const newData=this.arrayholder.filterfunctionitem{ //为搜索栏中插入的文本应用过滤器 const itemData=item.title？item.title.toUpperCase:.toUpperCase； const textData=text.toUpperCase； return itemData.indexOftextData>-1； }; 这是我的国家{ //在数据源上设置筛选的新数据 //设置数据后，它将自动重新渲染视图 数据源：newData， 搜索：文本， }; } ListViewItemSeparator==>{ //项目参数视图 回来 ; }; 渲染{ 如果此.state.isLoading{ //加载数据时加载视图 回来

---

在本例中

您没有搜索返回结果的列表。@这会放在搜索文件夹或目录文件夹中吗？我想这也会放在构造函数中？