web-dev-qa-db-fra.com

Masquer l'en-tête sur StackNavigator avec React Navigation dans React Native

J'ai ce qui suit:

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

Sur HomeScreen, il y a maintenant un en-tête qui ressemble à ceci:

enter image description here

Comment masquer cet en-tête? Je veux juste un écran vide, ou dans ce cas, juste le <Text>Hello, Chat App!</Text> montrer?

reactjsreact-nativereact-navigation
6
user818700

si vous souhaitez masquer tous les en-têtes d'écran, utilisez les réponses @pitty ou @burhan (bien que les deux aient la même réponse) mais pour supprimer spécifiquement un en-tête d'écran, utilisez simplement header: null pour les accessoires d'écran comme mentionné dans la documentation de React Navigation alors utilisez-le comme ceci:

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

Mise à jour de février 2020 Avec nouvelle version de la pile vous devez maintenant utiliser param headerShown dont la valeur par défaut est vraie, par exemple.

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

essayez d'ajouter { headerMode: 'none' } dans votre stactNavigator

const SimpleApp = StackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'Home'
    },
  },
  Chat: {
    screen: ChatScreen,
    navigationOptions: {
      title: 'Chat with Lucy'
    }
  },
}, {headerMode: 'none'});
7
Pitty
    const SimpleApp = StackNavigator({
      Home: {
        screen: HomeScreen,
        navigationOptions: {
          title: 'Home'
        },
      },
      Chat: {
        screen: ChatScreen,
        navigationOptions: {
          title: 'Chat with Lucy'
        }
      },
{ headerMode: 'none'}
);
5
Burhan Yılmaz

Essaye ça

Login: {
    screen: Login,
    navigationOptions: {
      title: '',
      headerTransparent:true,
    }
  },
1
Igor Thierry

Je pense que dans stackNavigator, vous pouvez utiliser le headerMode: 'none' pour masquer l'en-tête. Et encore une chose, vous pouvez prendre cela comme une suggestion, utilisez

réagir-natif-routeur-flux

qui serait plus facile à utiliser en cas de navigation en react-native, et là vous pouvez cacher l'en-tête en utilisant hideNavBar prop aux scènes et voici la documentation qui vous serait utile sur le même sujet Documentation

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

Vos options de navigation devraient ressembler à ceci, ajoutez simplement les lignes en gras dans votre code.

0
Khwaja Abdul Ahad