react-native - 使用 Expo 反应本机指南针

问题描述

我想在我的 react-native 项目上显示指南针，我使用这个compas-github我已经按照该链接上的所有步骤操作，但是出现了类似这个错误的错误。我对此真的很陌生。请帮助我或建议另一种在 react-native 上显示指南针的方法。非常感谢

这是我的代码

从“反应”导入反应，{组件}；从“react-native”导入{文本、视图、样式表、图像、动画、缓动、尺寸}；从'expo'导入{位置，权限}；导入 { Container, Header, Content, } from "native-base";

export default class KompasPage extends Component{

      constructor(props) {
        super(props);
        this.spinValue = new Animated.Value(0);
        this.state = {
          location: null,
          //errorMessage: null,
          heading: null,
          truenoth: null,
          timer: false,
        };
      }

      timePass() {
        this.setState({ timer: true });
      }

      componentWillMount() {
        setTimeout(() => {
          this.timePass();
        }, 1000);
        this._getLocationAsync();
      }

      componentWillUpdate()
      {
        this.spinValue()
      }

      _getLocationAsync = async () => {
        //check dev loc permiss
        let { status } = await Permissions.askAsync(Permissions.LOCATION);
        if (status !== 'granted') {
          this.setState({
            errorMessage : 'Permission to access location was denied',
          });
        }
        else {
          Expo.Location.watchHeadingAsync((obj) => {
            let heading = obj.magHeading;
            this.setState({heading: heading})
          })
        }
      };

      spin() {
        let start = JSON.stringify(this.spinValue);
        let heading = Math.round(this.state.heading);

        let rot = +start;
        let rotM = rot % 360;

        if (rotM < 180 && (heading > (rotM +180)))
        rot -= 360;
        if (rotM >= 180 && (heading <= (rotM -180)))
        rot += 360;

        rot += (heading - rotM)

        Animated.timing(
          this.spinValue,
          {
            toValue: rot,
            duration: 300,
            easing: Easing.easeInOut
          }
        ).start()
      }

       render() {
        const { navigate } = this.props.navigation;

        let LoadingText = 'Loading...';
        let display = LoadingText;

        if (this.state.errorMessage)
          display = this.state.errorMessage;

        const spin = this.spinValue.interpolate({
          inputRange: [0,360],
          outputRange: ['-0deg', '-360deg']
        })

        display = Math.round(JSON.stringify(this.spinValue))

        if(display < 0)
          display += 360
        if(display > 360)
          display -= 360

        return(

          <View style={styles.container}>
          <Text style={styles.text}>{display+'°'}</Text>
          <View style={styles.imageContainer} >
            <Animated.Image resizeMode='contain' source={require("../image/dasar_kompas.png")}
              style={{
              width:  deviceWidth  - 10, height: deviceHeight/2 - 10,
              left: deviceWidth /2 -  (deviceWidth   - 10)/2, top:  deviceHeight /2 - (deviceHeight/2  - 10)/2,
              transform: [{rotate: spin}],
            }} />
          </View>
          <View style={styles.arrowContainer} >
            <Image resizeMode='contain' source={require("../image/kompasbaru.png")} style={styles.arrow} />
          </View>
        </View>
  );
 }
 }

 const deviceWidth  =  Dimensions.get('window').width
 const deviceHeight =  Dimensions.get('window').height

 const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
   },
   text: {
     color: '#263544',
     fontSize: 80,
     transform: ([{translateY: -(deviceHeight/2 - (deviceHeight/2  - 10)/2) - 50 }])
   },
   imageContainer: {
     ...StyleSheet.absoluteFillObject,
   },
   arrowContainer: {
     ...StyleSheet.absoluteFillObject,
   },
   arrow: {
     width: deviceWidth/7,
     height: deviceWidth/7,
     left: deviceWidth /2 - (deviceWidth/7)/2,
     top:  deviceHeight /2  - (deviceWidth/7)/2,
     opacity: 0.9
   }
 });

标签： react-native

react-native - 使用 Expo 反应本机指南针

问题描述

解决方案

推荐阅读