时间戳

首页 > 解决方案 > 如何使用反应导航在页面之间传递状态？

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

问题描述

我正在尝试将状态从主页传递到详细信息页面。详情页通过调用函数（通过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

标签： reactjsreact-nativereact-navigation

解决方案

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

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

我希望这对你有帮助

推荐阅读