google-maps - React Native 打开原生 map

Question

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

这是我的功能:

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 函数以获取方向，但首先我需要打开 map 。

这是我的进口

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 }}
        >