javascript - 一个屏幕上的 React Native 两个抽屉

Question

我有一个应用程序需要能够使用两个抽屉导航器，一个在标题的左侧和右侧。

我现在可以通过滑动手势打开两个抽屉，但是我需要能够以编程方式打开它。我发现 navigation.openDrawer() 函数只适用于一个抽屉，而不适用于另一个抽屉，因为它只能使用我的抽屉导航器中的一个导航 Prop (以先到者为准)。

下面是我的渲染函数:

const LeftStack = createStackNavigator(
  {
    LeftDrawerStack
  },
  {
    navigationOptions: ({navigation}) => ({
      headerLeft: (
        <TouchableOpacity onPress={() => navigation.openDrawer()}>
          <Icon style={{marginLeft: 10}} name='menu'/>
        </TouchableOpacity>
      )
    })
  }
);

const RightStack = createStackNavigator(
  {
    RightDrawerStack
  },
  {
    navigationOptions: ({navigation}) => ({
      headerRight: (
        <TouchableOpacity onPress={() => navigation.openDrawer()}>
          <Icon style={{marginRight: 10}} name='ios-bulb'/>
        </TouchableOpacity>
      )
    })
  }
);

export const RouteStack = createStackNavigator(
  {
    screen: LoginScreen,
    navigationOptions: ({navigation}) => ({
      header: null
    }),
    LeftStack,
    RightStack
  }
);

这是我的抽屉路线:

export const LeftDrawerStack = createDrawerNavigator(
  {
    Dashboard: {
      screen: DashboardScreen
    },
    History: {
      screen: HistoryScreen
    },
    Privacy: {
      screen: PrivacyPolicyScreen
    },
    TermsAndConditions: {
      screen: TermsAndConditionsScreen
    }
  }, {
    initialRouteName: 'Dashboard',
    contentComponent: LeftDrawerScreen
  }
);

export const RightDrawerStack = createDrawerNavigator(
  {
    LeftDrawerStack,
    Settings: {
      screen: SettingsScreen
    }
  }, {
    drawerPosition: 'right',
    contentComponent: RightDrawerScreen
  }
);

这是到目前为止我所拥有的导航的图片，但是两个汉堡菜单都在右侧打开相同的菜单，而不是在各自的侧面打开一个菜单。

我可能遗漏了一些部分，但如果我忘记了任何部分，我一定会发布更多信息!

Answer 1

我能够通过以下设置做到这一点(尝试将您的结构更改为这样):

const LeftDrawer = createDrawerNavigator(
{
    LeftDrawer: MyStackNavigator,
},
    {
        getCustomActionCreators: (route, stateKey) => { return { toggleLeftDrawer: () => DrawerActions.toggleDrawer({ key: stateKey }) }; },
        drawerPosition: 'left',
        contentComponent: MyLeftDrawer
    }
);

const RightDrawer = createDrawerNavigator(
{
    Drawer: LeftDrawer,
},
    {
        getCustomActionCreators: (route, stateKey) => { return { toggleRightDrawer: () => DrawerActions.toggleDrawer({ key: stateKey }) }; },
        drawerPosition: 'right',
        contentComponent: MyRightDrawer
    }
);

export const RootNavigator = createStackNavigator(
{
    Login: Login,
    Home: RightDrawer
},
    {
        initialRouteName: 'Login',
        navigationOptions: { header: null, gesturesEnabled: false }
    }
);

关键是getCustomActionCreators。它允许您从 MyStackNavigator 中的任何屏幕调用函数，如下所示:this.props.navigation.toggleLeftDrawer();。