Question

我使用的是 React Navigation 5。

在顶部，我有一个抽屉导航器，具有以下屏幕：

  <Drawer.Navigator>
    <Drawer.Screen name="One" component={StackNavigatorOne} />
    <Drawer.Screen name="Two" component={StackNavigatorTwo} />
    <Drawer.Screen name="Three" component={StackNavigatorThree} />
  <Drawer.Navigator/>

在 StackNavigatorOne 中，我有一个堆栈导航器，

<Stack.Navigator>
  <Stack.Screen name="Screen1" component={Screen1} />
  <Stack.Screen name="Screen2" component={Screen2} />
  <Stack.Screen name="Screen2" component={Screen3} />
</Stack.Navigator>

在 StackNavigatorOne 中，屏幕的默认顺序是 Screen1、Screen2、Screen3，所以调用这个 stack navigator 时，默认显示 Screen1。我不想改变这个顺序。

但是，从抽屉导航器中，当用户单击 DrawerScreen One 时，我希望用户转到 Screen2 中的 StackNavigatorOne。可以吗？

Answer 1

在 React Navigation 中，您可以选中 Nested Navigators。

首先选择您的根组件 One，然后选择 Stack Navigator 内的组件。

navigation.navigate('One', {
  screen: 'Screen2',
  params: {
    ...
  },
});

我认为，点击返回会从您导航的位置转到您的屏幕。如果您想转到 Screen1，请使用 lazy 选项作为 false。我没有在 drawerNavigator 中对此进行过测试，但对于底部导航器，我们使用 lazy 选项作为 false。

React Native Navigation：转到特定的堆栈导航屏幕

1 个答案: