如何在React Native中切换抽屉式导航器？

Question

I am using drawer navigation. When I click on the hamburger menu icon the drawer of the drawer navigation is not working, I am not able to toggle the drawer. Code 1 is not working but code 2 is working, can anyone help me figure out why ?

Code:

    Burger menu icon code 1:

    // Inside Header
    navigationOptions: ({ navigation }) => ({
                // headerTitle: 'Rchampz',
                headerLeft:
                <TouchableOpacity  onPress={() => {navigation.dispatch(DrawerActions.toggleDrawer())} }>
                    <MenuImage navigation={navigation}/>
                </TouchableOpacity>,

//Created component and added inside navigationOptions

    const MenuImage = ({navigation}) => {
        if(!navigation.state.isDrawerOpen){
            return <TouchableOpacity><Image source={require('../assets/images/menu.png')} style={{width: 24, height: 24, resizeMode: 'contain' ,marginLeft: 15}}/></TouchableOpacity>
        }else{
            return <MenuIcon style={{paddingLeft: 10, paddingRight: 10}} name="md-arrow-back" size={30} color="black"/>
        }
    }

    Burger menu icon code 2:

    //Inside header

    navigationOptions: ({ navigation }) => ({
                // headerTitle: 'Rchampz',
                headerLeft:
                <TouchableOpacity  onPress={() => {navigation.dispatch(DrawerActions.toggleDrawer())} }>
                    <MenuImage navigation={navigation}/>
                </TouchableOpacity>,


//Created component and added inside navigationOptions

    const MenuImage = ({navigation}) => {
        if(!navigation.state.isDrawerOpen){
            return <MenuIcon style={{paddingLeft: 10, paddingRight: 10}} name="md-menu" size={30} color="black"/>
        }else{
            return <MenuIcon style={{paddingLeft: 10, paddingRight: 10}} name="md-arrow-back" size={30} color="black"/>
        }
    }

Answer 1

Because of the way that you have setup your menu image in the first one. You wrapped the Image within another TouchableOpacity which means that the inner TouchableOpacity is picking up the user touch event. This is not actually the behavior you want because you want the TouchableOpacity on headerLeft to be the receiver of the input. So simply remove the "extra" TouchableOpacity .

// Inside Header
navigationOptions: ({ navigation }) => ({
    headerLeft:
    <TouchableOpacity onPress={() => {navigation.dispatch(DrawerActions.toggleDrawer())} }>
        <MenuImage navigation={navigation}/>
    </TouchableOpacity>,

//Created component and added inside navigationOptions
const MenuImage = ({navigation}) => {
    if(!navigation.state.isDrawerOpen){
        // No need of Touchable here. Since you want the above Touchable to pick up the onPress event.
        return <Image source={require('../assets/images/menu.png')} style={{width: 24, height: 24, resizeMode: 'contain' ,marginLeft: 15}}/>. 
    }else{
        return <MenuIcon style={{paddingLeft: 10, paddingRight: 10}} name="md-arrow-back" size={30} color="black"/>
    }
}

The reason why the second example works is simply that, there is no extra Touchable handling the onPress event.