使用React Navigation在React Native中隐藏StackNavigator的标题栏

Question

我有以下内容：

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>？

- user818700

Answer 1

如果您想隐藏所有屏幕标题，则使用 @pitty 或 @burhan 的答案（虽然两者的答案相同），但如果要特定地删除一个屏幕标题，则只需在文档中提到的屏幕属性中使用 header：null 即可，如下所示：React Navigation，请像这样使用：

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

2020年2月更新 随着堆栈的新版本推出，现在您需要使用参数headerShown，其默认值为true，例如：

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

- Shahzad

Answer 2

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

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

- Pitty

Answer 3

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

- Burhan Yılmaz

Answer 4

版本：5.x

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

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

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

- Hamid Shoja

Answer 5

注意下面代码中的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>
      );
    };

- Sajid Javed

Answer 6

试试这个

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

- Igor Thierry

Answer 7

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

react-native-router-flux

在react-native导航方面更易于使用，在其中，您可以使用hideNavBar属性隐藏场景的标题栏，并且这里有文档Documentation对您有帮助。

- Harikrishnan S

Answer 8

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 });
  });

- 6rchid

Answer 9

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

你的导航选项应该看起来像这样，只需在代码中添加粗体行。

- Ahad Khwaja