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

在我的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);

类导航抽屉结构扩展React.Component{
静态导航选项={
标题：null，
};
toggleDrawer=（）=>{
this.props.navigationProps.toggleDrawer（）；
};
render（）{
返回(
{/*Donute按钮图像*/}
);
}
}
const FirstActivity_StackNavigator=createStackNavigator({
第一:{
屏幕：主屏幕，
导航选项：（{navigation}）=>({
标题:"家",，
头左：，
头型：{
背景颜色：“#FF9800”，
},
标题颜色：“#fff”，
}),
},
屏幕内部：{
屏幕：BookDetails，
导航选项：（{navigation}）=>({
标题：“带导航抽屉的屏幕”，
头左：，
头型：{
背景颜色：“#FF9800”，
},
标题颜色：“#fff”，
}),
},
});
const Screen2_StackNavigator=createStackNavigator({
第二：{
屏幕：CategoryBrowse，
导航选项：（{navigation}）=>({
标题：“创建注释”，
头左：，
头型：{
背景颜色：“#FF9800”，
},
标题颜色：“#fff”，
}),
},
});
const Drawer=createDrawerNavigator({
屏幕1：{
屏幕：FirstActivity_StackNavigator，
导航选项：{
抽屉标签：“家”，
付款人：(
)
},
},
屏幕2：{
屏幕：屏幕2\u StackNavigator，
导航选项：{
抽屉标签：“类别”，
付款人：(
)
},
},
},
{
contentComponent:CustomSidebarMenu，
抽屉宽度：尺寸.get（'window'）。宽度-130，
},
);
常量抽屉2=CreateDrainerNavigator({
屏幕1：{
屏幕：FirstActivity_StackNavigator，
导航选项：{
抽屉标签：“家”，
付款人：(
)
},
},
屏幕2：{
屏幕：屏幕2\u StackNavigator，
导航选项：{
抽屉标签：“类别”，
付款人：(
)
},
},
},
{
抽屉类型：“后退”，
抽屉位置：'对'，
抽屉宽度：200，
抽屉背景颜色：“橙色”，
//对于自定义侧边栏菜单，我们必须提供自定义侧边栏菜单
contentComponent:CustomSidebarMenu，
//边栏宽度
抽屉宽度：尺寸.get（'window'）。宽度-130，
},
);
const DrawerNavigatorExample=createStackNavigator({
抽屉：{screen:Drawer，导航选项：{header:null}}，
屏幕外部：{
屏幕：屏幕外部，
导航选项：{title:'Details Note'}，
},
},
);
导出默认createAppContainer（DroperNavigatoreSample）；

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

我制作了另一个constdrawer2，其中包含将从右侧显示的屏幕

现在，问题是：

我不知道如何使用这个抽屉2（右侧一个）和抽屉（左侧一个）一起使用，因为在DrawerNavigatorExample的声明中，我只能在抽屉屏幕中设置一个值

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

但那没用

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