web-dev-qa-db-fra.com

React Native - Quelle est la meilleure façon de remonter / réinitialiser / recharger un écran?

Dans React-Native, existe-t-il un moyen (ou des moyens) de remonter ou de recharger tout l'écran?

Je construis une calculatrice, et si je suis ceci: https://facebook.github.io/react-native/docs/refreshcontrol.html

Il ne réinitialise toujours pas les champs de saisie. Bien sûr, je peux écrire un code pour réinitialiser chaque champ de l'écran, mais existe-t-il un moyen générique de simplement rafraîchir l'écran?

Par exemple, en utilisant le navigateur si je vais simplement sur un autre écran et que je reviens à cet écran, les données ont disparu des champs et tout est à nouveau 0.0. Comment y parvenir?

Voici le premier nœud du composant, tout est à l'intérieur de ce

<ScrollView refreshControl={<RefreshControl
refreshing={this.state.refreshing} onRefresh={this.refreshMe.bind(this)} />}
>
.
.
.
.
.
.
</ScrollView>

Merci

react-nativereloadmount
6
Raheel Hasan

Un hack souvent utilisé dans React consiste à changer le prop key de votre composant pour forcer le re-montage d'une vue:

class Thing extends React.Component {
  state = {
    uniqueValue: 1
  }
  forceRemount = () => {
    this.setState(({ uniqueValue }) => ({
      uniqueValue: uniqueValue + 1
    });
  }
  render() {
    return (
      <View key={this.state.uniqueValue}>
        <Button onPress={this.forceRemount} />
      </View>
    )
  }
}

React utilise des clés d'élément pour suivre les éléments à mettre à jour, et si la clé est modifiée, React conclura que l'élément précédent n'existe plus, il sera donc supprimé et le "nouvel" élément créé.

Cela dit, cela ne fonctionnerait que si l'état que vous souhaitez effacer est stocké dans un composant avec état dans l'arborescence des composants enfants (par exemple, un non contrôléTextInput qui n'a pas son value prop set).

Une solution plus propre consiste à rendre tous vos composants enfants contrôlés afin que l'interface utilisateur de votre composant soit une fonction pure de ses accessoires et de son état, et réinitialise simplement l'état du composant:

const initialState = {
  //...
}

class Thing extends React.Component {
  state = initialState;
  resetState = () => {
    this.setState(initialState);
  }
  render() {
    return (
      <View}>
        <Button onPress={this.resetState} />
      </View>
    )
  }
}
10
jevakallio