React Navigation条件下共享SelectAddress页面的问题咨询

核心思路是只注册一次SelectAddress屏幕，避免重复定义导致的名称冲突，同时确保它在所有条件下都被导航器加载，从而实现全局可访问。

修改后的代码示例 #

<Stack.Navigator>
  {deliveryOutlet.deliveryAvailable === false ? (
    <Stack.Group>
      <Stack.Screen
        name="NotDeliverable"
        component={NotDeliverable}
        options={{
          ...baseScreenOptions,
        }}
      />
    </Stack.Group>
  ) : (
    <Stack.Group>
      <Stack.Screen
        name="BottomNavigator"
        component={BottomNavigator}
        options={{
          ...baseScreenOptions,
        }}
      />
    </Stack.Group>
  )}
  
  {/* 仅在此处定义一次SelectAddress，确保全局可用 */}
  <Stack.Screen
    name="OrderDetails"
    component={OrderDetails}
    options={{
      ...baseScreenOptions,
    }}
  />
  <Stack.Screen
    name="SelectAddress"
    component={SelectAddress}
    options={{
      ...baseScreenOptions,
      // 可选：根据deliveryAvailable动态配置导航栏选项
      headerTitle: deliveryAvailable ? "选择收货地址" : "修改地址"
    }}
  />
</Stack.Navigator>

逻辑说明 #

1. 消除重复定义：移除条件分支内的SelectAddress屏幕，只在条件判断外部保留一份注册，彻底解决重复页面名称的错误。
2. 全局可访问性：只要<Stack.Screen>被<Stack.Navigator>渲染，无论它在哪个<Stack.Group>中，都可以通过navigation.navigate('SelectAddress')在任何页面跳转访问，不受deliveryAvailable条件的限制。
3. 动态配置支持：如果需要根据deliveryAvailable给SelectAddress设置不同的导航栏样式或行为，直接在options中通过条件判断实现即可，无需重复注册屏幕。

可选优化（分组管理） #

如果需要将全局可用的屏幕统一归类，可以单独新增一个不受条件影响的<Stack.Group>：

<Stack.Navigator>
  {deliveryOutlet.deliveryAvailable === false ? (
    <Stack.Group>
      <Stack.Screen name="NotDeliverable" component={NotDeliverable} options={baseScreenOptions} />
    </Stack.Group>
  ) : (
    <Stack.Group>
      <Stack.Screen name="BottomNavigator" component={BottomNavigator} options={baseScreenOptions} />
    </Stack.Group>
  )}
  
  {/* 独立分组放置全局共享屏幕 */}
  <Stack.Group>
    <Stack.Screen name="OrderDetails" component={OrderDetails} options={baseScreenOptions} />
    <Stack.Screen name="SelectAddress" component={SelectAddress} options={baseScreenOptions} />
  </Stack.Group>
</Stack.Navigator>

内容的提问来源于stack exchange，提问作者HOSENUR