隐藏嵌套堆栈导航器内部屏幕上的标签栏

Question

我想在嵌套的堆栈导航器中将标签栏隐藏在某些屏幕上。我有一个底部的选项卡栏，使用自定义标签栏，就像这样设置：

const MainAppBottomTabs = createBottomTabNavigator<BottomTabParamList>();
const MainAppBottomTabsNavigator = (): JSX.Element => {
    return (
        <MainAppBottomTabs.Navigator
            initialRouteName="ListScreen"
            screenOptions={{
                headerShown: false
            }}
            tabBar={(props: BottomTabBarProps) => (
                <TabBar
                    state={props.state}
                    navigation={props.navigation}
                    descriptors={props.descriptors}
                    insets={props.insets}
                /> // this is my custom tab bar
            )}>
            <MainAppBottomTabs.Screen
                name="ListScreen"
                component={ListScreen}
            />
            <MainAppBottomTabs.Screen
                name="ProductsScreen"
                component={ProductsScreen}
            />
            <MainAppBottomTabs.Screen
                name="DetailsStackNavigator"
                component={DetailsStackNavigator}
            />
        </MainAppBottomTabs.Navigator>
    );
};

这是嵌套delectStackNavigator：

const DetailsStack = createNativeStackNavigator();
const DetailsStackNavigator = (): JSX.Element => {
    return (
        <DetailsStack.Navigator
            initialRouteName="UsersScreen"
            screenOptions={{
                headerShown: false
            }}>
            <DetailsStack.Screen
                name="UsersScreen"
                component={UsersScreen}
                options={{ animation: 'none' }}
            />
            <DetailsStack.Screen
                name="OptionsScreen"
                component={OptionsScreen}
                options={{ animation: 'none' }}
            />
            <DetailsStack.Screen name="OptionsDetailsScreen" component={OptionsDetailsScreen} />
            <DetailsStack.Screen name="UsersDetailsScreen" component={UsersDetailsScreen} />
        </DetailsStack.Navigator>
    );
};

我想在optionsdetailsscreen和详细信息Stacknavigator内的用户detailsscreen 。我已经尝试了以下几个，但确实隐藏了标签栏，但是它切断了底部的屏幕：

const MainAppBottomTabs = createBottomTabNavigator<BottomTabParamList>();
const MainAppBottomTabsNavigator = (): JSX.Element => {
    const getTabBarVisibility = (route) => {
        const routeName = getFocusedRouteNameFromRoute(route);
        const hideOnScreens = ['OptionsDetailsScreen', 'UsersDetailsScreen'];
        return hideOnScreens.indexOf(routeName) <= -1 ? 'flex' : 'none';
    };
    return (
        <MainAppBottomTabs.Navigator
            // rest of code from above
            <MainAppBottomTabs.Screen
                name="DetailsStackNavigator"
                component={DetailsStackNavigator}
                options={({ route }) => ({
                    tabBarStyle: { display: getTabBarVisibility(route) }
                })}
            />
        </MainAppBottomTabs.Navigator>
    );
};

然后在我的自定义标签栏中：

const TabBar = (screenProps: ScreenProps): JSX.Element => {
    const focusedOptions = screenProps.descriptors[screenProps.state.routes[screenProps.state.index].key].options;

    if (focusedOptions?.tabBarStyle?.display === 'none') {
        return null;
    }
    return <View>{RenderTabs(screenProps)}</View>;
};

不确定要尝试什么。对于我认为这将是一个非常普遍的情况，似乎太困难了。