如何修改React Native代码，让指南针箭头持续指向指定坐标并自动旋转？

问题核心 #

你的代码存在两个关键问题导致箭头无法跟随方位角更新：

1. rotation 是组件每次渲染时新建的 Animated.Value，状态无法持久，动画会被频繁重置
2. 直接在渲染阶段调用 rotateImage 会导致重复执行，且 rotate 属性的写法错误（Animated.Value 不能直接字符串拼接）

解决方案代码 #

import {
  Alert,
  Animated,
  Easing,
  Linking,
  Platform,
  StyleSheet,
  Text,
  View,
} from "react-native";
import React, { useEffect, useState, useRef } from "react";

import * as Location from "expo-location";
import * as geolib from "geolib";
import RNAndroidOpenSettings from "react-native-android-open-settings";

import { COLORS } from "../../assets/Colors/Colors";

export default function DateFinder() {
  const [hasForegroundPermissions, setHasForegroundPermissions] = useState(null);
  const [userLocation, setUserLocation] = useState(null);
  // 用useRef保存Animated.Value，避免每次渲染重置动画实例
  const rotation = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    const AccessLocation = async () => {
      function appSettings() {
        console.warn("Open settings pressed");
        if (Platform.OS === "ios") {
          Linking.openURL("app-settings:");
        } else {
          RNAndroidOpenSettings.appDetailsSettings();
        }
      }

      const appSettingsAlert = () => {
        Alert.alert(
          "允许Wassupp使用你的位置",
          "打开应用设置以允许Wassupp访问你的当前位置，否则无法使用爱心指南针",
          [
            {
              text: "取消",
              onPress: () => console.warn("Cancel pressed"),
            },
            { text: "打开设置", onPress: appSettings },
          ]
        );
      };

      const foregroundPermissions = await Location.requestForegroundPermissionsAsync();
      if (
        !foregroundPermissions.canAskAgain ||
        foregroundPermissions.status === "denied"
      ) {
        appSettingsAlert();
      }
      setHasForegroundPermissions(foregroundPermissions.status === "granted");
      if (foregroundPermissions.status === "granted") {
        const locationWatcher = await Location.watchPositionAsync(
          {
            accuracy: Location.Accuracy.BestForNavigation,
            activityType: Location.ActivityType.Fitness,
            distanceInterval: 0.5,
          },
          (location) => {
            setUserLocation(location);
          }
        );
        // 组件卸载时停止位置监听，避免内存泄漏
        return () => locationWatcher.remove();
      }
    };

    AccessLocation().catch(console.error);
  }, []);

  const getBearing = () => {
    return geolib.getGreatCircleBearing(
      {
        latitude: userLocation.coords.latitude,
        longitude: userLocation.coords.longitude,
      },
      {
        latitude: 45.472019680834606,
        longitude: -73.8624948923216,
      }
    );
  };

  // 监听userLocation变化，自动触发动画
  useEffect(() => {
    if (!userLocation) return;
    
    const angle = getBearing();
    Animated.timing(rotation, {
      toValue: angle,
      duration: 1000,
      easing: Easing.bounce,
      useNativeDriver: true,
    }).start();
  }, [userLocation, rotation]);

  // 修正动画插值写法，将数值转换为角度字符串
  const rotateStyle = rotation.interpolate({
    inputRange: [0, 360],
    outputRange: ["0deg", "360deg"],
  });

  return (
    <View style={styles.background}>
      <Text>{JSON.stringify(userLocation)}</Text>
      <Animated.Image
        source={require("../../assets/Compass/Arrow_up.png")}
        style={[styles.image, { transform: [{ rotate: rotateStyle }] }]}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  background: {
    backgroundColor: COLORS.background_Pale,
    flex: 1,
  },
  image: {
    flex: 1,
    resizeMode: "contain", // 确保图片按比例缩放
  },
  scrollView: {
    backgroundColor: COLORS.background_Pale,
  },
});

关键修改说明 #

• 用useRef持久化动画实例：避免组件每次渲染时新建Animated.Value，保证动画状态不丢失
• 通过useEffect监听位置变化：只有当用户位置更新时才触发动画，避免无效重复执行
• 修正动画插值写法：使用interpolate将Animated.Value转换为CSS角度字符串，确保动画生效
• 添加监听清理函数：组件卸载时停止位置监听，防止内存泄漏
• 修复细节问题：补充Platform导入、修正拼写错误、添加图片缩放模式

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