Реагируйте на родной язык - onpress не работает внутри заголовка навигации ящика

Question

Я пытаюсь добавить пользовательскую кнопку со значком меню внутри заголовка навигации в моем приложении своего собственного реагирования. Я успешно это сделал, но событие печати не срабатывает, пока значок находится в заголовке. Например, если у меня есть значок здесь:

https://www.dropbox.com/s/xyah9ei43wgt1ut/menu_regular.png?dl=0

Событие прессы не работает, но если оно у меня есть (переместило его ниже):

https://www.dropbox.com/s/54utpr1efb3o0lm/menu_moved.png?dl=0

Событие происходит нормально.

Вот мой текущий навигатор:

const MainNavigator = createStackNavigator(
    {
        login: { screen: MainLoginScreen },
        signup: { screen: SignupScreen },
        profileScreen: { screen: ProfileScreen },
        main: {
            screen: createDrawerNavigator({
                Home: createStackNavigator(
                    {
                        map: {
                            screen: MapScreen,
                            headerMode: 'screen',
                            navigationOptions: {
                                headerVisible: true,
                                headerTransparent: false,
                                headerLeft: (
                                    <View style={{ position: 'absolute', left: 10, display: 'flex', zIndex: 11550 }}>
                                        <Icon
                                            raised
                                            name='bars'
                                            type='font-awesome'
                                            color='rgba(255, 255, 255, 0)'
                                            reverseColor='#444'
                                            onPress={() => { console.log("press"); navigation.goBack() }}
                                            reverse
                                        />
                                    </View>
                                )
                            }
                        },
                        history: { screen: HistoryScreen },
                        foundItem: { screen: FoundItemScreen },
                    }
                ),
                Settings: {
                    screen: SettingsScreen,
                    navigationOptions: ({ navigation }) => ({
                        title: 'Edit Profile',
                    })
                }
            }, {
                    contentComponent: customDrawerComponent,
                    drawerWidth: width * 0.8
                }
            )
        }
    }, {
        headerMode: 'screen',
        navigationOptions: {
            headerTransparent: true,
            headerLeftContainerStyle: { paddingLeft: 20 }
        }
    }
);

Значок на скриншоте находится внутри headerLeft. Я также пробовал различные значения zIndex, но безуспешно.

Заранее спасибо!

Edit:

У ящика есть та же проблема с первым элементом, события нажатия не работают на всей области элемента ящика, когда он находится над заголовком:

https://www.dropbox.com/s/krva5cgp7s59d13/drawer_opened.png?dl=0

Answer 1

Вы можете получить событие onPress в заголовке navigationOption, используя такие параметры навигации, как

static navigationOptions = ({ navigation }) => ({
    headerLeft: (
            <TouchableOpacity  onPress={() => navigation.state.params.handleSave()} >
                <Image source={ImageSource} />
            </TouchableOpacity>
    )
})

. Затем установите параметры навигации из componentDidMount, например:

componentDidMount() {
    this.props.navigation.setParams({ handleSave: this.onSavePress.bind(this)})
}

, затем вызовите метод, например:

onSavePress() {
    // Do Something
}

Answer 2

Попробуйте обернуть иконку внутри некоторого Touchable элемента, такого как TouchableOpacity / TouchableHighlight, а затем добавьте реквизит onPress к этому элементу