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

Question

问题：如果导航源屏幕的状态更新，有没有办法更新导航目标屏幕中的数据(props(？

比方说，我从ScreenA导航到ScreenB并传递它 导航道具data

屏幕A ➔ 屏幕B

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

附注：

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