Ajouter hamburger bouton de Réagir Natif de Navigation

Je suis très nouveau pour Réagir Native, donc je peut-être raté quelque chose. Mais tout ce que je veux faire est d'ajouter un hamburger type de bouton d'une page de paramètres dans la barre de Navigation principale. J'ai mis un lien dans la partie principale de cette fonctionne de la manière que je veux hamburger bouton de travailler.
Capture d'écran

JS:

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

HTML:

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

suivez ce lien github.com/react-community/react-navigation/issues/1539
aucune réponse pour cette qustion?

InformationsquelleAutor NoxiousFox1102 | 2017-05-16

13

Avoir cela, vous êtes très proche de la solution.
```
static navigationOptions = {
  title: 'Welcome',
  headerLeft: <Button onPress={ WHAT GOES HERE?? } title= "=" />
};
```
Peu de savoir fait est navigationOptions accepter la fonction de retour d'options de navigation. Cette fonction accepte des accessoires, navigation l'un d'eux. Savoir cela, ajustez votre code un peu.
```
static navigationOptions = function(props) {
  return {
    title: 'Welcome',
    headerLeft: <Button onPress={() => props.navigation.navigate('DrawerOpen')} title= "=" />
  }
};
```
- Cette solution est bonne mais si vous voulez vous débarrasser de l'arrière-plan du bouton utiliser l'ICÔNE headerLeft: <l'Icône onPress={() => accessoires.la navigation.naviguer('DrawerOpen')} name= "menu" style={{le marginleft: 10}} />,
InformationsquelleAutor Andreyco

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

vérifier navigationOptions

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

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

InformationsquelleAutor Hoa Nguyen

0

Dans le code ci-dessus, il semble que vous êtes ajout d'options de la barre latérale et de la navigation de la barre latérale de menus.
```
//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 de tiroir options que vous le pouvez. maintenant, comment combiner tiroir options:

//réagir de navigation vous offre DrawerNavigator API
```
const MyApp = DrawerNavigator({
  Home: {
    screenA: HomeScreen ,
  },
  Settings: {
    screen: MySettingScreens,
  },
});
```
Le tiroir est également livré avec un accessoire qui est screenProps={/* cet accessoire sera adopté à l'écran des composants et de la valeur liquidative des options que les accessoires.screenProps */} comme ceci :
```
<MyApp
  screenProps={/* this prop will get passed to the screen components and nav options as props.screenProps */}
/>
```
Suivantes sont les accessoires qui réagissent navigator fournir 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 tiroir de style selon vous, comme ceci:

drawerWidth - Largeur du tiroir
drawerPosition - les Options à gauche ou à droite. Par défaut est la position la plus à gauche.
contentComponent - Par défaut il n'y a pas de scrollview disponible dans le tiroir. Afin d'ajouter de la scrollview dans le tiroir vous avez besoin d'ajouter contentComponent dans la configuration.
contentOptions - Comme son nom l'indique, ils sont utilisés pour donner de la couleur à l'actif et inactif tiroir éléments (étiquette).

Cheers 🙂

InformationsquelleAutor Codesingh
0

Hey, vous pouvez visiter mon exemple de code qui est un tiroir complet de l'échantillon avec react-navigation.

Espère que cela aide!
- Exemple de code va à 404
- mise à jour
InformationsquelleAutor shentaoy

Vous devez vous connecter pour publier un commentaire.