reactjs - 如何使用 react 导航在页面之间传递状态？

Question

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

似乎有人问了类似的问题here 但我不太明白。我没有使用 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传递数据不会触发重新渲染，因为它传递的是 Prop 的副本。您将需要找到其他方式来发送 Prop ，以便您的组件了解更改。 例如，您可以将组件连接到 redux 状态(假设您正在使用 redux)。如果您没有使用 redux，您可以从父组件 navigate('Child', {fresh:freshFunction } 向 Child 发送刷新函数

然后，您可以在子级中访问此函数(通过诸如 this.props.navigation.state.params.refresh(); 或 const refresh() = this.props. navigation.getParam('regresh') ) 在后退操作之前。这将触发更新父状态以进行更新。

希望对你有帮助