如何在 React Native 中的粘性标题 FlatList 中搜索？答案

【问题标题】：How to search in a sticky header FlatList in React Native?如何在 React Native 中的粘性标题 FlatList 中搜索？
【发布时间】：2020-11-22 08:05:22
【问题描述】：

我实现了一个带有粘性标头的 FlatList，它从 Content.json 获取数据。

但是当我实现搜索功能时，出现以下错误。

这是代码的链接。 https://snack.expo.io/@cmcodes/anxious-toffee

【问题讨论】：

标签： javascript reactjs react-native object search

【解决方案1】：

了解您想要实现的目标，您应该：

<FlatList
  data={filteredContent}
  renderItem={this.renderContent}
  keyExtractor={(item) => item.name}
  stickyHeaderIndices={this.state.stickyHeaderIndices}
/>

然后，在你的renderContent：

  renderContent = ({ item }) => {
    const content = item
    if (content.header) {
      return (
        <ListItem itemDivider>
          <Body>
            <Text style={styles.headerStyle}>{content.name}</Text>
          </Body>
        </ListItem>
      );
    } else if (!content.header) {
      return (
        <ListItem style={{marginLeft: 0}}>
          <Body>
            <Text>{content.name}</Text>
          </Body>
        </ListItem>
      );
    }
  };

请记住，函数 renderItem 在对象内部为您提供了一个 item，并且它具有该名称，因此您不能仅将其用作 content。

编辑：https://snack.expo.io/ga7o0KyZX

【讨论】：

我明白你的意思了！但是，它没有奏效！我需要搜索功能！如果用户在搜索栏中键入“电视”，那么 FlatList 中应该只显示“电视”。您可以尝试在上面的小吃链接中编辑代码。
我刚刚做了，这个例子有效。更换零食中的这些部件，它应该可以工作。
@cmcodes 给你：snack.expo.io/ga7o0KyZX
您在 Snack 的“Web”模拟器上运行它。将其更改为“Android”，您将看到错误TypeError: undefined is not an object (evaluating 'search.toLowerCase')
这里是在带有粘性标题的 FlatList 中搜索的工作代码的链接。 snack.expo.io/@cmcodes/forlorn-cake