不确定如何从屏幕上默认显示中删除此 FlatList

Question

目前，这种 - is how the SearchBar and FlatList is showing up on the screen. Upon clicking on the SearchBar and typing one of the list components, it shows up this- 方式。我希望 FlatList 仅在我单击 SearchBar 时出现。我如何在应用程序中实现它？类似下拉搜索栏的东西...

import React from 'react';
import { View, Text, FlatList, ActivityIndicator, StyleSheet } from 'react-native';
import { SearchBar } from 'react-native-elements';
import { Button, Menu, Divider, Provider, TextInput } from 'react-native-paper';

 const restaurantList = [
   {
     type: 'Italian',
     name: 'DiMaggio'
   },
   {
     type: 'Greek',
     name: 'Athena'
   }
 ];

export default class App extends React.Component {
  static navigationOptions = {
    title: 'Search for Restaurants'
  };
  constructor (props) {
    super(props);

    this.state = {
      loading: false,
      data: restaurantList,
      error: null,
      value: '',
    };
    this.arrayholder = [];
  }

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

  searchFilterFunction = text => {
    this.setState({
      value: text
    });

    const newData = restaurantList.filter(item => {
      console.log(item.type)
      const itemData = `${item.name.toUpperCase()} ${item.type.toUpperCase()}`;
      const textData = text.toUpperCase();
      return itemData.includes(textData);
    });

    this.setState({
      data: newData
    });
  };

  renderHeader = () => {
    return (
      <SearchBar
        placeholder="Type..."
        value={this.state.value}
        onChangeText={text => this.searchFilterFunction(text)}
      />

    );
  };

  render () {
    if (this.state.loading) {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <ActivityIndicator />
        </View>
      );
    } else {
      return (
       <Provider>
        <View
          style={{
            paddingTop: 50,
            flexDirection: 'row',
            justifyContent: 'center',
          }}>
            <View style={styles.container}>
              <FlatList
                keyExtractor={(item, index) => `${index}`}
                extraData={this.state}
                data={this.state.data}
                renderItem={({ item }) => (
                  <Text>{item.name} {item.type}</Text>
                )}
                ItemSeparatorComponent={this.renderSeparator}
                ListHeaderComponent={this.renderHeader}
              />
            </View>
        </View>
        <View style={styles.container}>
          <TextInput />
        </View>
      </Provider>
      );
    }
  }
}

Answer 1

试试这个方法

this.state = {
      searchClicked: false
    };

 <SearchBar
        placeholder="Type..."
        value={this.state.value}
        onChangeText={text => this.searchFilterFunction(text)}
       onFocus={() => this.setState({searchClicked: true})} 
       onBlur={() => this.setState({searchClicked: false})} 
      />



<View>{this.renderHeader()}</View>
    {this.state.searchClicked && <FlatList
      keyExtractor={(item, index) => `${index}`}
      extraData={this.state}
       data={this.state.data}
      renderItem={({ item }) => (
         <Text>{item.name} {item.type}</Text>
      )}
      ItemSeparatorComponent={this.renderSeparator}
      // ListHeaderComponent={this.renderHeader} <—- Remove from here —->
    />}

Answer 2

如果@Lakhani 的回复不能满足你的问题，我有另一个建议给你。

您的 SearchBar 应该包含 TextInput。您可以使用 onFocus 和 onBlur 道具来捕获您点击 SearchBar 或离开它的事件。

...
      <SearchBar
        placeholder="Type..."
        value={this.state.value}
        onChangeText={text => this.searchFilterFunction(text)}
        onFocus={()=>this.setState({showList: true})} // <---
        onBlur={()=>this.setState({showList: false})} // <---
      />
...

   render() {
      return (
         ...
         {
            this.state.showList && <FlatList ... />
         }
      )
   }

不确定如何从屏幕上默认显示中删除此 FlatList

Not sure how to remove this FlatList from displaying by default on screen

javascript

searchbar

react-native

react-native-flatlist