Hide header on StackNavigator with React Navigation in React Native

问题

I have the following:

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

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

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?

回答1:

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
    },
},

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
     },
},

回答2:

try to add { headerMode: 'none' } in your stactNavigator

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

回答3:

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

回答4:

Try this

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

回答5:

Version: 5.x

headerShown Whether to show or hide the header for the screen. The header is shown by default unless:

The headerMode prop on the navigator was set to none. The screen is in a stack nested in another stack navigator's screen which has a header. Setting this to false hides the header. When the header is hidden in a nested stack, you can explicitly set it to true to show it.

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

回答6:

I think in stackNavigator you can use the headerMode: 'none' to hide the header. And one more thing, you can take this as a suggestion, use

react-native-router-flux

which would be more easy to use in case of navigations in react-native, and in there you can hide the header using the hideNavBar prop to the scenes and here is the documentation which would be helpful to you on the same Documentation

回答7:

Notice options={{headerShown: false}} in the below code. It's working with the latest version(^5.9.0) with me. Thank you.

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

回答8:

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

Your navigation options should look something like this, just add the bold lines in your code.

来源：https://stackoverflow.com/questions/48441620/hide-header-on-stacknavigator-with-react-navigation-in-react-native

标签

reactjs

react-native

react-navigation