带有 React Native 的平面列表

Question

           <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>

大家好，我正在使用带有 class 组件的 React Native，我想知道如何隐藏列表，并且仅在我点击搜索栏时显示它？

Answer 1

您可以定义一个布尔变量，并在搜索文本输入聚焦时将其设置为真，像那样

...
this.state = {
    showList: false,
}
...
return (
    <View>
      <SearchBar
        ...
        onFocus={() => setState({showList: true})}
      />
      {this.state.showList && (
         <FlatList
           ...
         />
      )}
    </View>
)

这里我假设搜索组件继承了 TextInput 属性。

带有 React Native 的平面列表

Flatlist with React Native

javascript

uisearchbar

reactjs

react-native