2
votes

Lier un élément de liste sur presse dans FLATLIST (React Native)

Créer une liste d'éléments dans mon projet en utilisant flatlist. Mes articles sont bien rendus dans la liste.

Il y a 1 icône de favori pour sélectionner le produit comme favori. À partir de mes données, je change l'icône sur la base, que ce produit soit favori ou non.

ce que je veux, c'est lier chaque produit pour le marquer comme favori et changer la couleur. en bref, il faut basculer l'icône préférée et non l'icône préférée.

Mon code

Données que je rend

<FlatList
                    data={this.state.entries}
                    numColumns={this.state.columns}
                    key={this.state.key}
                    renderItem={this.Render_flatlist_Data}
                    keyExtractor={(item, index) => index.toString()}
                    ListHeaderComponent={this.Render_FlatList_Sticky_header}
                    stickyHeaderIndices={[0]}

                />

    Render_flatlist_Data = ({ item: rowData }) => {
.....
 <TouchableOpacity onPress={() => this.TickFav()}>
   <Text>
    <Icon name={(rowData.is_fav === true ? 'heart' : 'ios-heart-empty')} 
   size={25} color="#ddd" /> </Text>
 </TouchableOpacity>
.....
}

Liste plate

 entries: [
            { id: 1, is_fav: false, title: 'hello', ImagePath: 'https://cdn.pixabay.com/photo/2012/03/01/00/55/flowers-19830_960_720.jpg' },
            { id: 2, is_fav: true, title: 'world', ImagePath: 'https://cdn.pixabay.com/photo/2017/07/01/19/48/background-2462434_960_720.jpg' },
            { id: 3, is_fav: false, title: 'you', ImagePath: 'https://cdn.pixabay.com/photo/2016/12/16/15/25/christmas-1911637_960_720.jpg' },
            { id: 4, is_fav: true, title: 'you', ImagePath: 'https://cdn.pixabay.com/photo/2015/07/10/17/27/sparkler-839831_960_720.jpg' },
            { id: 5, is_fav: false, title: 'hello', ImagePath: 'https://cdn.pixabay.com/photo/2012/03/01/00/55/flowers-19830_960_720.jpg' }]

Comment puis-je rendre le produit préféré en cliquant sur l'icône du produit favori.

Merci d'avance.

react-native react-native-flatlist

0 commentaires

3 Réponses :

0
votes

passez rowData comme paramètre dans la méthode onPress et mettez à jour l'état is_fav lorsque vous cliquez sur l'élément.

TickFav = (rowData) => {
    rowData.is_fav = !rowData.is_fav
}

0 commentaires

0
votes

Utilisez onPress pour vos articles, lorsque vous cliquerez sur votre article, passez l'identifiant et sur la base de cet identifiant, vérifiez pour l'article et basculez son favori en conséquence.

onPress={() => {his.TickFav(id) }

0 commentaires

3
votes

Tout d'abord, nous devons avoir une variable pour surveiller [extraData] que les données d'état ont été modifiées. (c'est-à-dire) certains produits ont été marqués ou non marqués comme favoris.

Cela aide la flatlist à notifier qu'une valeur a été modifiée, de sorte que nous devons effectuer un nouveau rendu.

Dans votre cas , l'ajout du champ extraData dans Flatlist devrait faire l'affaire

TickFav = (index) => {
  const {entries} = this.state;
  entries[index].is_fav = !entries[index].is_fav;
  this.setState({entries});
}

Vous pouvez même obtenir le rowData réel à partir de l'état et modifiez-le directement , ce qui n'est pas nécessaire.

<FlatList
  data={this.state.entries}

  extraData={this.state}

  numColumns={this.state.columns}
  key={this.state.key}
  renderItem={this.Render_flatlist_Data}
  keyExtractor={(item, index) => index.toString()}
  ListHeaderComponent={this.Render_FlatList_Sticky_header}
  stickyHeaderIndices={[0]}
/>

TickFav = rowData => {
  rowData.is_fav = !rowData.is_fav
  this.setState({});
}

2 commentaires

Merci @Mukundhan pour votre réponse rapide. votre solution a fonctionné pour moi. Merci encore.

Mon plaisir. :)