Question

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

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

代码尝试触发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>
         );                                                                                                                 
      }
}

Answer 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" />
      )
    }

ReactNative导航标题右切换抽屉错误

1 个答案: