修复标头和带有平面列表的搜索栏无法正常工作

Question

在我的代码中，我正在使用Fixheader和Searchbar，但是我试图将searchbar放在header之下，并且Header应该是fixed。 还有一个问题，在搜索栏中输入任何内容后，数据就进入FlatList。 为此，请帮忙，当我在搜索栏或标头中生成错误时进行写操作。

import React, { Component } from "react";
import {
  View,
  Text,
  TextInput,
  FooterTab,
  Button,
  TouchableOpacity,
  ScrollView,
  StyleSheet,
  ActivityIndicator,
  Header,
  FlatList
} from "react-native";
import { Icon } from "native-base";
import { createStackNavigator } from "react-navigation";
import { SearchBar } from "react-native-elements";

export default class RenderList extends Component {
  static navigationOptions = {
    title: "Selected Item",
    header: null
  };
  constructor() {
    super();
    this.state = {
      data: "",
      loading: true,
      search: "",
      searchText: "",
      filterByValue: ""
    };
  }

  componentDidMount() {
    this.createViewGroup();
  }

  createViewGroup = async () => {
    try {
      const response = await fetch(
        "http://142.93.210.217:8080/Dsenze/userapi/grouphier/viewgroup",
        {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            password: "admin",
            username: "admin",
            viewall: "false",
            id: [4],
            startlimit: "0",
            valuelimit: "10"
          })
        }
      );

      const responseJson = await response.json();

      const { groupData } = responseJson;

      this.setState({
        data: groupData,
        loading: false
      });
    } catch (e) {
      console.error(e);
    }
  };

  clickedItemText(clickedItem) {
    this.props.navigation.navigate("Item", { item: clickedItem });
  }
  updateSearch = search => {
    this.setState({ search });
  };
  keyExtractor = ({ id }) => id.toString();
  keyExtractor = ({ name }) => name.toString();

  renderItem = ({ item }) => (
    <TouchableOpacity
      style={styles.item}
      activeOpacity={0.4}
      onPress={() => {
        this.clickedItemText(item);
      }}
    >
      <Text style={styles.ListText}>Hospital Id {item.id}</Text>
      <Text>Hospital Name {item.name}</Text>
    </TouchableOpacity>
  );

  renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "86%",
          backgroundColor: "#CED0CE"
        }}
      />
    );
  };

  onSearchInputChange = text => {
    const filterByValue = this.state.data.filter(x =>
      x.name.toLowerCase().includes(text.toLowerCase())
    );
    this.setState({
      searchText: text,
      filterByValue
    });
  };

  Render_FlatList_Sticky_header = () => {
    var Sticky_header_View = (
      <View style={styles.header_style}>
        <Text style={{ textAlign: "center", color: "#000000", fontSize: 22 }}>
          {" "}
          FlatList Sticky Header{" "}
        </Text>
      </View>
    );

    return Sticky_header_View;
  };

  render() {
    const { loading, data, filterByValue } = this.state;

    return (
      <ScrollView>
        <View style={styles.container1}>
          <SearchBar
            lightTheme
            onChangeText={this.onSearchInputChange}
            value={this.state.searchText}
            //onClearText={someMethod}
            icon={{ type: "font-awesome", name: "search" }}
            placeholder="Type Here..."
          />

          {/* <TextInput style={styles.Searchbar}
        onChangeText={this.onSearchInputChange}
        value={this.state.searchText}
      /> */}
          {this.state.loading ? (
            <ActivityIndicator size="large" />
          ) : (
            <FlatList
              renderItem={this.renderItem}
              keyExtractor={this.keyExtractor}
              ItemSeparatorComponent={this.renderSeparator}
              data={filterByValue}
              ListHeaderComponent={this.Render_FlatList_Sticky_header}
              stickyHeaderIndices={[0]}
              //  ListHeaderComponent={this.render_FlatList_header}
            />
          )}
        </View>
      </ScrollView>
    );
  }
}