Как искать в прикрепленном заголовке FlatList в React Native? - PullRequest
Новая
       16

Как искать в прикрепленном заголовке FlatList в React Native?

0 голосов
/ 01 августа 2020

Я реализовал FlatList с липким заголовком, который извлекает данные из Content.json.

flatlist with sticky header

But when I implemented search functionality, got the following error.

error after implementing search functionality

Here's the link to the code. https://snack.expo.io/@cmcodes / тревожно-ириски

1 Ответ

1 голос
/ 01 августа 2020

Понимая, чего вы пытались достичь, вы должны иметь: 

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

EDIT: https://snack.expo.io/ga7o0KyZX

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...