{headerShown: false} 不影响 React Native Expo 中的屏幕

Question

在我的应用程序中有一些堆栈导航和一个选项卡导航。在我的应用程序的任何地方，我都禁用了 header。但在一个屏幕中，headerShown: false 不会影响屏幕并且仍然可见，包括后退箭头和白色背景。

我对 React Native 导航没有那么多经验。我可以想象我的应用程序导航结构存在根本性错误。

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import CreateScreen from './screens/CreateScreen';
import HomeScreen from './screens/HomeScreen';
import JoinScreen from './screens/JoinScreen';
import SettingsScreen from './screens/SettingsScreen';
import LoginScreen from './screens/LoginScreen';
import EventScreen from './screens/EventScreen';
import CamScreen from './screens/CamScreen';
import { MaterialIcons } from '@expo/vector-icons';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

function EventStack() {
    return (
        <Stack.Navigator >
            <Stack.Screen options={{ headerShown: false }} name="HomeScreen" component={HomeScreen} />
            <Stack.Screen options={{ headerShown: false }, ({ route }) => ({ title: route.params.eventData.eventtitle })} name="EventScreen" component={EventScreen} />
        </Stack.Navigator>
    );
}

function JoinStack() {
    return (
        <Stack.Navigator>
            <Stack.Screen options={{ headerShown: false }} name="JoinScreen" component={JoinScreen} />
            <Stack.Screen options={{ headerShown: false }, ({ route }) => ({ title: route.params.eventData.eventtitle })} name="EventScreen" component={EventScreen} />
        </Stack.Navigator>
    );
}

function CreateStack() {
    return (
        <Stack.Navigator >
            <Stack.Screen options={{ headerShown: false }} name="CreateScreen" component={CreateScreen} />
            <Stack.Screen options={{ headerShown: false }} name="EventScreen" component={EventScreen} />
        </Stack.Navigator>
    )
}

function SettingsStack() {
    return (
        <Stack.Navigator>
            <Stack.Screen options={{ headerShown: false }} name="SettingsScreen" component={SettingsScreen} />
            <Stack.Screen options={{ headerShown: false, tabBarVisible: false }} name="LoginScreen" component={LoginScreen} />
        </Stack.Navigator>
    )
}

function BottomTabs() {
    return (
        <Tab.Navigator
            screenOptions={({ route }) => ({
                tabBarIcon: ({ focused, color, size }) => {
                    let icon;
                    // TODO: Switch Icon Set to filled (active) & outline
                    if (route.name === 'Events') {
                        icon = focused ? 'list' : 'list';
                    } else if (route.name === 'CheckIn') {
                        icon = focused ? 'login' : 'login';
                    } else if (route.name === 'Cam') {
                        icon = focused ? 'camera' : 'camera';
                    } else if (route.name === 'Erstellen') {
                        icon = focused ? 'edit' : 'edit';
                    } else if (route.name === 'Einstellungen') {
                        icon = focused ? 'settings' : 'settings';
                    }
                    return (<MaterialIcons name={icon} size={size} color={color} />);
                },
                tabBarActiveTintColor: '#22d3ee',
                tabBarHideOnKeyboard: true,
                tabBarStyle: { backgroundColor: '#0f172a' },
            })}
        >
            <Tab.Screen name="Events" component={EventStack} options={{ headerShown: false }} />
            <Tab.Screen name="CheckIn" component={JoinStack} options={{ headerShown: false }} />
            <Tab.Screen name="Cam" component={CamScreen} options={{ headerShown: false }} />
            <Tab.Screen name="Erstellen" component={CreateStack} options={{ headerShown: false }} />
            <Tab.Screen name="Einstellungen" component={SettingsStack} options={{ headerShown: false }} />
        </Tab.Navigator>
    )
}

export default () => (
    <NavigationContainer>
        <Stack.Navigator>
            <Stack.Screen options={{ headerShown: false, tabBarVisible: false }} name="LoginScreen" component={LoginScreen} />
            <Stack.Screen options={{ headerShown: false }} name="BottomTabs" component={BottomTabs} />
        </Stack.Navigator>
    </NavigationContainer>
);

感谢您花时间帮助我。

Answer 1

如果你想在每个屏幕上隐藏 header 然后定义 headerShown: false in screenOptions in Screen.Navigator.

<Stack.Navigator screenOptions={{headerShown: false}}>
     .....
</Stack.Navigator>

{headerShown: false} 不影响 React Native Expo 中的屏幕

{headerShown: false} doesn't affect to the screen in react native expo

javascript

reactjs

react-native

react-navigation