如何使用反应导航在页面之间传递状态

Question

我正在尝试将状态从主页传递到详细信息页面。详细信息页面通过调用函数（通过 props）成功更改父状态。但是，不会触发重新渲染，也不会更新详细信息页面（尽管它已正确更新道具）。如何将状态传递给子页面（详细信息），以便它触发它重新呈现？

这里似乎提出了类似的问题 但我不太明白。我没有使用 redux，因为这是一个小应用程序。

//Navigator Setup
const AppNavigator = createStackNavigator({
    Home: {
        screen: Home} 
    Details: {
        screen: Details}
);
//Home page:
this.props.navigation.navigate("Details", {
    changeDetails: this.changeDetails
    details: this.state.details})
}
//Details page
let details = props.navigation.getParam("details", "n/a");
let changeDetails = props.navigation.getParam("changeDetails", "n/a");
//change things
//render stuff

Answer 1

使用 navigation.navigate 传递数据不会触发重新渲染，因为它传递的是 props 的副本。您需要找到另一种方式来发送道具，以便您的组件了解更改。例如，您可以将组件连接到 redux 状态（假设您使用的是 redux）。如果不使用 redux，则可以将刷新功能从父组件navigate('Child', { refresh: refreshFunction }发送到子组件

然后，您可以在后退操作之前在子项中访问此功能（通过类似 this.props.navigation.state.params.refresh(); 或 const refresh() = this.props.navigation.getParam('regresh') ）。这将触发更新要更新的父状态。

我希望这对你有所帮助

Answer 2

您以正确的方式传递了数据，但在提取数据时出错了 let details = props.navigation.getParam("details", "n/a");就放this.props 喜欢这个 console.log(props.navigation.getParam.changeDetails); console.log(props.navigation.getParam.details)控制台.log仅用于调试目的，您可以将其分配给任何变量，您将以对象形式或json形式接收数据.在构造函数，render（）或要使用此数据的位置中设置此数据

Answer 3

如文档所述：

this.props.navigation.navigate('YOUR TARGET NAME', {
          itemId: 86,
          otherParam: 'anything you want here',
        });

这是完整的例子，祝你好运

编辑：在componentDidUpdate()方法的子组件中，您必须检查如果 props 被更改，将新 props 设置为 state，那么组件将使用 new state 重新渲染：

componentDidUpdate(){
      if ('YOUR DATA FROM PARENT' != 'PREVIOUS DATA FROM PARENT SAVED IN STATE'){
                this.setState({yourState: 'YOUR DATA FROM PARENT'})
       }