0

我正在尝试在本机反应中构建指南针。为此，我安装了这个包npm i react-native-compass-heading。包装工作正常，但图像在旋转时有点晃动。图像正在旋转，因为度数是动态变化的。图像transform rotate在没有动画的情况下发生。我想如果我在旋转时使用动画，那么这个问题将得到解决。但我不知道如何在本机反应中使用动画。如果有人解决了这个问题，这对我很有帮助。

这是包的代码用法：

import React, {useState, useEffect} from 'react';
import {Image, StyleSheet} from 'react-native';
import CompassHeading from 'react-native-compass-heading';
 
const App = () => {
  const [compassHeading, setCompassHeading] = useState(0);
 
  useEffect(() => {
    const degree_update_rate = 3;
 
    CompassHeading.start(degree_update_rate, degree => {
      setCompassHeading(degree);
    });
 
    return () => {
      CompassHeading.stop();
    };
  }, []);
 
  return (
    <Image
      style={[
        styles.image,
        {transform: [{rotate: `${360 - compassHeading}deg`}]},
      ]}
      resizeMode="contain"
      source={require('./compass.png')}
    />
  );
};
 
const styles = StyleSheet.create({
  image: {
    width: '90%',
    flex: 1,
    alignSelf: 'center',
  },
});
 
export default App;

如果我用动画改变了{transform: [{rotate: ${360 - compassHeading}deg}]}样式，它可能会解决问题（只是我的看法）。

4

0 回答 0