在 React Native 中使用 React Navigation 隐藏 StackNavigator 上的标题答案

【问题标题】：Hide header on StackNavigator with React Navigation in React Native在 React Native 中使用 React Navigation 隐藏 StackNavigator 上的标题
【发布时间】：2018-07-04 15:04:30
【问题描述】：

我有以下几点：

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

class ChatScreen extends React.Component {
  render() {
    return (
      <View>
        <Text>Chat with Lucy</Text>
      </View>
    );
  }
}

const SimpleApp = StackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'Home'
    },
  },
  Chat: {
    screen: ChatScreen,
    navigationOptions: {
      title: 'Chat with Lucy'
    }
  },
});

export default class App extends React.Component {
  render() {
    return <SimpleApp />;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
});

在HomeScreen 上现在有一个如下所示的标题：

如何隐藏此标题？我只想要一个空白屏幕，或者在这种情况下，只显示<Text>Hello, Chat App!</Text>？

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案1】：

headerMode: 'none' 不适用于最新的 React Navigation。禁用顶部屏幕的默认标题设置导航器上的screenOptions={{ header: () => null }}：

    <SpaceStack.Navigator screenOptions={{ header: () => null }}>
      <SpaceStack.Screen name="Workspaces" component={WorkspaceScreen} />
      <SpaceStack.Screen name="Details" component={WorkspaceDetailScreen} />
    </SpaceStack.Navigator>

禁用其他标题（由孩子或其他导航器设置）设置屏幕上options={{ headerShown: false }}：

    <SpaceStack.Navigator>
      <SpaceStack.Screen name="Workspaces" component={WorkspaceScreen} />
      <SpaceStack.Screen name="Details" options={{ headerShown: false }} component={WorkspaceDetailScreen} />
    </SpaceStack.Navigator>

要禁用 嵌套导航器的子级 的标题，尽管它会在运行后从同一堆栈的其他屏幕上关闭，但请在子组件中设置：

  useLayoutEffect(() => {
    navigation.getParent().setOptions({ header: () => null });
  });

【讨论】：

【解决方案2】：

注意以下代码中的 options={{headerShown: false}}。它与我一起使用最新版本（^5.9.0）。谢谢。

const App = () => {
      return (
        <NavigationContainer>
          <Stack.Navigator initialRouteName="Home">
            <Stack.Screen
              name="Home"
              component={HomeScreen}
              options={{headerShown: false}}
            />
          </Stack.Navigator>
        </NavigationContainer>
      );
    };

【讨论】：

【解决方案3】：

版本：5.x

headerShown 是否显示或隐藏屏幕的标题。默认情况下会显示标题，除非：

导航器上的 headerMode 属性设置为无。该屏幕位于嵌套在另一个堆栈导航器屏幕中的堆栈中，该屏幕具有标题。将此设置为 false 会隐藏标题。当标题隐藏在嵌套堆栈中时，您可以将其显式设置为 true 以显示它。

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

【讨论】：

【解决方案4】：

如果您想隐藏所有屏幕标题，请使用@pitty 或@burhan 答案（尽管两者都有相同的答案），但如果要专门删除屏幕标题，则只需将header: null 用于@文档中提到的屏幕道具987654321@ 所以这样使用：

Home: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'Home',
      header: null //this will hide the header
    },
},

2020 年 2 月更新 使用new release of stack 现在您需要使用参数headerShown，默认为真，例如

Home: {
     screen: HomeScreen,
     navigationOptions: {
       title: 'Home',
       headerShown: false
     },
},

【讨论】：

【解决方案5】：

尝试添加{ headerMode: 'none' } 在你的stactNavigator

const SimpleApp = StackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'Home'
    },
  },
  Chat: {
    screen: ChatScreen,
    navigationOptions: {
      title: 'Chat with Lucy'
    }
  },
}, {headerMode: 'none'});

【讨论】：

【解决方案6】：

const RootStack = createStackNavigator(
{
LandingPage: LandingPage,
HomeScreen: HomeScreen,
Login: Login
},
{
initialRouteName: 'LandingPage',
**header: null,
headerMode: 'none'**
}
);
const AppContainer = createAppContainer(RootStack);

您的导航选项应如下所示，只需在代码中添加粗体即可。

【讨论】：

【解决方案7】：

试试这个

Login: {
    screen: Login,
    navigationOptions: {
      title: '',
      headerTransparent:true,
    }
  },

【讨论】：

【解决方案8】：

我认为在 stackNavigator 中您可以使用 headerMode: 'none' 来隐藏标题。还有一件事，您可以将此作为建议，使用

react-native-router-flux

如果在 react-native 中导航会更容易使用，并且您可以在其中使用 hideNavBar 道具隐藏标题到场景这是对您有帮助的文档Documentation

【讨论】：

【解决方案9】：

    const SimpleApp = StackNavigator({
      Home: {
        screen: HomeScreen,
        navigationOptions: {
          title: 'Home'
        },
      },
      Chat: {
        screen: ChatScreen,
        navigationOptions: {
          title: 'Chat with Lucy'
        }
      },
{ headerMode: 'none'}
);

【讨论】：