输入文字时，搜索栏不会过滤掉选项

Question

我为屏幕创建了一个搜索栏。但是，当我输入文本以定位未触发内容时，不会过滤任何内容。我希望用户在键入搜索栏时能够过滤出该屏幕上的按钮，然后按该按钮将其转到该字符页面。谁能帮助我或指引我正确的方向？我的updateSearch代码可能有什么问题？

这是我在搜索栏中所拥有的：

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: 415,
    justifyContent: "center",
    marginTop: -50
  }
});

这是我将其导入到目录所在的屏幕中的方式：

class EmployeeDirectory extends React.Component {
  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}>Lisa Simpson</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => this.props.navigation.navigate("Home")}
            style={styles.button}
          >
            <Text style={styles.text}>Home Screen</Text>
          </TouchableOpacity>

          <TouchableOpacity
            onPress={() => this.props.navigation.goBack("")}
            style={styles.button}
          >
            <Text style={styles.text}>Go to previous screen</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 EmployeeDirectory;