React Native Navigation：从堆栈导航器中删除屏幕答案

【问题标题】：React Native Navigation: Remove screen from stack navigatorReact Native Navigation：从堆栈导航器中删除屏幕
【发布时间】：2021-01-13 12:10:44
【问题描述】：

我正在使用 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 时，用户转到Screen 1 的StackNavigatorOne。从屏幕 1 开始，用户会在几秒钟后转到 Screen2。

一旦用户到达Screen2，我想将Screen 1从StackNavigatorOne中完全删除，这样下次用户在抽屉里点击StackNavigatorOne时，现在就没有Screen1了，而用户直接带到Screen2。这可能吗？你能帮忙吗？

【问题讨论】：

您可以通过 redux 或 context 设置全局状态。而当屏幕1显示一次时，可以将此状态设置为true，如isScreenOneDisplayed={true}。在您的堆栈导航器中，基于此状态，您可以渲染您想要的屏幕。如果不够清楚，我可以给你更多细节。
这个解决方案对我有用。我正在使用redux。那么，我应该有条件地渲染屏幕吗？

标签： react-native react-navigation

【解决方案1】：

是的，因为您使用的是 React Navigation 5，您可以有条件地渲染您的堆栈或屏幕。例如；

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

【讨论】：