使用React Native中的React Navigation隐藏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>？

Answer 1

如果你想隐藏所有屏幕标题然后使用@pitty或@burhan答案（虽然两者都有相同的答案）但是为了专门删除一个屏幕标题然后只需使用header: null作为文档中提到的屏幕道具React Navigation的{{3}}如此使用它：

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

Answer 2

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

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

Answer 3

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

Answer 4

尝试一下

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

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

Answer 6

我认为在stackNavigator中你可以使用MessageDestinationType隐藏标题。还有一件事，你可以把它作为一个建议，使用

  

反应天然路由器通量

如果在react-native中导航会更容易使用，并且在那里你可以使用 hideNavBar 道具隐藏标题到场景 以下是在同一Documentation

上对您有所帮助的文档

Answer 7

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

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

一切顺利：）

Answer 8

版本：5.x

标题已显示 是显示还是隐藏屏幕标题。默认情况下显示标题，除非：

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

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