Question

我正在尝试在我的本机应用程序的导航标题内添加自定义菜单图标按钮。我成功做到了，但是只要图标在标题中，press事件就不会触发。例如，如果我的图标在这里：

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值，但是没有运气。

谢谢！

编辑：

抽屉在第一个项目上有相同的问题，当抽屉项目位于标题上方时，按事件在抽屉项目的整个区域上不起作用：

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

Answer 1

尝试将Icon包裹在诸如TouchableOpacity / TouchableHighlight之类的Touchable元素内，然后向该元素添加onPress道具

Answer 2

您可以使用类似的导航参数在navigationOption的标题中获取onPress事件

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
}

React Native-Onpress在抽屉导航标题内不起作用

2 个答案: