React Native Navigation headerRight Toggle Drawer Error答案

【问题标题】：ReactNative Navigation headerRight Toggle Drawer ErrorReact Native Navigation headerRight Toggle Drawer Error
【发布时间】：2019-08-27 22:47:58
【问题描述】：

我有一个屏幕，右侧有一个后退按钮和一个菜单抽屉按钮

当我点击菜单抽屉按钮时出现错误（未定义不是对象）

代码试图触发toggle.drawer()。它在渲染代码中工作正常，但在标题中不起作用右这里是代码

    export default class categoryScreen extends React.Component {
    static navigationOptions = {
        headerRight:
        <Button 
        onPress={()=> this.props.navigation.toggleDrawer()} // This Doesn't work how to make it work
        transparent>
            <Icon style={styles.categoryDrawerMenu}type="Entypo" ios='ios-menu' android="menu" color="#1a1917" />
        </Button>,
      drawerIcon: (
        <Icon style={styles.menu}type="AntDesign" name="home" color="#1a1917" />
      )
    }
    render() {
          return (                                                                                                           
            <Container>
                        <Button 
        onPress={()=> this.props.navigation.toggleDrawer()} // This Works 
        transparent>
            <Icon style={styles.categoryDrawerMenu}type="Entypo" ios='ios-menu' android="menu" color="#1a1917" />
        </Button>
            </Container>
         );                                                                                                                 
      }
}

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案1】：

您无权从静态上下文访问this.props，您需要像这样访问您的导航对象：

static navigationOptions = ({ navigation }) => {
        headerRight:
        <Button 
        onPress={()=> navigation.toggleDrawer()} // This Doesn't work how to make it work
        transparent>
            <Icon style={styles.categoryDrawerMenu}type="Entypo" ios='ios-menu' android="menu" color="#1a1917" />
        </Button>,
      drawerIcon: (
        <Icon style={styles.menu}type="AntDesign" name="home" color="#1a1917" />
      )
    }

【讨论】：