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

【问题标题】：React navigation 5.x / React native – bottom-tabs navigation with same instance of componentReact navigation 5.x / React native – 具有相同组件实例的底部选项卡导航
【发布时间】：2020-08-29 18:05:59
【问题描述】：

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

使用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 上的 Google 地图应用程序中具有相同的行为：以不同的状态保持在同一屏幕上。我不想在 2 个选项卡之间完全重新加载我的地图（并且具有独立的缩放级别、中心、...）。

注意：我无法使用 tabPress 方法实现该行为。

【问题讨论】：

标签： react-native react-navigation-v5 react-navigation-bottom-tab

【解决方案1】：

您可以将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'),
  }}
/>

【讨论】：