React native React navigation 5.x/React native–；具有相同组件实例的底部选项卡导航

我想在两个选项卡（底部栏选项卡）中重用同一组件的实例

使用

const Tab=createBottomTabNavigator（）创建

选项卡堆栈：

  <Tab.Navigator
      tabBarOptions={{
        activeTintColor: Colors.tabs.active,
        inactiveTintColor: Colors.tabs.inactive,
      }}>
      <Tab.Screen
        name="NavigationMap"
        component={Map}
        options={{
          tabBarLabel: 'Navigation',
        }}
      />
      <Tab.Screen
        name="DiscoveryMap"
        component={Map}
        options={{
          tabBarLabel: 'Discover',
        }}
      />
      <Tab.Screen
        name="Other"
        component={OtherComponent}
        options={{
          tabBarLabel: 'Other',
        }}
      />
  </Tab.Navigator>



我希望Android上的谷歌地图应用程序中有“探索”和“通勤”选项卡，我希望有相同的行为：保持在同一屏幕上，状态不同。我不想在两个选项卡之间完全重新加载我的地图（并且具有独立的缩放级别、中心…）

注意：我无法使用
tabPress
方法实现该行为。
您可以向两个屏幕添加
focus
侦听器。在这里，您可以设置可由
HomeNavigation
组件访问的上下文或全局状态，并更改行为

<Tab.Screen
  name="Home"
  component={HomeNavigation}
  listeners={{
    focus: () => console.warn('focused 1'),
  }}
/>
<Tab.Screen
  name="Home2"
  initialParams={{testing: true}}
  component={HomeNavigation}
  listeners={{
    focus: () => console.warn('focused 2'),
  }}
/>

console.warn（'focused 1'），
}}
/>
console.warn（'focused 2'），
}}
/>
您可以将
焦点
侦听器添加到两个屏幕。在这里，您可以设置可由
HomeNavigation
组件访问的上下文或全局状态，并更改行为

<Tab.Screen
  name="Home"
  component={HomeNavigation}
  listeners={{
    focus: () => console.warn('focused 1'),
  }}
/>
<Tab.Screen
  name="Home2"
  initialParams={{testing: true}}
  component={HomeNavigation}
  listeners={{
    focus: () => console.warn('focused 2'),
  }}
/>

console.warn（'focused 1'），
}}
/>
console.warn（'focused 2'），
}}
/>