web-dev-qa-db-fra.com

Ajouter un bouton hamburger pour réagir à la navigation native

Je suis très nouveau dans React-Native, alors il se peut que je manque quelque chose. Mais tout ce que je veux, c’est ajouter un bouton de type hamburger à une page de paramètres dans la barre de navigation principale. J'ai mis en place un lien dans la partie principale qui fonctionne comme je veux que le bouton hamburger fonctionne. Capture d'écran

import React from 'react';
import { AppRegistry, Text, View, Button } from 'react-native';
import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
    headerLeft: <Button onPress={ WHAT GOES HERE?? } title= "=" />
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
        <Button
          onPress={() => navigate('Settings')}
          title="Link to Settings" />
    );
  }
}

class Settings extends React.Component {
    static navigationOptions = {
        title: 'Settings',
        headerLeft: <Button title= "=" />
    };
    render() {
        return <Text>Hello, Settings!</Text>;
    }
}

const SimpleApp = StackNavigator({
    Home: { screen: HomeScreen },
    Settings: { screen: Settings}
});

AppRegistry.registerComponent('NavPractice', () => SimpleApp);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

react-nativenavigationhamburger-menu
3
NoxiousFox1102

Ayant cela, vous êtes très proche de la solution.

static navigationOptions = {
  title: 'Welcome',
  headerLeft: <Button onPress={ WHAT GOES HERE?? } title= "=" />
};

Le fait peu connu est navigationOptions accepte une fonction qui renvoie des options de navigation. Cette fonction accepte certains accessoires, l'un navigation. Sachez ceci, ajustez un peu votre code.

static navigationOptions = function(props) {
  return {
    title: 'Welcome',
    headerLeft: <Button onPress={() => props.navigation.navigate('DrawerOpen')} title= "=" />
  }
};
13
Andreyco

vérifiez ce lien avec le même problème https://github.com/react-community/react-navigation/issues/1539

vérifieroptions de navigation

 navigationOptions: ({ navigation }) => ({
              title: 'Schedules',  // Title to appear in status bar
              headerLeft: <Icon name="menu" size={35}
                         onPress={ () => navigation.navigate('DrawerOpen') } />

de

   const SchedulesStack = StackNavigator({
  Schedules: {
    screen: SchedulesScreen,
    navigationOptions: ({ navigation }) => ({
      title: 'Schedules',  // Title to appear in status bar
      headerLeft: <Icon name="menu" size={35} onPress={ () => navigation.navigate('DrawerOpen') } />
    })
  }
});

const Homestack = StackNavigator({
  Home: {
    Screen: Home
    navigationOptions: ({ navigation }) => ({
      title: 'Home',  // Title to appear in status bar
      headerLeft: <Icon name="menu" size={35} onPress={ () => navigation.navigate('DrawerOpen') } />
    })
  }
});

const Root = DrawerNavigator({
  Home: {
    screen: HomeStack,
    navigationOptions: {
      title: 'Home' // Text shown in left menu
    }
  },
  Schedules: {
    screen: SchedulesStack,
    navigationOptions: {
      title: 'Schedules',  // Text shown in left menu
    }
  }
  }
})
1
Hoa Nguyen

Dans le code ci-dessus, il semble que vous ajoutiez des options à la barre latérale et que vous naviguiez dans les menus de la barre latérale. 

//sidebar menu no.1
    class HomeScreen extends React.Component {
      static navigationOptions = {
        title: 'Welcome',
        headerLeft: <Button onPress={//action taken when option in the menu bar is clicked} title= "//the title of the screen where you will navigate and the sidebar menu lable" />
      };
      render() {
        const { navigate } = this.props.navigation;
        return (
            <Button
              onPress={() => navigate('Settings')}
              title="Link to Settings" />
        );
      }
    }

De cette façon, vous pouvez créer autant d'options de tiroir que vous pouvez .. maintenant, comment combiner des options de tiroir:

// react navigation vous fournit l'API DrawerNavigator

const MyApp = DrawerNavigator({
  Home: {
    screenA: HomeScreen ,
  },
  Settings: {
    screen: MySettingScreens,
  },
});

Le tiroir est également livré avec un accessoire qui est screenProps = {/ * cet accessoire sera transmis aux composants de l'écran et aux options de navigation sous la forme props.screenProps * /}, comme ceci:

<MyApp
  screenProps={/* this prop will get passed to the screen components and nav options as props.screenProps */}
/>

Vous trouverez ci-dessous les accessoires fournis par le navigateur pour ouvrir/fermer le tiroir.

this.props.navigation.navigate('DrawerOpen'); // open drawer
this.props.navigation.navigate('DrawerClose'); // close drawer

Vous pouvez également définir le style de tiroir en fonction de vous, comme ceci:

tiroir Largeur - Largeur du tiroir tiroirPosition - Les options sont à gauche ou à droite. La valeur par défaut est la position gauche. ContentComponent - Par défaut, aucune vue de défilement n'est disponible dans le tiroir. Pour ajouter scrollview dans le tiroir, vous devez ajouter contentComponent dans la configuration. ContentOptions - Comme leur nom l'indique, ces éléments sont utilisés pour colorer les éléments du tiroir actifs et inactifs (libellé). 

À votre santé :)

0
Codesingh

Salut, tu peux récupérer mon exemple de code qui est un exemple de tiroir complet avec react-navigation.

 enter image description here  enter image description here

J'espère que ça aide!

0
shentaoy