React Navigation 在条件之间共享屏幕

Question

<Stack.Navigator>
      {deliveryOutlet.deliveryAvailable === false ?
        <Stack.Group>

          <Stack.Screen
            name="NotDeliverable"
            component={NotDeliverable}
            options={{
              ...baseScreenOptions,
            }}
          />
          <Stack.Screen
            name="SelectAddress"
            component={SelectAddress}
            options={{
              ...baseScreenOptions,
            }}
          />
        </Stack.Group>
        :
<Stack.Group>

        <Stack.Screen
          name="BottomNavigator"
          component={BottomNavigator}
          options={{
            ...baseScreenOptions,
          }}
        />}
      <Stack.Screen
        name="OrderDetails"
        component={OrderDetails}
        options={{
          ...baseScreenOptions,
        }}
      />
      <Stack.Screen
        name="SelectAddress"
        component={SelectAddress}
        options={{
          ...baseScreenOptions,
        }}
      />
</Stack.Group>

    </Stack.Navigator>

我希望能够转发到

SelectAddress

，即使 devlieryAvailable 是 true 或 false，这样做会给我一个重复的屏幕名称错误，从任何组中删除会使其在这种情况下不可用

Answer 1

您可以按照React-Naivgation文档中编写的有关在身份验证状态更改时删除共享屏幕的指南进行操作。

您可以从2个Stack组中提取公共页面

SelectAddress

并将其放在

<Stack.Navigator>

下。

<Stack.Navigator>
  {deliveryOutlet.deliveryAvailable === false ?
    <>
      <Stack.Screen
        name="NotDeliverable"
        component={NotDeliverable}
        options={{
          ...baseScreenOptions,
        }}
      />
    </>
    :
    <>
      <Stack.Screen
        name="BottomNavigator"
        component={BottomNavigator}
        options={{
          ...baseScreenOptions,
        }}
      />
      <Stack.Screen
        name="OrderDetails"
        component={OrderDetails}
        options={{
          ...baseScreenOptions,
        }}
      />
    </>
  }
  
  <Stack.Screen
    name="SelectAddress"
    component={SelectAddress}
    options={{
      ...baseScreenOptions,
    }}
  />
</Stack.Navigator>