在React-Native中如何在屏幕的两侧显示NavigationDrawer？

Question

在我的React-native项目中，我做了一个自定义抽屉导航，该导航从屏幕的左侧出现。

这是该课程的代码，其中包括导航屏幕的设置-

HomeScreen.js

class NavigationDrawerStructure extends React.Component {

  static navigationOptions = {
    header: null ,
  };

  toggleDrawer = () => {
    this.props.navigationProps.toggleDrawer();
  };
  render() {
    return (

      <View style={{ flexDirection: 'row' }}>

        <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
          {/*Donute Button Image */}
         <Icon name='menu'/>
        </TouchableOpacity>
      </View>
    );
  }
}
const FirstActivity_StackNavigator = createStackNavigator({
  First: {
    screen: HomeScreen,
    navigationOptions: ({ navigation }) => ({
      title: 'Home',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,

      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),


  },

  ScreenInternal: {
    screen: BookDetails,
    navigationOptions: ({ navigation }) => ({
      title: 'Screen With Navigation Drawer',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,

      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },


});

const Screen2_StackNavigator = createStackNavigator({
  Second: {
    screen: CategoryBrowse,
    navigationOptions: ({ navigation }) => ({
      title: 'Create Note',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,

      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});



const Drawer = createDrawerNavigator({

  Screen1: {
    screen: FirstActivity_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Home',

      drawerIcon: (
        <Icon name='home' size={25}

        />
      )

    },
  },

  Screen2: {
    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Category',
      drawerIcon: (
        <Image  source={require('../assets/splash.png')}  
        style={{height:25, width:25,}}

        />
      )
    },
  },

},

{
  contentComponent: CustomSidebarMenu,
  drawerWidth: Dimensions.get('window').width - 130,
},

);


const Drawer2 = createDrawerNavigator({
  Screen1: {
    screen: FirstActivity_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Home',

      drawerIcon: (
        <Icon name='home' size={25}

        />
      )

    },
  },

  Screen2: {
    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Category',
      drawerIcon: (
        <Image  source={require('../assets/splash.png')}  
        style={{height:25, width:25,}}

        />
      )
    },
  },


},


{

  drawerType: 'back',
    drawerPosition: 'right',
    drawerWidth: 200,
    drawerBackgroundColor: 'orange',
  //For the Custom sidebar menu we have to provide our CustomSidebarMenu
  contentComponent: CustomSidebarMenu,
  //Sidebar width
  drawerWidth: Dimensions.get('window').width - 130,
},

);


const DrawerNavigatorExample = createStackNavigator({
  Drawer: { screen: Drawer, navigationOptions: { header: null } },
  ScreenExternal: {
    screen: ScreenExternal,
    navigationOptions: { title: 'Details Note' },
  },

},
);


export default createAppContainer(DrawerNavigatorExample);

在我的代码中，我声明了一个const Drawer，这是我在DrawerNavigatorExample中添加并最终导出的屏幕。

我制作了另一个const Drawer2，它包含从右侧出现的屏幕。

现在，问题是：

我不知道如何将 Drawer2（右侧1）与 Drawer（左侧1）一起使用，就像 DrawerNavigatorExample < / strong>我只能在“抽屉”屏幕中设置一个值。

我还检查了以下解决方案：

React-Native DrawerNavigator Menu on both sides

但这没有帮助。

那么，如何在同一屏幕上同时显示左右抽屉？