React native 反应导航goBack（）并更新父状态

我有一个页面，如果用户已登录，将显示其姓名；如果用户未登录，将显示“创建帐户”或“登录”选项。屏幕如下所示

他们可以导航到“登录”或“创建帐户”页面。成功登录或注册后，它将导航到此页面并显示用户名。屏幕如下所示

目前，我将用户数据存储在

AsyncStorage

中，我想在用户成功登录或从页面重定向时更新此字段

我怎样才能做到这一点

---

有没有一种方法可以从

navigate.goBack（）

传递参数，并且父级可以侦听参数并更新其状态？

当您像这样调用navigate时，可以将回调函数作为参数传递：

const DEMO_TOKEN=wait AsyncStorage.getItem（'id_TOKEN'）；
if（DEMO_令牌===null）{
this.props.navigation.navigate（'Login'{
onGoBack:（）=>this.refresh（），
});
返回-3；
}否则{
这个。doSomething（）；
}

并定义回调函数：

refresh（）{
这个。doSomething（）；
}

然后在登录/注册视图中，在goBack之前，您可以执行以下操作：

wait AsyncStorage.setItem（'id\u token'，myId）；
this.props.navigation.state.params.onGoBack（）；
this.props.navigation.goBack（）；

React导航v5的更新：

wait AsyncStorage.setItem（'id\u token'，myId）；
this.props.route.params.onGoBack（）；
this.props.navigation.goBack（）；

我也面临着类似的问题，下面是我如何通过更详细的讨论来解决这个问题的

选项一是使用参数导航回父级，只需在父级组件中定义一个回调函数，如下所示：

updateData=data=>{
控制台日志（数据）；
警报（“返回状态：+数据”）；
//一些其他的东西
};

并导航到子对象：

onPress=（）=>{
this.props.navigation.navigate（“父屏幕”{
姓名：“来自家长”，
updateData:this.updateData
});
};

现在在child中，它可以被称为：

this.props.navigation.state.params.updateData（status）；
this.props.navigation.goBack（）；

---

选项二。如另一个答案所述，为了从任何组件获取数据，异步存储可以同步使用，也可以不同步使用

数据保存后，可以在任何地方使用

//获取
AsyncStorage.getItem（“@item”）
。然后（项目=>{
item=JSON.parse（item）；
this.setState（{mystate:item}）；
})
.完成（）；
//设置
AsyncStorage.setItem（“@item”，JSON.stringify（someData））；

或者使用异步函数使其在获得新值时自动更新

this.state={item:this.dataUpdate（）}；
异步函数dataUpdate（）{
试一试{
let item=wait AsyncStorage.getItem（“@item”）；
退货项目；
}捕获（e）{
控制台日志（e.message）；
}
}

有关更多详细信息，请参阅

是否有方法从

navigate.goback（）

传递参数，并且父级可以侦听参数并更新其状态

---

您可以将回调函数作为参数传递（如其他答案中所述）

下面是一个更清晰的示例，当您从a导航到B，并希望B将信息传回a时，您可以传递回调（此处

onSelect

）：

ViewA.js

从“React”导入React；
从“react native”导入{按钮、文本、视图}；
类ViewA扩展了React.Component{
状态={selected:false}；
onSelect=data=>{
此设置状态（数据）；
};
onPress=（）=>{
this.props.navigate（“ViewB”，{onSelect:this.onSelect}）；
};
render（）{
返回(
{this.state.selected？“selected”：“notselected”}
);
}
}

ViewB.js

从“React”导入React；
从“react native”导入{Button}；
类ViewB扩展了React.Component{
戈巴克（）{
const{navigation}=this.props；
navigation.goBack（）；
navigation.state.params.onSelect（{selected:true}）；
}
render（）{
返回；
}
}

脱帽致敬-请参阅

---

编辑 对于React Navigation v5

ViewB.js

从“React”导入React；
从“react native”导入{Button}；
类ViewB扩展了React.Component{
戈巴克（）{
const{navigation，route}=this.props；
navigation.goBack（）；
route.params.onSelect（{selected:true}）；
}
render（）{
返回；
}
}

我刚刚使用了标准的导航功能，给view一个路由名称并传递参数，这正是goBack应该做的

this.props.navigation.navigate（“ViewA”，
{
参数1:value1，
参数2:value2
});

最好的解决方案是使用。您不需要手动创建侦听器

强烈建议不要调用回调函数。使用侦听器检查此示例（记住使用此选项从componentWillUnMount中删除所有侦听器）

A部分：

NavigateTomponentB（）{
const{navigation}=this.props
this.navigationListener=navigation.addListener（'willFocus'，有效负载=>{
this.removeNavigationListener（）的
常量{state}=有效负载
常量{params}=state
//使用新参数更新状态
常量{otherParam}=params
this.setState（{otherParam}）
})
navigation.push（'ComponentB'{
returnToRoute:navigation.state，
otherParam:this.state.otherParam
})
}
removeNavigationListener（）{
if（this.navigationListener）{
this.navigationListener.remove（）
this.navigationListener=null
}
}
组件将卸载（）{
this.removeNavigationListener（）的
}

委员会成员B：

returnToComponentA（）{
const{navigation}=this.props
const{routeName，key}=navigation.getParam（'retu
onPress={() =>
        navigation.navigate('MyStackScreen', {
          // Passing params to NESTED navigator screen:
          screen: 'goToScreenA',
          params: { Data: data.item },
        })
      }

import { useFocusEffect } from '@react-navigation/native';


 useFocusEffect(
React.useCallback(() => { 
 // YOUR CODE WHEN IT IS FOCUSED
   return // YOUR CODE WHEN IT'S UNFOCUSED
}, [userId])