如何包装每个选项卡。屏幕在同一组件中

Question

当使用React-Navigation的bottom tabnavigator时，如何将每个屏幕用组件包装？例如，说我有一些类似的选项卡：

<NavigationContainer>
      <Tab.Navigator tabBar={(props) => <MyTabBar {...props} />}>
          <Tab.Screen name="Home" component={HomeScreen} />
          <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
</NavigationContainer>

我想用相同的组件包装这两个屏幕，但是我需要塔巴尔得到的相同道具，因为我想根据活动路线在包装组件中渲染一些不同的东西。 我可以在每个屏幕的渲染中手动添加组件，但是我想将其放在一个地方，并动态弄清楚渲染内容。

仅供参考，在React-Navigation v4中，我可以这样做：

// CustomTabView component

const { routes, index } = navigation.state;
const route = routes[index];
const descriptor = descriptors[route.key];
const ActiveScreen = descriptor.getComponent();
const currentKey = descriptor.key;

<View style={Styles.container}>
    <ShellHeader
        icon={route.params.actionIcon}
        currentRoute={route}
        currentTab={currentKey}
    />
    <ActiveScreen navigation={descriptor.navigation} />
    <CustomTabBar navigation={navigation} />
</View>

const AppContainer = createAppContainer(createNavigator(CustomTabView, CustomTabRouter, {}));

fastortabrouter看起来像：

const CustomTabRouter = TabRouter(
    {
        Home: {
            screen: HomeScreen,
            params: {
                key: 'history',
                actionIcon: {
                    navigation: () => NavigationService.navigateToHomeScreen()
                }
            }
        },
        Settings: {
            screen: SettingsScreen,
            params: {
                key: 'contacts',
                actionIcon: {
                    navigation: () => NavigationService.navigateToSettingsScreen()
                }
            }
        }
    {
        initialRouteName: 'Home'
    }
);

但是在v6中不起作用，因为没有create> createEappContainer