App3.js

// App.js
import React, { useState, useEffect, useRef } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  FlatList,
  Alert,
  Platform,
  PermissionsAndroid,
} from 'react-native';
import Geolocation from 'react-native-geolocation-service';
import BackgroundTimer from 'react-native-background-timer';

const App = () => {
  const [isRunning, setIsRunning] = useState(false);
  const [locations, setLocations] = useState([]);
  const [distance, setDistance] = useState(0);
  const [time, setTime] = useState(0);
  const [pace, setPace] = useState('0:00');
  const locationWatchId = useRef(null);
  const timerRef = useRef(null);
  const lastLocationRef = useRef(null);

  useEffect(() => {
    return () => {
      stopLocationTracking();
      stopTimer();
    };
  }, []);

  useEffect(() => {
    if (time > 0 && distance > 0) {
      // 计算配速 (分钟/公里)
      const paceMinutes = (time / 60) / (distance / 1000);
      const paceMin = Math.floor(paceMinutes);
      const paceSec = Math.floor((paceMinutes - paceMin) * 60);
      setPace(`${paceMin}:${paceSec < 10 ? '0' + paceSec : paceSec}`);
    }
  }, [time, distance]);

  const requestLocationPermission = async () => {
    if (Platform.OS === 'ios') {
      const granted = await Geolocation.requestAuthorization('always');
      return granted === 'granted';
    } else {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
        {
          title: '需要位置权限',
          message: '跑步追踪App需要访问您的位置信息',
          buttonNeutral: '稍后询问',
          buttonNegative: '取消',
          buttonPositive: '确定',
        }
      );
      return granted === PermissionsAndroid.RESULTS.GRANTED;
    }
  };

  const calculateDistance = (lat1, lon1, lat2, lon2) => {
    // 使用Haversine公式计算两点之间的距离
    const R = 6371000; // 地球半径，单位米
    const dLat = deg2rad(lat2 - lat1);
    const dLon = deg2rad(lon2 - lon1);
    const a =
      Math.sin(dLat / 2) * Math.sin(dLat / 2) +
      Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
      Math.sin(dLon / 2) * Math.sin(dLon / 2);
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    return R * c; // 距离，单位米
  };

  const deg2rad = (deg) => {
    return deg * (Math.PI / 180);
  };

  const startLocationTracking = async () => {
    const hasPermission = await requestLocationPermission();
    
    if (!hasPermission) {
      Alert.alert('权限错误', '无法获取位置权限，请在设置中允许此应用获取位置信息。');
      return false;
    }
    
    locationWatchId.current = Geolocation.watchPosition(
      (position) => {
        const { latitude, longitude } = position.coords;
        const newLocation = { latitude, longitude, timestamp: position.timestamp };
        
        setLocations(prevLocations => [...prevLocations, newLocation]);
        
        // 计算累计距离
        if (lastLocationRef.current) {
          const newDistance = calculateDistance(
            lastLocationRef.current.latitude,
            lastLocationRef.current.longitude,
            latitude,
            longitude
          );
          
          if (newDistance > 1) { // 忽略微小移动，减少误差
            setDistance(prevDistance => prevDistance + newDistance);
          }
        }
        
        lastLocationRef.current = newLocation;
      },
      (error) => {
        console.log('位置获取错误', error);
      },
      {
        enableHighAccuracy: true,
        distanceFilter: 5, // 最小距离变化（米），超过此值才会更新位置
        interval: 2000, // 位置更新间隔（毫秒）
        fastestInterval: 1000, // 最快更新间隔（仅Android）
        forceRequestLocation: true,
        showLocationDialog: true,
      }
    );
    
    return true;
  };

  const stopLocationTracking = () => {
    if (locationWatchId.current !== null) {
      Geolocation.clearWatch(locationWatchId.current);
      locationWatchId.current = null;
    }
  };

  const startTimer = () => {
    timerRef.current = BackgroundTimer.setInterval(() => {
      setTime(prevTime => prevTime + 1);
    }, 1000);
  };

  const stopTimer = () => {
    if (timerRef.current !== null) {
      BackgroundTimer.clearInterval(timerRef.current);
      timerRef.current = null;
    }
  };

  const formatTime = (seconds) => {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const secs = seconds % 60;
    
    return [
      hours > 0 ? hours : null,
      hours > 0 ? (minutes < 10 ? '0' + minutes : minutes) : minutes,
      secs < 10 ? '0' + secs : secs
    ].filter(Boolean).join(':');
  };

  const handleToggleRunning = async () => {
    if (!isRunning) {
      // 开始跑步
      const hasPermission = await startLocationTracking();
      if (hasPermission) {
        setIsRunning(true);
        setLocations([]);
        setDistance(0);
        setTime(0);
        setPace('0:00');
        lastLocationRef.current = null;
        startTimer();
      }
    } else {
      // 结束跑步
      stopLocationTracking();
      stopTimer();
      setIsRunning(false);
      
      // 显示总结信息
      Alert.alert(
        '跑步结束',
        `总距离: ${(distance / 1000).toFixed(2)} 公里\n总时长: ${formatTime(time)}\n平均配速: ${pace}/公里`,
        [{ text: '确定', onPress: () => console.log('确认跑步结束') }]
      );
      
      // 清零数据
      setLocations([]);
      setDistance(0);
      setTime(0);
      setPace('0:00');
      lastLocationRef.current = null;
    }
  };

  const renderLocationItem = ({ item, index }) => (
    <View style={styles.locationItem}>
      <Text style={styles.locationText}>
        #{index + 1}: 纬度 {item.latitude.toFixed(6)}, 经度 {item.longitude.toFixed(6)}
      </Text>
    </View>
  );

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>跑步追踪</Text>
      </View>
      
      <View style={styles.statsContainer}>
        <View style={styles.statBox}>
          <Text style={styles.statValue}>{(distance / 1000).toFixed(2)}</Text>
          <Text style={styles.statLabel}>距离(公里)</Text>
        </View>
        
        <View style={styles.statBox}>
          <Text style={styles.statValue}>{formatTime(time)}</Text>
          <Text style={styles.statLabel}>时长</Text>
        </View>
        
        <View style={styles.statBox}>
          <Text style={styles.statValue}>{pace}</Text>
          <Text style={styles.statLabel}>配速(分/公里)</Text>
        </View>
      </View>
      
      <View style={styles.listContainer}>
        <Text style={styles.sectionTitle}>位置记录</Text>
        <FlatList
          data={locations}
          renderItem={renderLocationItem}
          keyExtractor={(item, index) => index.toString()}
          style={styles.list}
          contentContainerStyle={styles.listContent}
        />
      </View>
      
      <TouchableOpacity
        style={[styles.button, isRunning ? styles.stopButton : styles.startButton]}
        onPress={handleToggleRunning}
      >
        <Text style={styles.buttonText}>{isRunning ? '结束跑步' : '开始跑步'}</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8f9fa',
  },
  header: {
    padding: 16,
    backgroundColor: '#4CAF50',
    alignItems: 'center',
  },
  title: {
    fontSize: 22,
    fontWeight: 'bold',
    color: 'white',
  },
  statsContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginVertical: 16,
    paddingHorizontal: 8,
  },
  statBox: {
    flex: 1,
    alignItems: 'center',
    padding: 10,
    backgroundColor: 'white',
    borderRadius: 8,
    margin: 4,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.2,
    shadowRadius: 1.5,
    elevation: 2,
  },
  statValue: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
  statLabel: {
    fontSize: 14,
    color: '#666',
    marginTop: 4,
  },
  listContainer: {
    flex: 1,
    padding: 16,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
    color: '#333',
  },
  list: {
    flex: 1,
    backgroundColor: 'white',
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.2,
    shadowRadius: 1.5,
    elevation: 2,
  },
  listContent: {
    padding: 8,
  },
  locationItem: {
    paddingVertical: 8,
    paddingHorizontal: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  locationText: {
    fontSize: 14,
    color: '#333',
  },
  button: {
    margin: 16,
    padding: 16,
    borderRadius: 8,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  startButton: {
    backgroundColor: '#4CAF50',
  },
  stopButton: {
    backgroundColor: '#F44336',
  },
  buttonText: {
    fontSize: 18,
    fontWeight: 'bold',
    color: 'white',
  },
});

export default App;