React native - onpress 在抽屉导航标题中不起作用答案

【问题标题】：React native - onpress doesn't work inside drawer navigation headerReact native - onpress 在抽屉导航标题中不起作用
【发布时间】：2019-05-03 08:41:46
【问题描述】：

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

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

【问题讨论】：

标签： react-native react-navigation react-navigation-drawer

【解决方案1】：

尝试将 Icon 包裹在 TouchableOpacity/TouchableHighlight 等可触摸元素中，然后为该元素添加 onPress 属性

【讨论】：

【解决方案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
}

【讨论】：