无法从 React Native Maps 触发 React Navigation

Question

我正在使用 react-native-maps 依赖项构建一个 react-native 应用程序，但无法在 MapView 中使用 react-navigator onPress 导航到其他屏幕。

我想通过 { communityId: ${community._id} } 对象来查看独特的社区屏幕。

代码：

import React, { Component } from 'react';
import { View, Image, StyleSheet, Vibration, TouchableOpacity, Text } from 'react-native';
import MapView, { Callout } from 'react-native-maps';
import { Marker } from 'react-native-maps';

class LogoTitle extends React.Component {
    render() {
        return (
            <Image
                source={require("./logo.png")}
                style={{ width: 60, height: 30 }}
            />
        );
    }
}

class MapScreen extends Component {
    constructor(props) {
        super(props);

        this.state = {
            latitude: null,
            longitude: null,
            error: null,
            communities: ""
        };
    }

    componentDidMount() {
        fetch("http://localhost:4000/community")
            .then(res => res.json())
            .then(res => {
                this.setState({ communities: res });
            });
        Vibration.vibrate();
        navigator.geolocation.getCurrentPosition(
            (position) => {
                this.setState({
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude,
                    error: null,
                });
            },
            (error) => this.setState({ error: error.message }),
            { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
        );
    }

    static navigationOptions = {
        headerTitle: <LogoTitle />
    };

    navigateToView(viewName, { param: value }) {
        console.log(viewName);
        const { navigate } = this.props.navigation;
        navigate(viewName, { param: value });
    }

    render() {
        const LatLng = {
            latitude: this.state.latitude,
            longitude: this.state.longitude
        }

        let commcoords;
        this.state.communities &&
            (commcoords = this.state.communities.map((community, id) => {
                let commlatlong;
                commlatlong = {
                    latitude: community.location.lat,
                    longitude: community.location.long
                };
                return (
                    <Marker
                        key={id}
                        coordinate={commlatlong}
                        title={community.name}>
                        <Callout>
                            <TouchableOpacity
                                onPress={() => this.navigateToView("Community", { communityId: `${community._id}` })}
                                style={styles.communityButton}>
                                <Text style={styles.communityButtonText}>{community.name}</Text>
                                <Text style={styles.descButtonText}>{community.description}</Text>
                            </TouchableOpacity>
                        </Callout>
                    </Marker>
                )
            }))
        return (
            <View style={styles.container}>
                {this.state.latitude &&
                    <MapView
                        style={styles.map}
                        initialRegion={{
                            latitude: this.state.latitude,
                            longitude: this.state.longitude,
                            latitudeDelta: 0.1011,
                            longitudeDelta: 0.1011,
                        }}>
                        <Marker
                            coordinate={LatLng}
                            title={`Latitude: ${this.state.latitude}`}
                            description={`Longitude: ${this.state.longitude}`}
                            pinColor='#000000'>
                        </Marker>
                        {commcoords}
                    </MapView>}
            </View>

        );
    }
}

我已经尝试过：

1) 使用正常的导航方式。

onPress={() => this.props.navigation.navigate("Community", { communityId: `${community._id}` })}

2) 使用替代的触摸方法、按钮、可触摸高亮等。

3) 尝试使用远程调试器控制台记录触发的触摸方法。 console.log 从未在控制台中触发。

 navigateToView(viewName, { param: value }) {
        console.log(viewName);
        const { navigate } = this.props.navigation;
        navigate(viewName, { param: value });
    }

4) 通过以下 stackoverflow 链接研究并尝试了无济于事的解决方案：

React Native - How to use React Navigation with React Native Maps?

React native maps click pin to take you to another screen

我想解决此地图导航问题以增加此本机应用程序的功能。如果有替代方法，我愿意接受任何和所有建议。谢谢。

Answer 1

我想出了如何通过在标记中使用 onCalloutPress 来触发 onpress 事件：

<Marker
    key={id}
    coordinate={commlatlong}
    title={community.name}
    onCalloutPress={() => this.props.navigation.navigate("Community", { communityId: `${community._id}` })}>
    <Callout>
        <TouchableOpacity
            style={styles.communityButton}>
            <Text style={styles.communityButtonText}>{community.name}</Text>
            <Text style={styles.descButtonText}>{community.description}</Text>
        </TouchableOpacity>
    </Callout>
</Marker>

我现在可以导航以显示地图上的屏幕。感谢这篇文章：

Marker click event on react native maps not working in react ios

其他来源：

onCalloutPress 用户点击标注时调用的回调。

https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md