首页 > 解决方案 > 如何在反应原生地图链接中添加参数或变量

问题描述

export default function ViewData({ route, navigation }) {
  const { email, id, rideID, Source, Dest } = route.params;

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Details Screen</Text>
      <Text>otherParam: {JSON.stringify(email)}</Text>
      <Text>otherParam: {JSON.stringify(id)}</Text>
      <Text>otherParam: {JSON.stringify(rideID)}</Text>

      <TouchableOpacity
        onPress={() => Linking.openURL("google.navigation:q=" + { Source })}
      >
        <Text>CLick here to navigate to customer</Text>
      </TouchableOpacity>
      <Text>{Source}</Text>
    </View>
  );
}

我是 React Native 编码的新手,无法弄清楚我的变量是否存在,只是没有传递给链接。

来源= 39.0437567 -77.4874416

如果我粘贴纬度并登录谷歌地图,它会将我带到那里。

谢谢

标签: react-nativeexpo

解决方案


我使用这个功能,它对我有用

第一的import {Platform, Linking} from 'react-native';

此功能在 android 中打开谷歌地图,ios 中打开苹果地图

const openMapApp = (latitude, longitude) => {
    if (Platform.OS === 'android') {
        Linking.openURL(`google.navigation:q=${latitude},${longitude}`);
    }else{
        Linking.openURL(`http://maps.apple.com/?daddr=${latitude},${longitude}`)
    }
};

此功能在 android 和 ios 中打开谷歌地图

const openGoogleMapApp = (latitude, longitude) => {
    if (Platform.OS === 'android') {
        Linking.openURL(`google.navigation:q=${latitude},${longitude}`);
    }else{
        Linking.openURL(`https://www.google.com/maps/?daddr=${latitude},${longitude}`);
    }
};

推荐阅读