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触发的触摸方法。 console.log从未在控制台中触发。

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

4）研究并尝试了以下堆栈溢出链接无济于事的解决方案：

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

无法从React Native Maps触发React导航

1 个答案: