在堆棧導航器 React 導航中隱藏 header

Question

我正在嘗試使用堆棧和選項卡導航器切換屏幕。

const MainNavigation = StackNavigator({
      otp: { screen: OTPlogin },
      otpverify: { screen: OTPverification},
      userVerified: {
        screen: TabNavigator({
          List: { screen: List },
          Settings: { screen: Settings }
        }),
      },
    });

在這種情況下，首先使用堆棧導航器，然后使用選項卡導航器。 我想從堆棧導航器中隱藏標題。 當我使用以下導航選項時，它無法正常工作：

navigationOptions: { header: { visible: false } }

我在 stacknavigator 中使用的前兩個組件上嘗試此代碼。 如果我使用此行，則會出現一些錯誤，例如：

Answer 1

從第 5 版開始更新

從版本 5 開始，它是選項headerShown in screenOptions

用法示例：

<Stack.Navigator
  screenOptions={{
    headerShown: false
  }}
>
  <Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>

如果您只想在 1 個屏幕上隱藏標題，您可以通過在屏幕組件上設置 screenOptions 來完成此操作，請參見下面的示例：

<Stack.Screen options={{headerShown: false}} name="route-name" component={ScreenComponent} />

另請參閱有關第 5 版的博客

更新
從 2.0.0-alpha.36 (2019-11-07) 版本開始，
有一個新的導航選項： headershown

      navigationOptions: {
        headerShown: false,
      }

https://reactnavigation.org/docs/stack-navigator#headershown

https://github.com/react-navigation/react-navigation/commit/ba6b6ae025de2d586229fa8b09b9dd5732af94bd

舊答案

我用它來隱藏堆棧欄（注意這是第二個參數的值）：

{
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false,
    }
}

當您使用此方法時，它將隱藏在所有屏幕上。

在您的情況下，它將如下所示：

const MainNavigation = StackNavigator({
  otp: { screen: OTPlogin },
  otpverify: { screen: OTPverification },
  userVerified: {
    screen: TabNavigator({
    List: { screen: List },
    Settings: { screen: Settings }
   }),
 }
},
{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
 }
);

Answer 2

在 v4 上，只需在要隱藏標題的頁面中使用以下代碼

export default class Login extends Component {
    static navigationOptions = {
        header: null
    }
}

請參閱堆棧導航器

Answer 3

只需將其添加到您的類/組件代碼片段中，Header 將被隱藏

 static navigationOptions = { header: null }

Answer 4

在給定的解決方案中，HomeScreen 的標題是隱藏的，選項={{headerShown:false}}

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen} options={{headerShown:false}}/>
    <Stack.Screen name="Details" component={DetailsScreen}/>
  </Stack.Navigator>
</NavigationContainer>

Answer 5

如果你的屏幕是一個類組件

static navigationOptions = ({ navigation }) => {
    return {
       header: () => null
    } 
}

在您的目標屏幕中將其編碼為第一種方法（函數）。

Answer 6

如果你想隱藏在特定屏幕上而不是這樣：

// create a component
export default class Login extends Component<{}> {
  static navigationOptions = { header: null };
}

Answer 7

我正在使用header : null而不是header : { visible : true }我正在使用 react-native cli。 這是例子：

static navigationOptions = {
   header : null   
};

Answer 8

在 stackNavigator 中添加新的 navigationOptions 對象。

試試這個：

const MainNavigator = createStackNavigator({
  LoginPage: {screen : LoginPageContainer, navigationOptions: { header: null } },
  MiddlePage: {screen : MiddlePageContainer, navigationOptions: { header: null } },
  SMS: {screen: ShowSmsContainer, navigationOptions: { header: null } },
  Map: {screen: ShowMapContainer, navigationOptions: { header: null } }
});

希望它有幫助。

Answer 9

如果有人在 componentDidMount 中搜索如何切換標題，請編寫如下內容：

  this.props.navigation.setParams({
      hideHeader: true,
  });

什么時候

static navigationOptions = ({ navigation }) => {
    const {params = {}} = navigation.state;

    if (params.hideHeader) {
      return {
        header: null,
      }
    }

    return {
        headerLeft: <Text>Hi</Text>,
        headerRight: <Text>Hi</Text>,
        headerTitle: <Text>Hi</Text>
    };
};

當事件完成工作時的某個地方：

this.props.navigation.setParams({
  hideHeader: false,
});

Answer 10

這對我有用：

const Routes = createStackNavigator({
Intro: {
    screen: Intro,
    navigationOptions: {
        header: null,
    }
}
},
    {
        initialRouteName: 'Intro',
    }
);

Answer 11

