Javascript 不确定如何删除默认情况下屏幕上显示的此平面列表

目前，这就是搜索栏和平面列表在屏幕上显示的方式。单击搜索栏并键入一个列表组件后，它以这种方式显示。我希望平面列表仅在单击搜索栏时显示。我如何在应用程序中实现这一点？类似于下拉搜索栏的东西

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>
      );
    }
  }
}

从“React”导入React；
从“react native”导入{视图、文本、平面列表、ActivityIndicator、样式表}；
从“react native elements”导入{SearchBar}；
从“react native paper”导入{按钮、菜单、分隔符、提供程序、文本输入}；
const restaurantList=[
{
类型：'意大利语'，
名称：“迪马吉奥”
},
{
键入：“希腊文”，
名字：“雅典娜”
}
];
导出默认类App扩展React.Component{
静态导航选项={
标题：“搜索餐厅”
};
建造师（道具）{
超级（道具）；
此.state={
加载：false，
数据：餐厅列表，
错误：null，
值：“”，
};
this.arrayholder=[]；
}
RenderParator=（）=>{
返回(
);
};
searchFilterFunction=文本=>{
这是我的国家({
值：文本
});
const newData=restaurantList.filter（项=>{
console.log（item.type）
const itemData=`${item.name.toUpperCase（）}${item.type.toUpperCase（）}`；
const textData=text.toUpperCase（）；
返回itemData.includes（textData）；
});
这是我的国家({
数据：新数据
});
};
renderHeader=（）=>{
返回(
this.searchFilterFunction（text）}
/>
);
};
渲染（）{
if（this.state.loading）{
返回(
);
}否则{
返回(
`${index}`}
extraData={this.state}
data={this.state.data}
renderItem={（{item}）=>(
{item.name}{item.type}
)}
ItemSeparatorComponent={this.renderSeparator}
ListHeaderComponent={this.renderHeader}
/>
);
}
}
}

试试这种方法

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 —->
    />}

this.state={
搜索：错误
};
this.searchFilterFunction（text）}
onFocus={（）=>this.setState（{searchClicked:true}）
onBlur={（）=>this.setState（{searchClicked:false}）
/>
{this.renderHeader（）}
{this.state.searchClicked&${index}}
extraData={this.state}
data={this.state.data}
renderItem={（{item}）=>(
{item.name}{item.type}
)}
ItemSeparatorComponent={this.renderSeparator}
//ListHeaderComponent={this.renderHeader}
/>}

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

搜索栏应包含

文本输入

。您可以使用

onFocus

和

onBlur

道具来捕获事件，您可以单击搜索栏或离开它

...
      <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 ... />
         }
      )
   }

。。。
this.searchFilterFunction（text）}
onFocus={（）=>this.setState（{showList:true}）}//this.setState（{showList:false}）}//
...
render（）{
返回(
...
{
this.state.showList&&
}
)
}

你是说像这样的自动填充

https://www.npmjs.com/package/react-native-autocomplete-input

？事实上，您可能需要添加