react-native - 在 DrawerNavigator v.5 中重置嵌套的 StackNavigator
问题描述
在版本 4 中,我在 contentComponent 中使用 DrawerItems onItemPress 重置了 StackNavigation:
const AppDrawerNavigator = createDrawerNavigator(
{
Stack1: {
screen: Stack1,
navigationOptions: { // options}
},
Stack2: {
screen: Stack2,
navigationOptions: { // options}
},
{
initialRouteName: 'Stack1',
contentOptions: {
activeTintColor: '#346bc7',
},
contentComponent: props => {
return (
<ScrollView>
<SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }} >
<DrawerItems {...props} onItemPress={router => {
const navigateAction = NavigationActions.navigate({
routeName: router.route.routeName,
params: {},
action: NavigationActions.navigate({ routeName: router.route.routes[0].routeName }),
});
props.navigation.dispatch(navigateAction);
}}
/>
</SafeAreaView>
</ScrollView>
)
}
},
);
React Navigation 5 有一个全新的 API,所以我的旧重置代码不起作用。如何在 DrawerNavigator v.5 中执行此操作?
解决方案
根据文档,这对我有用:
import { CommonActions } from "@react-navigation/native";
props.navigation.dispatch({
...CommonActions.reset({
index: 0,
routes: [{ name: "AuthStackNavigator" }]
})
});
如果你想重置到 Stacknavigator 中的特定屏幕,你可以这样做:
props.navigation.dispatch({
...CommonActions.reset({
index: 0,
routes: [
{
name: "AuthStackNavigator",
state: {
routes: [
{
name: "SignUpScreen",
params: { //<--- send with param optional
paramTest: "param test"
}
}
]
}
}
]
})
});
我希望这对某人有所帮助。
推荐阅读
- c# - .NET Core JsonDocument.Parse(ReadOnlyMemory
, JsonReaderOptions) 无法从 WebSocket ReceiveAsync 解析 - javascript - 如何检查图像的 src 属性是否有效?
- javascript - 使用 AMP 项目在 iframe 中调用 javascript
- android - 在 Android 上下载流媒体视频
- java - 适用于 Android 的 DL4J 库中的 OpenBLAS 预设
- moqui - 无法使用新的 moqui 设置登录
- asp.net-mvc - ASP.NET MVC @Html.DropDownList 使用列表编辑项目
- python - 在python3中运行时从动态路径导入固定模块
- mysql - 通过托管在 AWS 上的 servlet 从 mySQL DB 下载文件
- reactjs - React Router v4 - 使用子页面获取长长的面包屑列表