3
votes

DrawerNavigator natif de React n'apparaît pas

J'essaye de créer un simple DrawerNavigator. Mais il n'apparaît pas :(

import React, { Component } from 'react';
import { Text } from 'react-native';
import { createAppContainer, createDrawerNavigator } from 'react-navigation';

class One extends Component {
    render() {
        return (<Text>One</Text>);
    }
}

class Two extends Component {
    render() {
        return (<Text>Two</Text>);
    }
}

const DrawerStack = createDrawerNavigator(
    {
        One: {screen: One},
        Two: {screen: Two},
    }, {
    }
);

const App = createAppContainer(DrawerStack);
export default App;

Voici ce que je vois (aucune navigation dans les tiroirs n'est affichée):

react-native expo

0 commentaires

3 Réponses :

2
votes

Faites glisser votre doigt depuis la gauche et vous verrez le tiroir La navigation fonctionne
le react-navigation createDrawerNavigator ne fournit pas de navigation dans la pile par défaut, si vous cherchez à voir un en-tête avec l'icône de menu, alors vous devez faire de vos écrans (un, deux) stackNavigation. p >
NB: importer l'icône depuis expo ou react-native-icons

Mise à jour :: en utilisant la base native

installer native-base (** npm install native-base --save **)

importer l'en-tête, l'icône, le conteneur, la gauche, le contenu de la base native

la classe One étend le composant {

render() {
     return (
          <Container>
              <Header>
                <Left>
                  <Icon name="md-menu" onPress={() => this.props.navigation.openDrawer()} />
                </Left>
              </Header>

              <Content>
                <Text>Screen Two</Text>
              </Content>
          </Container>
      );
}

}

la classe deux étend le composant {

render() {
    return (
          <Container>
              <Header>
                <Left>
                  <Icon name="md-menu" onPress={() => this.props.navigation.openDrawer()} />
                </Left>
              </Header>

              <Content>
                <Text>Screen One</Text>
              </Content>
          </Container>
      );
}

}

const DrawerStack = createDrawerNavigator ( { un: {screen: One}, deux: {écran: Deux} }, {

} );

2 commentaires

1. Glisser à partir de la gauche ne fonctionne pas pour moi (Android). 2. Cela fonctionne, mais uniquement pour screenOne. Dois-je également ajouter createStackNavigator pour chaque écran (deux, trois, quatre, ...)? S'il existe un moyen d'ajouter ce code une seule fois pour tous les écrans?

@Alex J'ai mis à jour le code en utilisant la base native et c'est beaucoup plus simple. Essayez-le et faites-moi savoir si cela fonctionne pour vous.

0
votes

Il est bon de tirer parti de la base native.

Le lien correspondant se trouve ici. a>

Les liens de navigation se trouvent ici. a >

Vous pouvez également voir le composant ici, vous pouvez donc utiliser les fonctionnalités dont vous avez besoin.

Navigation dans le tiroir example.js:

import React, { Component } from "react";
import HomeScreen from "./HomeScreen.js";
import MainScreenNavigator from "../ChatScreen/index.js";
import Profile from "../ProfileScreen/index.js";
import SideBar from "../SideBar/SideBar.js";
import { DrawerNavigator } from "react-navigation";
const HomeScreenRouter = DrawerNavigator(
  {
    Home: { screen: HomeScreen },
    Chat: { screen: MainScreenNavigator },
    Profile: { screen: Profile }
  },
  {
    contentComponent: props => <SideBar {...props} />
  }
);
export default HomeScreenRouter;

Facile à utiliser sans implémentation spéciale.

Si vous avez d'autres commentaires, veuillez laisser un commentaire. Et si ma réponse est bonne, veuillez faire un choix.

0 commentaires

1
votes

Drawer Swipe Gesture ne fonctionne pas car dans la nouvelle version de React Navigation v3 npm. Nous devons installer react-native-gesture-handler npm séparément. Ils créent un package npm séparé pour la manipulation et la reconnaissance du toucher et des gestes.

Étape 1.

package com.reactnavigation.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

Étape 2.

react-native link react-native-gesture-handler

Étape 3. (facultative)

Si l'étape 2 ne fonctionne pas correctement, le code est correctement configuré

Pour finaliser l'installation de react-native-gesture-handler pour Android, assurez-vous d'apporter les modifications nécessaires à MainActivity.java: p>

npm i react-native-gesture-handler

Aucune étape supplémentaire n'est requise pour iOS.

Veuillez consulter le document suivant pour plus d'informations: -

2 commentaires

Étape 3 - c'est ce dont j'avais besoin. J'ai déjà installé et lié le lien react-native, mais l'étape 3 manquait dans mon cas.

Un certain temps, la commande react-native link react-native-gesture-handler ne fonctionne pas correctement, c'est pourquoi nous devons configurer manuellement le code si l'étape 2 fonctionne correctement, il n'est pas nécessaire de passer à l'étape 3