如何在导航目标屏幕中更新数据（道具）

Question

问题：如果“导航源”屏幕的状态已更新，是否可以在“导航目标”屏幕中更新数据（属性）？

让我从ScreenA导航到ScreenB，然后将其传递给导航道具data

ScreenA➔ScreenB

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

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

显示ScreenB时，ScreenA上发生了一些事件，并且其state.data被更新。 ScreenB如何获取此更新的数据？

---

我将尝试用详细的代码示例来进一步说明：

有一个PostInfo类屏幕，该屏幕将所有评论存储在帖子中，并呈现一个按钮。单击此按钮后，屏幕导航到PostDetails类屏幕。 PostInfo类提供allComments和回调函数replyCommentCB作为导航道具。

然后，此PostDetails类呈现所有评论和评论回复textInputBox。当用户通过此textInputBox回复评论时，将触发回调函数replyCommentCB，并通过添加此新评论来更新PostInfo类中的状态。

但是，现在我也希望allComments的新更新状态也反映在PostDetails屏幕中，以便也可以呈现此新添加的注释。

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. 我不想使用Redux等状态管理。
2. [如果我将PostDetails类放在一个模式中（而不是navigation.navigate），工作正常。 （在PostInfo类中更新状态时，也会更新PostDetails模态的道具）

Answer 1

我自己做的。我需要做的就是从函数回调返回更新的数据。

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>
        )
    }
}