React native 通过单击包含StackNavigator的标题打开抽屉

这是包含我抽屉的组件

export default class StackInView extends React.Component {
  render() {

    const Stack = StackNavigator({
      DrawerStack: { screen: DrawerInView }
    }, {
        headerMode: 'float',
      });

    return (
      <View style={{ flex: 1 }}>
        <Stack />
      </View>
    );
  }
}

导出默认类StackInView扩展React.Component{
render（）{
const Stack=StackNavigator({
抽屉钉：{屏幕：抽屉视图}
}, {
headerMode:'浮动'，
});
返回(
);
}
}

下面是我定义按钮的地方。我想在屏幕的导航选项中定义按钮，因为按钮应该只出现在带有抽屉的屏幕上。但是点击按钮不起作用，你能帮我吗

... imports ...


export default class DrawerInView extends React.Component {
    static navigationOptions = {
        title: "Yeah?",
        headerRight: <Button title="Menu" onPress={() => {NavigationActions.navigate("DrawerOpen")}}/>
    }

    constructor(props) {
        super(props);
    }

    render() {
        const Drawer = DrawerNavigator({
            "one": {
                screen: () => {
                    return (<TabsInView select="something" />)
                },
            },
            "two": {
                screen: () => {
                    return (<TabsInView select="something else" />)
                },
            }
        })
        return (
            <View style={{ flex: 1 }}>
                <Drawer />
            </View>
        );
    }
}

。。。进口。。。
导出默认类DrainView扩展React.Component{
静态导航选项={
标题：“是吗？”，
headerRight:{NavigationActions.navigate（“drawerropen”）}/>
}
建造师（道具）{
超级（道具）；
}
render（）{
const Drawer=付款人({
“一”：{
屏幕：（）=>{
返回（）
},
},
“二”：{
屏幕：（）=>{
返回（）
},
}
})
返回(
);
}
}

不要将堆栈放在视图中。这很难理解，你打破了所有的道具

它不起作用的原因是，第二个代码中的

navigationOptions

不是针对抽屉，而是针对第一个代码中的StackNavigator。因此，它无法执行抽屉的navigation.navigate（“DrawerRopen”），因为它是StackNavigator的

我强烈建议您更改应用程序的层次结构。子抽屉将其导航传递到父堆栈的右按钮非常困难

然后，它看起来像这样

const MyStack = StackNavigator({
    Tabs:{ screen: MyTabs, navigationOptions:(props) => ({
        headerRight:
            <TouchableOpacity onPress={() => {props.screenProps.myDrawerNavigation.navigate('DrawerOpen')}}>
                <Text>Open Drawer</Text>
            </TouchableOpacity>
    })}
}
, {navigationOptions:commonNavigationOptions})


const MyDrawer = DrawerNavigator({
    stack1: {
        screen: ({navigation}) => <MyStack screenProps={{myDrawerNavigation:navigation}} />,
    },
    stack2: {
        //more screen
    }
})

const MyStack=StackNavigator({
标签：{屏幕：我的标签，导航选项：（道具）=>({
头灯：
{props.screenProps.MyDrumernavigation.navigate（'DrumeRopen'）}>
抽屉
})}
}
，{navigationOptions:commonNavigationOptions}）
const MyDrawer=抽屉驱动程序({
堆栈1：{
屏幕：（{navigation}）=>，
},
堆栈2：{
//更多屏幕
}
})

您可以像这样单击按钮打开抽屉导航

const MyStack = StackNavigator({
    Tabs:{ screen: MyTabs, navigationOptions:(props) => ({
        headerRight:
            <TouchableOpacity onPress={() => {props.screenProps.myDrawerNavigation.navigate('DrawerOpen')}}>
                <Text>Open Drawer</Text>
            </TouchableOpacity>
    })}
}
, {navigationOptions:commonNavigationOptions})


const MyDrawer = DrawerNavigator({
    stack1: {
        screen: ({navigation}) => <MyStack screenProps={{myDrawerNavigation:navigation}} />,
    },
    stack2: {
        //more screen
    }
})

---

this.props.navigation.openDrawer（）}/>

此解决方案不适合我的问题，但它还是帮助了我。这个应用程序将是高度动态的，所以我必须在一个渲染方法中声明导航器，这样它就可以改变了。@peni4142哦，我明白了。谢谢希望你实现你想要的。如果您有其他问题，请告诉我。@peni4142，我也面临着同样的问题，如果您设法让它工作，请发布解决方案。感谢并问候，@AshleyVaz我再也无法获得解决方案了。但是我想我把它放在一个容器中，所以每次都会创建const。也许不是最好的解决方案，但确实有效。