您可以像這樣隱藏標題：

<Stack.Screen name="Login" component={Login} options={{headerShown: false}}  />

Answer 12

采用

static navigationOptions = { header: null } 

在類/組件中

class Login extends Component {

    static navigationOptions = {
        header: null
    }
}

Answer 13

如果你使用 react-navigation Version: 6.x 你可以這樣使用。 在這里，SignInScreen 標題將被以下代碼段隱藏

options={{  
   headerShown: false,  
}} 

完整的腳本應該是

import {createStackNavigator} from '@react-navigation/stack';  
import SignInScreen from '../screens/SignInscreen';  
import SignUpScreen from '../screens/SignUpScreen';  
const Stack = createStackNavigator();    
function MyStack() {  
 return (   
   <Stack.Navigator>   
     <Stack.Screen   
       name="Sing In"  
       component={SignInScreen}  
       options={{  
         headerShown: false,  
       }}   
     />  
     <Stack.Screen name="Sing Up" component={SignUpScreen} />   
   </Stack.Navigator>   
 );    
}  
export default function LoginFlowNavigator() {    
 return <MyStack />;   
}

Answer 14

React Native Navigation v6.x 2022 年 5 月

在 Screen 的options屬性中的headerShown屬性中設置false

        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen
            name="Home"
            component={Home}
            options={{ headerShown: false }}
          />
        </Stack.Navigator>
      

附言
const Stack = createNativeStackNavigator() 。

Answer 15

在您的目標屏幕中，您必須對此進行編碼！

 static navigationOptions = ({ navigation }) => {
    return {
       header: null
    }
 }

Answer 16

所有的答案都展示了如何使用類組件來做到這一點，但對於功能組件，您可以這樣做：

const MyComponent = () => {
    return (
        <SafeAreaView>
            <Text>MyComponent</Text>
        </SafeAreaView>
    )
}

MyComponent.navigationOptions = ({ /*navigation*/ }) => {
    return {
        header: null
    }
}

如果您刪除標題，您的組件可能位於您看不到它的地方（當手機沒有方形屏幕時），因此在刪除標題時使用它很重要。

Answer 17

 <Stack.Screen
    name="SignInScreen"
    component={Screens.SignInScreen}
    options={{ headerShown: false }}
  />

options={{ headerShown: false }}對我options={{ headerShown: false }} 。

** "@react-navigation/native": "^5.0.7", "@react-navigation/stack": "^5.0.8",

Answer 18

在react navigation 5.x 中，您可以通過將Navigator的headerMode設置為false來隱藏所有屏幕的標題。

<Stack.Navigator headerMode={false}>
   {/* Your screens */}
</Stack.Navigator>

Answer 19

這適用於堆棧導航

<Stack.Screen
    name="Home"
    component={HomeComponent}
    options={{
        headerShown: false,
    }}
/>

Answer 20

如果您只想將其從react-native-navigation一個屏幕中刪除，則：

<Stack.Navigator>
    <Stack.Screen 
            name="Login" 
            component={Login} 
            options= {{headerShown: false}} />
</Stack.Navigator>

Answer 21

對我來說， navigationOptions不起作用。 以下對我有用。

<Stack.Screen name="Login" component={Login}
      options={{
               headerShown: false
              }}
     />

Answer 22

const MyNavigator = createStackNavigator({
  FirstPage: {screen : FirstPageContainer, navigationOptions: { headerShown:false } },
  SecondPage: {screen : SecondPageContainer, navigationOptions: { headerShown: false } }
});

//header:null will be removed from upcoming versions

Answer 23

您可以像這樣隱藏 StackNavigator 標頭：

const Stack = createStackNavigator();
function StackScreen() {
    return (
        <Stack.Navigator
            screenOptions={{ headerShown: false }}>
            <Stack.Screen name="Login" component={Login} />
            <Stack.Screen name="Training" component={Training} />
            <Stack.Screen name="Course" component={Course} />
            <Stack.Screen name="Signup" component={Signup} />
        </Stack.Navigator>
    );
}

Answer 24

這將從組件類中刪除標題。

export default class SampleClass extends Component {
    navigationOptions = {
       headerMode: 'none'
    }
...
}

Answer 25

const CallStack = createStackNavigator({
  Calls: Calls,
  CallsScreen:CallsScreen,
}, {headerMode: 'none'});

CallStack.navigationOptions = {
  tabBarLabel: 'Calls',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
    />
  ),

   header: null,

        headerVisible: false,

};

Answer 26

