Réagir FlatList renderItem

J'ai vu ce genre de syntaxe dans le JS avant et je suis juste curieux de voir comment il fonctionne. Dans le Réagir Natif de Docs pour FlatList, un exemple des appels renderItem. Comment cette._renderItem sais que ce que chaque élément de la liste, il travaille avec? Il ressemble élément est déstructuré, mais à partir de quel objet? Réagir FlatList renderItem

Pour le dire autrement: dans Flatlist, une autre façon de faire ce même appel pourrait être:

<FlatList <other props> renderItem={({item}) => (<MyListItem ....) />

Est renderItem certains prop où {objet} sera toujours le déstructuré, arg?

OriginalL'auteur Julian | 2017-08-01

  1. 5

    données prop - besoin de passer un tableau de données pour la FlatList via le data prop. C'est sur ce problème.accessoires de jeu.les données.

    renderItem prop - Alors, vous voulez rendre le contenu avec la renderItem prop. La fonction est passée à un seul argument, qui est un objet. Les données qui vous intéresse sur la item key de sorte que vous pouvez utiliser déstructuration de l'accès que de l'intérieur de la fonction. Puis, de retour d'un composant à l'aide de ces données.

    render() {
 return (
    <List>
      <FlatList
        data={this.state.data}
        renderItem={({ item }) => (
          //return a component using that data
        )}
      />
    </List>
 );
}

    OriginalL'auteur Balasubramanian

  2. 2

    en ajoutant à ce que @Balasubramanian a déclaré, le renderItem points à la current item et puisque vous êtes à l'aide d'un List composant de l'enveloppe, alors vous pouvez aussi utiliser le "ListItem" composant à l'intérieur de la renderItem fonction de render la current itemde données de l', comme ceci:

    renderItem={({ item, index }) => {
  return (
     <ListItem
        key={index}
        title={item.name}
        onPress={ () => this.assetSelected(item) }
      />
  );
}

    OriginalL'auteur Luis-Carlos

  3. 1
      <FlatList
                data={['1', '2', '3', '4', '5', '6']}
                renderItem={({ item }) => (
                  <Text>{ item }</Text>
                )}
            />

    De sortie
    1
    2
    3
    4
    5
    6

    OriginalL'auteur Keshav Gera