使用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文档中提到的屏幕道具,所以像这样使用它:

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

Answer 2

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

Answer 3

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

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