javascript - 使用 React Native 的平面列表
问题描述
<Search
ref="search_box"
onSearch={this.onSearch}
backgroundColor="white"
cancelButtonTextStyle={{ color: "red" }}
placeholder="Search Food..."
placeholderCollapsedMargin={wp("40%")}
placeholderExpandedMargin={wp("7%")}
searchIconCollapsedMargin={wp("45%")}
inputHeight={hp("4%")}
/>
<List>
<ListItem>
<Text>Milk</Text>
</ListItem>
<ListItem>
<Text>Chicken</Text>
</ListItem>
<ListItem>
<Text>Rice</Text>
</ListItem>
大家好,我正在使用带有类组件的 React Native,我想知道如何隐藏列表,并且仅在我点击搜索栏时才显示它?
解决方案
您可以定义一个布尔变量并在搜索文本输入聚焦时将其设置为真,就像这样
...
this.state = {
showList: false,
}
...
return (
<View>
<SearchBar
...
onFocus={() => setState({showList: true})}
/>
{this.state.showList && (
<FlatList
...
/>
)}
</View>
)
这里我假设搜索组件继承了 TextInput 属性。
推荐阅读
- pygame - 如何在 pygame 中使 spritesheet 图像更宽?
- php - 将 PHP 授权转换为准备好的语句
- python - 从 test.pypi 安装自己的包时如何修复“找不到 {package name} 的匹配分发”
- xamarin - 即使提供了文件路径和权限,系统也会抛出无法获取文件异常
- php - 将数据传递到另一个页面
- sql-server - SQL Server UNION 语句的问题
- amazon-web-services - CloudWatch 的 Amazon Sagemaker 定价
- c++ - 地图作为地图中的关键
- css - 在 ios 模拟器上运行 ionic 4 应用程序时某些 css 无法正常工作
- google-search-api - 谷歌 API 问题