如何在React Native中切換抽屜式導航器？

Question

我正在使用抽屜式導航。 當我單擊漢堡菜單圖標時，抽屜導航的抽屜不起作用，我無法切換抽屜。 代碼1無效，但是代碼2有效，有人可以幫助我找出原因嗎？

碼：

    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

由於您在第一個菜單中設置菜單圖像的方式。 您將Image包裝在另一個TouchableOpacity ，這意味着內部的TouchableOpacity正在拾取用戶觸摸事件。 因為你要的這實際上不是你想要的行為TouchableOpacity上headerLeft是輸入的接收器。 因此，只需刪除“額外的” 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"/>
    }
}

第二個示例起作用的原因很簡單，沒有額外的Touchable處理onPress事件。