0

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

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

4

2 回答 2

0

尝试将 Icon 包裹在 TouchableOpacity/TouchableHighlight 等一些可触摸元素中，然后向该元素添加一个 onPress 道具

于 2019-05-03T10:22:23.633 回答
0

您可以使用导航参数在 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
}
于 2019-05-03T10:23:47.407 回答