reactjs - 如何重置嵌套导航器(react-navigation v5)
问题描述
拥有两组堆栈导航器;
const SetOneScreens = () => (
<Stack.Navigator initialRouteName="AScreen">
<Stack.Screen name="AScreen" component={AScreen} />
<Stack.Screen name="BScreen" component={BScreen} />
</Stack.Navigator>
);
const SetTwoScreens = () => (
<Stack.Navigator initialRouteName="CScreen">
<Stack.Screen name="CScreen" component={CScreen} />
<Stack.Screen name="DScreen" component={DScreen} />
</Stack.Navigator>
);
哪些嵌套在抽屉导航器中
<NavigationContainer>
<Drawer.Navigator initialRouteName="SetOneScreens">
<Drawer.Screen name="SetOneScreens" component={SetOneScreens} />
<Drawer.Screen name="SetTwoScreens" component={SetTwoScreens} options={{swipeEnabled: false}} />
</Drawer.Navigator>
</NavigationContainer>
我想从 to 导航BScreen
并DScreen
重置堆栈(为了不让 android 中的硬件后退按钮返回BScreen
)
和嵌套情况一样,首先要定义导航器名称;我应该如何在重置操作中定义屏幕。
// For navigation
props.navigation.navigate('setTwoScreens',{screen:'DScreen'})
// For reset I can only navigate to initial screen
props.navigation.reset({index:0,routes:[{name:'setTwoScreens'}]})
我应该如何处理reset
withnavigation
或CommonActions
解决方案
如react-navigation-v5文档中所述,您需要使用 reset-action 调度 CommonAction 以清除应用程序的后退堆栈,以便当用户按下设备的硬件后退按钮时应用程序不会返回上一屏幕,检查下面的例子,
import { CommonActions } from "@react-navigation/native";
props.navigation.dispatch({
...CommonActions.reset({
index: 0,
routes: [{ name: "AnotherStackNavigator" }]
})
});
或者,如果您想在 StackNavigator 中重置到特定屏幕,您可以这样做:
props.navigation.dispatch({
...CommonActions.reset({
index: 0,
routes: [
{
name: "AnotherStackNavigator",
state: {
routes: [
{
name: "AnotherStackNavigatorScreen",
params: {
...
}
}
]
}
}
]
})
});
推荐阅读
- c# - 在 C# 中创建具有重复键的 json 对象
- python - 熊猫:只出现最后一行
- c++ - _mingw.h 头文件有什么作用?
- php - CURL 返回 bool(false)。为什么?
- flutter - Flutter:从控制台更改配置时,立即从远程客户端收到新配置
- python - 如何在 Windows 中隐藏 Python 加密密钥?
- sql - SQL:插入 DLY 行总和小于 WKLY 行的行
- c# - 为什么使用整数参数调用 RPC 函数会出错?-光子统一
- android - 如何从 Room Database 和 RecyclerView 中删除项目并更新列表
- php - phpdotenv 下载很多包