React Native sidebar with interactive navigation

Question

I use react-navigationin React Native, and I want to create a sidebar menu that opens as an overlay that goes from left to right and fills about 80-90% of the width.

Without interactive navigation, this is possible with packages such as react-native-side-bar, but I am wondering if I can get the same with DrawerNavigator.

But it seems that DrawerNavigator has menu buttons. Is it not possible to configure the overlay on my own?

Edit

Solution 1

One way is to use

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) => <Sidebar />
});

but then it will be possible to drag the box from all screens AScreen, BScreenand CScreen, while I want it to be there for AScreen, since the StackNavigator is nested in DrawerNavigator.

Decision 2

Another solution would be to use

const MyDrawerNavigator = DrawerNavigator({
  A: { screen: AScreen },
}, {
  // set content of side bar
  contentComponent: (props) => <Sidebar />
});

const RootNavigator = StackNavigator({
  A: { screen: MyDrawerNavigator },
  B: { screen: BScreen },
  C: { screen: CScreen }
});

AScreen , DrawerNavigator A.

Answer 1

, , React. , ( ).

:

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 => (<Drawer navigation={props.navigation} drawerProps={{...props}} />)
});

, Drawer, . :

import React, { Component } from 'react';
import { ScrollView, View, Text } from 'react-native';
import { Button } from 'react-native-elements';

class Drawer extends Component {
  render() {
    return (
        <View>
            <Button title="Search" onPress={() => this.props.navigation.navigate('Home')} />
            <Button title="Saved" onPress={() => this.props.navigation.navigate('Saved')} />
            <Button title="About" onPress={() => this.props.navigation.navigate('About')} />
        </View>
    );
  }
}

, . , , , - , !