web-dev-qa-db-fra.com

Masquer l'en-tête dans le navigateur de pile React navigation

J'essaie de changer d'écran en utilisant à la fois la pile et le navigateur d'onglets.

const MainNavigation = StackNavigator({
      otp: { screen: OTPlogin },
      otpverify: { screen: OTPverification},
      userVerified: {
        screen: TabNavigator({
          List: { screen: List },
          Settings: { screen: Settings }
        }),
      },
    });

Dans ce cas, stacknavigator est utilisé en premier, puis tabnavigator. et je veux cacher les en-têtes du navigateur de pile. WIt ne fonctionne pas correctement lorsque j'utilise les options de navigation telles que ::

navigationOptions: { header: { visible: false } }

j'essaie ce code sur les deux premiers composants utilisés dans stacknavigator. si j'utilise cette ligne puis obtenir une erreur comme ::

enter image description here

javascriptreact-nativereact-navigationexpo
61
Avijit Dutta

J'utilise ceci pour cacher la barre de pile (remarquez que c'est la valeur du deuxième paramètre):

{
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false,
    }
}

Lorsque vous utilisez cette méthode, elle sera masquée sur tous les écrans.

Dans votre cas, cela ressemblera à ceci:

const MainNavigation = StackNavigator({
  otp: { screen: OTPlogin },
  otpverify: { screen: OTPverification },
  userVerified: {
    screen: TabNavigator({
    List: { screen: List },
    Settings: { screen: Settings }
   }),
 }
},
{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
 }
);
106
Perry

Il vous suffit d'utiliser le code ci-dessous dans la page pour masquer l'en-tête.

export default class Login extends Component {
    static navigationOptions = {
        header: null
    }
}

se référer à Stack Navigator

105
Dpkstr

Ajoutez simplement ceci dans votre extrait de code de classe/composant et l'en-tête sera masqué

 static navigationOptions = { header: null }
20
Vaibhav Bacchav

Si vous souhaitez masquer sur un écran spécifique, procédez comme suit:

// create a component
export default class Login extends Component<{}> {
  static navigationOptions = { header: null };
}
9
Waqar UlHaq

Si votre écran est un composant de classe

static navigationOptions = ({ navigation }) => {
    return {
       header: () => null
    } 
}

codez ceci dans votre écran ciblé comme première méthode (fonction).

8
user7023664

Si quelqu'un cherche comment basculer en-tête, donc dans composantDidMount, écrivez quelque chose comme:

  this.props.navigation.setParams({
      hideHeader: true,
  });

Quand

static navigationOptions = ({ navigation }) => {
    const {params = {}} = navigation.state;

    if (params.hideHeader) {
      return {
        header: null,
      }
    }

    return {
        headerLeft: <Text>Hi</Text>,
        headerRight: <Text>Hi</Text>,
        headerTitle: <Text>Hi</Text>
    };
};

Et quelque part lorsque l'événement se termine travail:

this.props.navigation.setParams({
  hideHeader: false,
});
7
Ernestyno

J'utilise header : null au lieu de header : { visible : true } j'utilise react-native cli. voici l'exemple:

static navigationOptions = {
   header : null   
};
6
Cevin Ways

Utilisation

static navigationOptions = { header: null }

en classe/composant comme

class Login extends Component {

    static navigationOptions = {
        header: null
    }
}
5
Vahid Akhtar

Cela a fonctionné pour moi:

const Routes = createStackNavigator({
Intro: {
    screen: Intro,
    navigationOptions: {
        header: null,
    }
}
},
    {
        initialRouteName: 'Intro',
    }
);
5
Diego Santa Cruz Mendezú

Dans votre écran ciblé, vous devez coder ceci!

 static navigationOptions = ({ navigation }) => {
    return {
       header: null
    }
 }
2
Pheng Sengvuthy
const CallStack = createStackNavigator({
  Calls: Calls,
  CallsScreen:CallsScreen,
}, {headerMode: 'none'});

CallStack.navigationOptions = {
  tabBarLabel: 'Calls',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
    />
  ),

   header: null,

        headerVisible: false,

};
1
donald

Toutes les réponses montrent comment procéder avec les composants de classe, mais vous le faites pour les composants fonctionnels:

const MyComponent = () => {
    return (
        <SafeAreaView>
            <Text>MyComponent</Text>
        </SafeAreaView>
    )
}

MyComponent.navigationOptions = ({ /*navigation*/ }) => {
    return {
        header: null
    }
}

Si vous supprimez l'en-tête, votre composant risque de ne pas être visible (lorsque le téléphone n'a pas d'écran carré). Il est donc important de l'utiliser lors de la suppression de l'en-tête.

0
Vencovsky

J'ai le même problème mais j'ai fait mon travail d'en-tête dans les classes individuelles en utilisant navigationOptions et j'utilise createBottomTabNavigator dont l'en-tête est visible et l'en-tête de classes n'est pas visible. J'ai tout essayé comme headerMode: none, header: null et ainsi de suite, mais je n'ai pas pu masquer l'en-tête de bottomTabNavigator.

0
Aun Abbas