如何在Expo应用中实现react-native-google-places-autocomplete的currentLocation功能

问题核心 #

react-native-google-places-autocomplete依赖原生navigator.geolocation的回调式getCurrentPosition方法，但Expo环境只能用expo-location，而它提供的是Promise式的getCurrentPositionAsync，直接替换会导致API不匹配报错。

解决方案：封装适配层 #

通过封装一个适配对象，把expo-location的异步方法转换成原生API的回调格式，让组件能正常调用。

步骤1：导入expo-location

确保已安装expo-location（未安装执行npx expo install expo-location），在组件文件顶部导入：

import * as Location from 'expo-location';

步骤2：替换原navigator.geolocation配置

删除原来的navigator.geolocation = require("expo-location");，替换为以下适配代码：

// 适配expo-location到原生geolocation API格式
const adaptExpoLocationToGeolocation = () => {
  return {
    getCurrentPosition: (successCallback, errorCallback, options) => {
      Location.getCurrentPositionAsync(options)
        .then(position => {
          // 转换位置数据格式为原生API兼容结构
          const nativePosition = {
            coords: {
              latitude: position.coords.latitude,
              longitude: position.coords.longitude,
              altitude: position.coords.altitude,
              accuracy: position.coords.accuracy,
              altitudeAccuracy: position.coords.altitudeAccuracy,
              heading: position.coords.heading,
              speed: position.coords.speed,
            },
            timestamp: position.timestamp,
          };
          successCallback(nativePosition);
        })
        .catch(error => {
          errorCallback(error);
        });
    },
    // 适配监听位置变化方法（若组件需要）
    watchPosition: (successCallback, errorCallback, options) => {
      return Location.watchPositionAsync(options, position => {
        const nativePosition = {
          coords: {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            altitude: position.coords.altitude,
            accuracy: position.coords.accuracy,
            altitudeAccuracy: position.coords.altitudeAccuracy,
            heading: position.coords.heading,
            speed: position.coords.speed,
          },
          timestamp: position.timestamp,
        };
        successCallback(nativePosition);
      });
    },
    clearWatch: (watchId) => {
      Location.removeLocationUpdatesAsync(watchId);
    },
  };
};

// 替换全局navigator.geolocation
navigator.geolocation = adaptExpoLocationToGeolocation();

步骤3：确保位置权限已获取

在组件的useEffect中添加权限请求逻辑（若你的Context未处理）：

useEffect(() => {
  const requestLocationPermission = async () => {
    const { status } = await Location.requestForegroundPermissionsAsync();
    if (status !== 'granted') {
      Alert.alert('权限提示', '需要允许位置权限才能获取当前位置');
    }
  };
  requestLocationPermission();
}, []);

步骤4：验证组件配置

保持GooglePlacesAutocomplete的currentLocation={true}配置不变，可添加currentLocationLabel优化显示：

<GooglePlacesAutocomplete
  placeholder="Search"
  currentLocation={true}
  currentLocationLabel="当前位置"
  minLength={2}
  debounce={200}
  nearbyPlacesAPI="GooglePlacesSearch"
  onPress={(data, details = null) => {
    console.log(data, details);
  }}
  query={{
    key: "YOUR GOOGLE API KEY",
    language: "en",
  }}
/>

额外注意事项 #

• 确保你的Google API Key已启用Places API和Geocoding API权限
• 若使用Expo Go测试，需确保设备已开启位置服务

内容的提问来源于stack exchange，提问作者Rémi-Antoine Joron