React Native 打开原生地图

Question

我试图让我的按钮 onPress 函数调用一个函数，该函数将根据设备打开苹果地图或谷歌地图。出于某种原因，当我按下按钮时什么也没有发生。

这是我的功能：

openMap= () => {
  console.log('open directions')
    Platform.select({
        ios: () => {
            Linking.openURL('http://maps.apple.com/maps?daddr=');
        },
        android: () => {
            Linking.openURL('http://maps.google.com/maps?daddr=');
        }
    });
}

这是按钮：

<TouchableOpacity 
          onPress={this.openMap}
          style={styles.navigateBtn}>
            <Icon name="md-navigate" style={{ fontSize: 24 }} />
            <Text
              style={{ fontSize: 13, fontWeight: "700", lineHeight: 14 }}
            >
              NAVIGATE
                </Text>
          </TouchableOpacity>

最终我想将经度和纬度传递给 openMap 函数以获取方向，但首先我需要打开地图。

这是我的导入

import { View, TouchableOpacity, Modal, Platform, Alert, StyleSheet, Linking } from "react-native";
import {Header, Content, Text, Button, Icon, Card,CardItem, Title, Left, Right, Body, Container
} from "native-base";
import { Constants } from 'expo

Answer 1

您的按钮似乎调用this.Map了onPress您的TouchableOpacity. 不应该this.openMap吗？

希望对你有帮助！

编辑：

尝试在您的组件中像这样声明您的函数：

openMap() {
    console.log('open directions')
    Platform.select({
        ios: () => {
            Linking.openURL('http://maps.apple.com/maps?daddr=');
        },
        android: () => {
            Linking.openURL('http://maps.google.com/maps?daddr=');
        }
    });
}

而你TouchableOpacity试试这个

<TouchableOpacity 
      onPress={() => this.openMap() }
      style={styles.navigateBtn}>
        <Icon name="md-navigate" style={{ fontSize: 24 }} />
        <Text
          style={{ fontSize: 13, fontWeight: "700", lineHeight: 14 }}
        >

Answer 2

这将在网络中映射 oepn，然后重定向到应用程序（如果已安装）：

const openMaps = (latitude, longitude) => {
  const daddr = `${latitude},${longitude}`;
  const company = Platform.OS === "ios" ? "apple" : "google";
  Linking.openURL(`http://maps.${company}.com/maps?daddr=${daddr}`);
}

虽然我只会使用这个库，但它使用深度链接：