时间戳

首页 > 解决方案 > 如何在 React Native 中的粘性标题 FlatList 中搜索？

javascript - 如何在 React Native 中的粘性标题 FlatList 中搜索？

问题描述

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

带有粘性标题的平面列表

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

实现搜索功能后出错

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

标签： javascriptreactjsreact-nativeobjectsearch

解决方案

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

<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

推荐阅读