使用 React Native 中的 React Navigation 在 StackNavigator 上隐藏标题 [英] Hide header on StackNavigator with React Navigation in React Native

问题描述

我有以下几点:

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 上，现在有一个标题，如下所示:

On HomeScreen there's a header now that looks like this:

如何隐藏这个标题?我只想要一个空白屏幕，或者在这种情况下，只需要 Hello, Chat App! 来显示?

How do I hide this header? I just want a blank screen, or in this case, just the <Text>Hello, Chat App!</Text> to show?

推荐答案

如果您想隐藏所有屏幕标题，请使用@pitty 或 @burhan 答案(尽管两者都有相同的答案)，但要专门删除屏幕标题，则只需使用header: null 用于 React Navigation<的文档中提到的屏幕道具/a> 所以像这样使用它:

if you want to hide all screen header then use @pitty or @burhan answers (although both have same answer) but for specifically remove a screen header then just use header: null for the screen props as mentioned in the documentation of React Navigation so use it like this:

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

2020 年 2 月更新使用 新版本的堆栈 现在您需要使用参数 headerShown 默认为 true 例如

Update February 2020 With new release of stack now you need to use param headerShown which default is true e.g.

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

这篇关于使用 React Native 中的 React Navigation 在 StackNavigator 上隐藏标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！