如何隐藏特定屏幕上的底部标签栏（反应导航 5.x）

Question

我想知道如何在堆栈导航器内的特定屏幕上隐藏底部标签栏，我的代码如下。我只想隐藏播放器屏幕的底部选项卡，或者使用模态打开播放器屏幕有人可以帮我吗？

这是我的主标签导航器代码

import React from 'react';
import { StatusBar } from 'react-native';
import { NavigationContainer, DarkTheme } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

//views
import HomeStack from './src/views/Home';
import SearchStack from './src/views/Search';
import MoviesStack from './src/views/Movies';
import SeriesStack from './src/views/Series';
import Other from './src/views/Other';

//icons
import {
    HomeIcon,
    SearchIcon,
    MovieIcon,
    SeriesIcon,
    OtherIcon,
} from './src/components/icons';

const Tab = createBottomTabNavigator();

export default function App() {
    return (
        <>
            <StatusBar barStyle="dark-content" />
            <NavigationContainer theme={DarkTheme}>
                <Tab.Navigator
                    initialRouteName="Home"
                    tabBarOptions={{
                        activeTintColor: 'white',
                        keyboardHidesTabBar: false,
                    }}
                >
                    <Tab.Screen
                        name="Home"
                        component={HomeStack}
                        options={{
                            tabBarLabel: 'Home',
                            tabBarIcon: ({ focused }) => (
                                <HomeIcon
                                    fill={focused ? 'white' : 'gray'}
                                    width={24}
                                    height={24}
                                />
                            ),
                        }}
                    />
                    <Tab.Screen
                        name="Search"
                        component={SearchStack}
                        options={{
                            tabBarLabel: 'Search',
                            tabBarIcon: ({ focused }) => (
                                <SearchIcon
                                    stroke={focused ? 'white' : 'gray'}
                                    width={24}
                                    height={24}
                                />
                            ),
                        }}
                    />
                    <Tab.Screen
                        name="Movie"
                        component={MoviesStack}
                        options={{
                            tabBarLabel: 'Movie',
                            tabBarIcon: ({ focused }) => (
                                <MovieIcon
                                    color={focused ? 'white' : 'gray'}
                                    width={24}
                                    height={24}
                                />
                            ),
                        }}
                    />
                    <Tab.Screen
                        name="Series"
                        component={SeriesStack}
                        options={{
                            tabBarLabel: 'Series',
                            tabBarIcon: ({ focused }) => (
                                <SeriesIcon
                                    color={focused ? 'white' : 'gray'}
                                    width={24}
                                    height={24}
                                />
                            ),
                        }}
                    />
                    <Tab.Screen
                        name="Other"
                        component={Other}
                        options={{
                            tabBarLabel: 'Other',
                            tabBarIcon: ({ focused }) => (
                                <OtherIcon
                                    fill={focused ? 'white' : 'gray'}
                                    width={24}
                                    height={24}
                                />
                            ),
                        }}
                    />
                </Tab.Navigator>
            </NavigationContainer>
        </>
    );
}

这是我的主堆栈导航器的代码

import React from 'react';
import { View, Image } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';

//components
import Screen from '../components/Screen';
import HomeList from '../components/HomeList';

//views
import MovieDetail from './MovieDetail';
import SeriesDetail from './SeriesDetail';
import Player from './Player';

function Home({ navigation }) {
    return (
        <Screen>
            <View>
                <Image source={require('../../assets/logo.png')} />
                ...
            </View>
        </Screen>
    );
}

const Stack = createStackNavigator();

export default function HomeStack() {
    return (
        <Stack.Navigator
            screenOptions={{
                headerShown: false,
            }}
        >
            <Stack.Screen name="Home" component={Home} />
            <Stack.Screen name="MovieDetail" component={MovieDetail} />
            <Stack.Screen name="SeriesDetail" component={SeriesDetail} />
            <Stack.Screen name="Player" component={Player} />
        </Stack.Navigator>
    );
}

这是我用于将数据发送到要隐藏的页面的页面的堆栈导航器的代码

import React from 'react';
import {
    View,
    Text,
    TouchableOpacity,
} from 'react-native';

//components
import Screen from '../components/Screen';
import Loading from '../components/Loading';


export default function MovieDetail({ route, navigation }) {
    const { id, title } = route.params;
    return (
        <Screen>
            <TouchableOpacity
                activeOpacity={0.7}
                onPress={() =>
                    navigation.navigate('Player', {
                        uri: 'https://blabla.com',
                    })
                }
            >
                <PlayIcon color="black" />
                <Text>
                    Play
                </Text>
            </TouchableOpacity>
        </Screen>
    );
}

我想在这里隐藏标签栏

import React from 'react';
import WebView from 'react-native-webview';

export default function Player({ route }) {
    const { uri } = route.params;
    return (
        <WebView source={{ uri }} />
    );
}

Answer 1

Ciao，你可以像这样在播放器屏幕中隐藏底部标签栏：

1. 像这样修改您的 Tab.Screen Home：

<Tab.Screen
    name="Home"
    component={HomeStack}
    options={({ route }) => ({
        tabBarLabel: 'Keşfet',
        tabBarIcon: ({ focused }) => (
            <HomeIcon
                fill={focused ? 'white' : 'gray'}
                width={24}
                height={24}
            />
        ),
        tabBarVisible: getTabBarVisibility(route),
    })}
/>

1. 然后创建getTabBarVisibility函数来检查根的名字是Player：

const getTabBarVisibility = (route) => {
    const routeName = route.state
        ? route.state.routes[route.state.index].name
        : '';

    if (routeName === 'Player') {
        return false;
    }

    return true;
};

就是这样。现在，如果您导航到播放器页面，tabBar 就会消失。