求助：React Native实现Android/iOS端当前位置至目的地英里距离计算

我完全理解你被Android端定位超时问题卡住的烦躁感，咱们一步步拆解问题，先搞定定位，再实现距离计算和列表展示的需求。

第一步：修复Android定位超时的核心问题 #

你的代码里设置了enableHighAccuracy: true和超大的timeout，这反而容易出问题——高精度定位依赖GPS信号，在室内或信号弱的环境下会极慢甚至超时。另外，别忘了配置Android的定位权限，这是很多人忽略的点：

1. 补充Android权限配置 #

打开android/app/src/main/AndroidManifest.xml，添加以下权限：

<!-- 基础定位权限 -->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<!-- Android 10+ 如需后台定位需添加 -->
<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />

2. 优化定位参数逻辑 #

调整getCurrentPosition的参数，先优先使用网络定位（关闭高精度）测试，同时合理设置超时时间，还要先主动请求权限：

import { PermissionsAndroid } from 'react-native';

componentDidMount() {
  // 先请求定位权限（React Native 0.60+需要手动申请）
  PermissionsAndroid.request(
    PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
    {
      title: "需要定位权限",
      message: "我们需要获取你的位置来计算到目的地的距离",
      buttonPositive: "确定"
    }
  ).then(granted => {
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          this.setState({
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            error: null,
          });
          // 获取到位置后立刻计算所有目的地距离
          this.calculateAllDistances();
        },
        (error) => this.setState({ error: error.message }),
        { 
          enableHighAccuracy: false, // 先关闭高精度，优先用网络定位
          timeout: 10000, // 10秒超时，避免无限等待
          maximumAge: 30000 // 允许使用30秒内的缓存位置
        },
      );
    } else {
      this.setState({ error: "定位权限被拒绝，无法计算距离" });
    }
  });
}

第二步：实现英里距离计算（Haversine公式） #

我们用标准的Haversine公式计算两个经纬度之间的球面距离，再转换成英里：

// 工具函数：计算两点间的英里距离
calculateDistanceInMiles(lat1, lon1, lat2, lon2) {
  const earthRadiusInMiles = 3958.8; // 地球半径（英里）
  // 转弧度计算
  const dLat = (lat2 - lat1) * Math.PI / 180;
  const dLon = (lon2 - lon1) * Math.PI / 180;
  const a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * 
    Math.sin(dLon/2) * Math.sin(dLon/2); 
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
  const distance = earthRadiusInMiles * c;
  return distance.toFixed(2); // 保留两位小数，更友好
}

第三步：在FlatList中展示距离（替代已弃用的ListView） #

React Native现在推荐用FlatList代替ListView，假设你的目的地数据存在JSON里，我们可以这样实现：

// 示例目的地数据（替换成你自己的JSON数据）
const destinations = [
  { id: 1, name: "中央公园", lat: 40.785091, lon: -73.968285 },
  { id: 2, name: "金门大桥", lat: 37.819929, lon: -122.478255 },
];

class DistanceList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      latitude: null,
      longitude: null,
      error: null,
      destinationsWithDistance: [],
    };
  }

  // 上面的权限请求、getCurrentPosition、calculateDistanceInMiles代码...

  calculateAllDistances() {
    const { latitude, longitude } = this.state;
    if (!latitude || !longitude) return;

    // 给每个目的地添加距离字段
    const updatedDestinations = destinations.map(dest => ({
      ...dest,
      distance: this.calculateDistanceInMiles(latitude, longitude, dest.lat, dest.lon)
    }));

    this.setState({ destinationsWithDistance: updatedDestinations });
  }

  // FlatList的渲染项
  renderListItem = ({ item }) => (
    <View style={{ padding: 16, borderBottomWidth: 1, borderBottomColor: '#f0f0f0' }}>
      <Text style={{ fontSize: 16, fontWeight: '500' }}>{item.name}</Text>
      <Text style={{ marginTop: 4, color: '#666' }}>当前距离: {item.distance} 英里</Text>
    </View>
  )

  render() {
    const { error, destinationsWithDistance, latitude } = this.state;

    // 错误状态展示
    if (error) {
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>出错了: {error}</Text>
        </View>
      );
    }

    // 正在获取位置的状态
    if (!latitude) {
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>正在获取你的位置...</Text>
        </View>
      );
    }

    // 展示距离列表
    return (
      <FlatList
        data={destinationsWithDistance}
        keyExtractor={(item) => item.id.toString()}
        renderItem={this.renderListItem}
      />
    );
  }
}

额外小提示 #

• 如果需要实时更新距离（比如用户移动时），可以用navigator.geolocation.watchPosition代替getCurrentPosition。
• iOS端记得在Info.plist中添加NSLocationWhenInUseUsageDescription字段，说明定位用途，否则会闪退。
• 要是还是觉得原生Geolocation不稳定，可以试试第三方库react-native-geolocation-service，它的兼容性更好。

内容的提问来源于stack exchange，提问作者Anjali