Comment re-rendre flatlist?

Oh que c'est facile, il suffit d'utiliser extraData

Vous voyez comment les données supplémentaires fonctionnent dans les coulisses est le FlatList ou le VirtualisedList {[11] } vérifie simplement Si cet objet a changé via une méthode normale onComponentWillReceiveProps.

Donc, tout ce que vous avez à faire est de vous assurer de donner quelque chose qui change au extraData.

Voici ce que je fais:

J'utilise immuable.js donc tout ce que je fais est de passer une carte (objet immuable) qui contient ce que je veux Regarde.

<FlatList
    data={this.state.calendarMonths}
    extraData={Map({
        foo: this.props.foo,
        bar: this.props.bar
    })}
    renderItem={({ item })=>((
        <CustomComponentRow
            item={item}
            foo={this.props.foo}
            bar={this.props.bar}
        />
    ))}
/>

De cette façon, lorsque this.props.foo ou this.props.bar changent, notre CustomComponentRow sera mis à jour, car l'objet immuable sera différent du précédent.

Essayez:

1. Définit les données supplémentaires sur une valeur booléenne.

   ExtraData = {ceci.état.actualiser}

2. Bascule la valeur de l'état booléen lorsque vous souhaitez re-rendre / actualiser la liste

   this.setState({ 
       refresh: !this.state.refresh
   })
   

Si vous allez avoir un bouton, vous pouvez mettre à jour les données avec un setState dans le onPress. SetState restituera ensuite votre FlatList.

J'ai remplacé FlatList par SectionList et il est mis à jour correctement sur le changement d'état.

<SectionList
  keyExtractor={(item) => item.entry.entryId} 
  sections={section}
  renderItem={this.renderEntries.bind(this)}
  renderSectionHeader={() => null}
/>

La seule chose à garder à l'esprit est que section ont une structure de diff:

const section = [{
  id: 0,
  data: this.state.data,
}]

Pour moi, l'astuce était extraData et percer dans le composant item une fois de plus

state = {
  uniqueValue: 0
}

<FlatList
  keyExtractor={(item, index) => item + index}
  data={this.props.photos}
  renderItem={this.renderItem}
  ItemSeparatorComponent={this.renderSeparator}
/>

renderItem = (item) => {
  if(item.item.selected) {
    return ( <Button onPress={this.itemPressed.bind(this, item)}>Selected</Button> );
  }
  return ( <Button onPress={this.itemPressed.bind(this, item)}>Not selected</Button>);
}

itemPressed (item) {
  this.props.photos.map((img, i) => {
    if(i === item.index) {
      if(img['selected') {
        delete img.selected;
      } else {
        img['selected'] = true;
      }
      this.setState({ uniqueValue: this.state.uniqueValue +1 });
    }
  }
}

Mettez les variables qui seront modifiées par votre interaction à extraData

Vous pouvez être créatif.

Par exemple, si vous avez affaire à une liste changeante avec des cases à cocher.

<FlatList
      data={this.state.data.items}
      extraData={this.state.data.items.length * (this.state.data.done.length + 1) }
      renderItem={({item}) => <View>  

OK.Je viens de découvrir que si nous voulons que la FlatList connaisse le changement de données en dehors du prop de données, nous devons le définir sur extraData, donc je le fais comme ceci maintenant:

<FlatList data={...} extraData={this.state} .../>

Se référer à: https://facebook.github.io/react-native/docs/flatlist#extradata