在最新版本的 react-navigation 中，這可以隱藏每個屏幕上的標題：headerMode={'none'}

 <Stack.Navigator headerMode={'none'} > <Stack.Screen name="Home" component={HomeScreen}/> <Stack.Screen name="Details" component={DetailsScreen}/> </Stack.Navigator>

Answer 27

使用最新的react-navigation-stack v4，您可以隱藏標題

import { createStackNavigator } from 'react-navigation-stack';

createStackNavigator({
 stackName: {
  screen:ComponentScreenName,
  navigationOptions: {
    headerShown:false
  }
 }
})

Answer 28

您只能在新的更新版本中使用 headerShown:false ( react-naviagion 版本 6 )

import { createStackNavigator } from '@react-navigation/stack';
    const Util = createStackNavigator();
    const UtilStack = () =>{
        return(
            <Util.Navigator>
                <Util.Screen name='Splash' component={Splash} options={{ headerShown: false }}/>
            )
            <Util.Navigator>
     }

Answer 29

我遇到了同樣的問題，但是我已經使用navigationOptions在各個類中完成了標頭工作，並且正在使用createBottomTabNavigator其標頭可見，而類的標頭不可見。 我已經嘗試了諸如headerMode: none ， header: null等之類的所有操作，但是無法隱藏bottomTabNavigator的標題。

Answer 30

將您使用的 react-navigation 庫版本與解決方案相匹配很重要，因為它們都是不同的。 對於那些像我一樣出於某種原因仍在使用 react-navigation v1.0.0 的人，這兩種方法都有效：

要在單個屏幕上禁用/隱藏標題：

const AppScreens = StackNavigator(
  {
    Main: { screen: Main, navigationOptions: { header: null } },
    Login: { screen: Login },
    Profile: { screen: Profile, navigationOptions: { header: null } },
  });

要一次禁用/隱藏所有屏幕，請使用以下命令：

const AppScreens = StackNavigator(
  {
    Main: { screen: Main},
    Login: { screen: Login },
    Profile: { screen: Profile },
  },
  {
    headerMode: 'none',
  }
);

Answer 31

1. 對於單屏，您可以像這樣在 createStackNavigator 中設置header:null或headerShown: false

    const App = createStackNavigator({ First: { screen: Home, navigationOptions: { header: null, }, }, });

2. 使用 defaultNavigationOptions 一次性隱藏所有屏幕的標題

   const App = createStackNavigator({ First: { screen: HomeActivity, }, }, { defaultNavigationOptions: { header: null }, });

Answer 32

如果要從所有屏幕中刪除標題，請轉到 app.js 並將此代碼添加到 Stack.Navigator

screenOptions={ { headerShown: false } }

Answer 33

在V4 上你必須使用這個：

headerLeft: () => { }

這是不推薦使用的：

header: null

Answer 34

嘗試最好的方法，下面的代碼對我有用。

options={{
    headerShown: false,
    }}

將上面的代碼放在 <Stack.Screen 標簽中。

<Stack.Navigator>
      <Stack.Screen name="LogOut" component={LogOut} options={{
             headerShown: false,
                }}   />
            </Stack.Navigator>
        </NavigationContainer>

Answer 35

從特定屏幕隱藏 header 的另一種方法是嘗試使用 React 中的 useLayoutEffect。 像這樣：

import { View, Text, Button } from "react-native";
import React, { useLayoutEffect } from "react";
import { useNavigation } from "@react-navigation/native";
import useAuth from "../hooks/userAuth";
const HomeScreen = () => {
  const navigation = useNavigation();
  const { logout } = useAuth();
  useLayoutEffect(() => {
    navigation.setOptions({
      headerShown: false,
    });
  }, []);

  return (
    <View>
      <Text>I am the HomeScreen</Text>
      <Button
        title="Go to Chat Screen"
        onPress={() => navigation.navigate("Chat")}
      />

      <Button title="Logout" onPress={logout} />
    </View>
  );
};

export default HomeScreen;

這通常允許隱藏組件 header 並且它將在屏幕渲染時執行。

Answer 36

對於 4.x，不推薦使用header: null ，應使用headerShown: false代替

例如：

const AppScreens = createStackNavigator({
  cover: {
    screen: Login,
    path: '/login',
    navigationOptions: () => ({
      headerShown: false,
    }),
  },
})

Answer 37

/*...*/
import { createNativeStackNavigator } from "@react-navigation/native-stack";
/*...*/

const {Navigator, Screen } =createNativeStackNavigator();

export function AuthRoutes(){
    return (
        <Navigator
            screenOptions={
                
                {
                    contentStyle:{
                        backgroundColor: 'transparent'
                    },
                    headerShown: false
                }
            }    
        >
            

        </Navigator>
    )

}