Menu de la barre latérale dans React Native avec react-navigation

J’utilise react-navigation dans React Native et je souhaite créer un menu dans la barre latérale qui s’ouvre sous la forme d’une superposition qui va de gauche à droite et qui occupe environ 80 à 90% de la largeur.

Sans react-navigation, cela est possible avec des packages tels que react-native-side-bar , mais je me demande si je peux obtenir exactement la même fonctionnalité avec DrawerNavigator.

Mais il semble que DrawerNavigator ait des boutons de menu. N’est-il pas possible de configurer la superposition moi-même?

modifier

Solution 1

Une façon serait d’utiliser

 const MyStackNavigator = StackNavigator({ A: { screen: AScreen }, B: { screen: BScreen }, C: { screen: CScreen } }); const RootNavigator = DrawerNavigator({ A: { screen: MyStackNavigator }, }, { // set content of side bar contentComponent: (props) =>  }); 

mais il sera alors possible de faire glisser le tiroir de tous les écrans AScreen , BScreen et CScreen , alors que je ne veux qu’il soit présent que pour AScreen , car StackNavigator est nested dans DrawerNavigator.

Solution 2

Une autre solution serait d’utiliser

 const MyDrawerNavigator = DrawerNavigator({ A: { screen: AScreen }, }, { // set content of side bar contentComponent: (props) =>  }); const RootNavigator = StackNavigator({ A: { screen: MyDrawerNavigator }, B: { screen: BScreen }, C: { screen: CScreen } }); 

mais alors l’en-tête d’ AScreen sera au-dessus puisque DrawerNavigator est nested dans A

J’avais besoin des mêmes fonctionnalités que celles que vous décrivez et que vous avez réussi à faire fonctionner avec la navigation React. Fondamentalement, j’avais besoin d’un tiroir entièrement personnalisé (menu latéral).

Voici la configuration de mon navigateur:

 const MainNavigator = DrawerNavigator({ Home: { screen: StackNavigator({ Search: { screen: SearchScreen }, Result: { screen: ResultScreen } }) }, Saved: { screen: StackNavigator({ SavedStack: { screen: SavedWordsScreen } }) }, About: { screen: StackNavigator({ AboutStack: { screen: AboutScreen } }) } },{ contentComponent: props => () }); 

Comme vous le voyez, j’ai créé un composant Tiroir contenant le contenu de mon tiroir personnalisé. Voici la configuration de base de ce composant:

 import React, { Component } from 'react'; import { ScrollView, View, Text } from 'react-native'; import { Button } from 'react-native-elements'; class Drawer extends Component { render() { return (   ); } } 

J’espère que ça aide. J’ai simplifié une partie du code pour montrer principalement les bits pertinents, donc si vous avez des questions complémentaires, n’hésitez pas!