1

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

创建于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方法实现该行为。

4

1 回答 1

0

您可以将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'),
  }}
/>
于 2020-05-14T02:16:11.733 回答