Android StackNavigator标题内的抽屉导航器

我有一个抽屉

const Drawer = createDrawerNavigator({
  Home: { screen: Home},
  Profile: { screen: Profile}
});

我有一个抽屉扣，看起来像这样

const DrawerButton = (props) => {
  return (
    <View>
      <TouchableOpacity onPress={() => {props.navigation.navigate('DrawerOpen')}}>
        <Image
          source={require('../assets/buttons/menu.png')}
          style={{ width: 200, height: 80, resizeMode: 'contain' }}
        />
      </TouchableOpacity>
    </View>
  );
};

const抽屉按钮=（道具）=>{
返回(
{props.navigation.navigate（'drawerropen'）}>
);
};

我有一个StackNavigator，可以在每个屏幕上更改导航选项

const AppRouteConfigs = createStackNavigator({
  Drawer: {
    screen: Drawer,    
  },
  Login: {
    screen: Login,
    navigationOptions: ({ navigation, screenProps }) => ({
      headerTransparent: true
    })
  },
  Home: {
    screen: Home,
    navigationOptions: ({ navigation, screenProps }) => ({
      headerStyle: {
        backgroundColor: colors.blue
      },
      headerTitle: <NavBarComponent />,
      headerRight:  <DrawerButton navigation={navigation} />,
      headerLeft: (
        <View style={{ padding: 15, paddingLeft: 10 }}>
          <Icon
            name="chevron-left"
            size={25}
            style={{ color: colors.white }}
            onPress={() => navigation.goBack()}
          />
        </View>
      )
    })
  });

const approuteconforms=createStackNavigator({
出票人：{
屏幕：抽屉，
},
登录：{
屏幕：登录，
导航选项：（{navigation，screenProps}）=>({
校长：是的
})
},
主页：{
屏幕：主页，
导航选项：（{navigation，screenProps}）=>({
头型：{
背景颜色：colors.blue
},
标题：，
头灯：，
左校长：(
navigation.goBack（）}
/>
)
})
});

我希望当我点击标题右侧时，抽屉菜单打开。这不管用。当我点击它的时候，现在什么都没有发生。我正在使用

React导航3.0.9

。

navigation.goBack（）

功能正常，并且按钮被正确单击（如果我将

props.navigation.navigate（'Home'）

分配给按钮的

onPress（）

功能，它将按预期导航到那里）。我正在用Android设备进行测试

---

如何使其工作？

在未在抽屉导航器中定义的场景/屏幕中，无法打开或关闭抽屉

抽屉可以从其中定义的任何场景中切换。所以你应该在它里面定义家，而不是像这样在StackNavigator里-

const Drawer = createDrawerNavigator({
  Profile: { screen: Profile}
  Home: {
    screen: Home,
    navigationOptions: ({ navigation, screenProps }) => ({
      headerStyle: {
        backgroundColor: colors.blue
      },
      headerTitle: <NavBarComponent />,
      headerRight:  <DrawerButton navigation={navigation} />,
      headerLeft: (
        <View style={{ padding: 15, paddingLeft: 10 }}>
          <Icon
            name="chevron-left"
            size={25}
            style={{ color: colors.white }}
            onPress={() => navigation.goBack()}
          />
        </View>
      )
    })
  }
});

const AppRouteConfigs = createStackNavigator({
  Drawer: {
    screen: Drawer,    
  },
  Login: {
    screen: Login,
    navigationOptions: ({ navigation, screenProps }) => ({
      headerTransparent: true
    })
  },
});

---

希望有帮助。

尝试嵌套

StackNavigator

内部

DrawerNavigator

它不起作用。它只会在顶部创建一个带有断开的后退按钮的白色标题。图像菜单甚至没有出现。堆栈导航器是我的“主”导航器，它从Redux发送到ReduxifNavigator函数。如果我将DrumerNavigator嵌套在堆栈1中，然后返回该堆栈，它将不会显示任何内容……不管怎样，通过将导航选项放在屏幕之外，它就可以工作了。

const DrawerButton = (props) => {
  return (
    <View>
      <TouchableOpacity onPress={props.navigation.toggleDrawer}>
        <Image
          source={require('../assets/buttons/menu.png')}
          style={{ width: 200, height: 80, resizeMode: 'contain' }}
        />
      </TouchableOpacity>
    </View>
  );
};