Comment mettre à jour les données (accessoires) dans un écran de destination de navigation ?

Question

Ques : Existe-t-il un moyen de mettre à jour les données (accessoires) dans un écran de destination de navigation, si l'état de l'écran source de navigation est mis à jour ?

Disons que je navigue à partir de ScreenA a ScreenB et le passer Navigation props data

ÉcranA ÉcranB

ScreenA {
   navigate('ScreenB', {data: this.state.data})

   someEvent(){
      this.setState({data: newData})
   }
}

Tandis que ScreenB s'affiche, un événement s'est produit sur ScreenA et son state.data est mis à jour. Comment ScreenB peut obtenir ces données actualisées ?

---

Je vais essayer de l'expliquer plus en détail, avec un exemple de code détaillé :

Il existe un PostInfo classe screen, qui stocke tous les commentaires d'un article et affiche un bouton. Lorsque l'on clique sur ce bouton, screen navigue vers PostDetails écran de classe. PostInfo La classe fournit allComments et une fonction de rappel replyCommentCB comme accessoires de navigation.

Le présent PostDetails rend ensuite tous les commentaires et la réponse à un commentaire textInputBox . Lorsqu'un utilisateur répond à un commentaire par le biais de ce textInputBox la fonction de rappel replyCommentCB est déclenché et met à jour l'état dans PostInfo en ajoutant ce nouveau commentaire.

Cependant, je veux maintenant cette nouvelle version de l'état d'avancement du projet. allComments de se refléter dans la PostDetails afin que le commentaire nouvellement ajouté puisse également être rendu.

class PostInfo {
    constructor(props) {
        this.state = {
            allComments = []
        }
    }

    replyCommentCB = (text) => {
        /* Update comment in DataBase first then update state */
        updatedAllComments = this.state.allComments
        updatedAllComments.push(text)
        this.setState ( {
            allComments : updatedAllComments
        })
    }

    onButtonPress = () => {
        this.navigation.navigate('PostDetails', {
          allComments   : this.state.allComments,
          replyCommentCB: this.replyCommentCB,
        }
      );
    }

    render () {
        return (
            <Button title={"Show Comments"} onPress={this.onButtonPress}/>
        )
    }
}

class PostDetails {
    render() {
        let allComments    = this.props.navigation.getParam('allComments',[]);
        let replyCommentCB = this.props.navigation.getParam('replyCommentCB','');
        return (
            <ScrollView>
                /* Render "allComments" here */
                <TextInputBox onSubmit={replyCommentCB} />
            </ScrollView>
        )
    }
}

PS :

1. Je ne veux pas utiliser la gestion de l'état de Redux etc.
2. Si je mets le PostDetails dans une modale (au lieu de navigation.navigate), il est (lorsque l'état est mis à jour dans la classe PostInfo, les props de la classe PostInfo sont mis à jour). PostDetails sont également mises à jour)

Answer 1

Je l'ai fait moi-même. Tout ce que j'avais à faire, c'était de renvoyer les données mises à jour depuis le callback de la fonction.

class PostInfo {
    constructor(props) {
        this.state = {
            allComments = []
        }
    }

    replyCommentCB = (text) => {
        /* Update comment in DataBase first then update state */
        updatedAllComments = this.state.allComments
        updatedAllComments.push(text)
        this.setState ({ allComments : updatedAllComments })
        return updatedAllComments;  // return the data that you want to get updated in navigated screen
    }

    onButtonPress = () => {
        this.navigation.navigate('PostDetails', {
          allComments   : this.state.allComments,
          replyCommentCB: this.replyCommentCB,
        }
      );
    }

    render () {
        return (
            <Button title={"Show Comments"} onPress={this.onButtonPress}/>
        )
    }
}

class PostDetails {
    constructor(props) {
        super(props)
        this.replyCommentCB = this.props.navigation.getParam('replyCommentCB','');
        this.state = { allComments : this.props.navigation.getParam('allComments',[]) }
    }

    onReplyComment(text) {
        const updatedAllComments = this.replyCommentCB(text)
        this.setState({ allComments   : updatedAllComments })
    }

    render() {
        return (
            <ScrollView>
                /* Render "this.state.allComments" here */
                <TextInputBox onSubmit={onReplyComment} />
            </ScrollView>
        )
    }
}