在React Navigation中，隐藏堆栈导航器的标题

Question

我正在尝试使用堆栈导航器和选项卡导航器切换屏幕。

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

在这种情况下，首先使用堆栈导航器，然后使用标签导航器。 我想隐藏堆栈导航器的标题。 当我使用导航选项时，它并不能正常工作::

navigationOptions: { header: { visible: false } }

我正在尝试在使用StackNavigator的前两个组件上运行此代码。如果我使用这行代码，则会出现一些错误，如下所示：

- Avijit Dutta

Answer 1

更新：5版本起

在版本5中，选项headerShown在screenOptions中。

使用示例：

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

如果你只想在一个屏幕上隐藏标题，可以通过在屏幕组件上设置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,
  }
 }
);

- Perry

---

非常完美！感谢您的答案，但我添加后遇到了一个问题：将StackNavigator切换到TabNavigator后，一切正常。如果我想在从TabNavigator切换到StackNavigator时显示标题，我该怎么做？ - Avijit Dutta

嗯，这是一个很好的问题。老实说我不知道。你可以尝试在你想要显示它的屏幕上使用@Dpkstr的答案，而不是null，它应该是true。 - Perry

嗯，我已经尝试过这个了，但它还是不起作用...感谢你的第一个答案。我现在会使用一个按钮来实现第二个功能。 - Avijit Dutta

如果想要在v5+中隐藏特定屏幕的标题，应该使用options属性，像这样 <Stack.Screen options={{ headerShown: false, }} name="Artist" component={Artist} />。 - Oliver D

对我来说很有用。谢谢。 - Alejandro Gonzalez

Answer 2

在v4版本中，只需在要隐藏标题的页面中使用以下代码

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

请参考堆栈导航器(Stack Navigator)

- Dpkstr

---

它运行良好，但一个问题是当屏幕从stacknavigator切换到tabNavigator时（根据我的问题提到的），例如从OTPverification屏幕切换到列表屏幕时，两个标题都会显示。 - Avijit Dutta

你能告诉我你是如何精确地导航到List的吗？ - Dpkstr

Answer 3

在给定的解决方案中，通过 options={{headerShown:false}} 隐藏了 HomeScreen 的标题。

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

- Abhishek Kumar

Answer 4

v6

react navigation 6.x已删除headerMode属性。现在我们可以使用headerShown选项来实现相同的结果。

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

---

v5

在 React Navigation 5.x 中，您可以通过将 Navigator 的 headerMode 属性设置为 false 来隐藏所有屏幕的标题。

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

- Ajay Sivan

Answer 5

只需将此代码片段添加到您的类/组件中，标题将被隐藏

 static navigationOptions = { header: null }

- Vaibhav KB

Answer 6

{/*✌✌✌登录界面✌✌✌*/}

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

- Asim Khan

Answer 7

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>
      

P.S
const Stack = createNativeStackNavigator().

- Muneeb Ejaz

Answer 8

如果您的屏幕是一个类组件。

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

将此代码作为第一个方法（函数）编写到您的目标屏幕中。

- user7023664

---

正确的方法是 header: () => null，否则在页面加载时会出现标题故障。 - Cristian Tr

Answer 9

如果您使用的是 react-navigation 版本：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 />;   
}

- Roshan Wickramaarachchi

Answer 10

如果您想在特定屏幕上隐藏，则可以按如下方式操作：

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

- Waqar UlHaq