在 React-Native 移动应用程序中检测角速度

Posted 2023-02-19

【中文标题】在 React-Native 移动应用程序中检测角速度

【英文标题】：Detecting Angular Velocity in a React-Native mobile application

【发布时间】：2017-08-10 13:10:30

【问题描述】：

我希望在移动应用程序中创建一项功能，以检测用户旋转手机的速度和方向。我相信这是角速度，但如果我错了，请纠正我。

对于它的价值，我在 Expo 开发工具和 Expo 加速度计 API 的帮助下使用 react-native (create-react-native-app) 来试验这个想法。 https://docs.expo.io/versions/v15.0.0/sdk/accelerometer.html

不过，我的问题可能更为根本。 我可以可靠地检测手机旋转的速度和方向吗？我编写的任何代码解决方案是否会在不同的移动设备上提供一致的值，或者差异很大？

那么，如果这是一个合理的壮举，我将如何确定这样的价值？我会将值从毫秒到毫秒进行比较，如果是，哪些值？

感谢您帮助我解决这个问题。

【参考方案1】：

虽然我仍然不确定正确的术语是什么，但我已经设法通过使用陀螺仪 API 并监控“Z 值”来获得我正在寻找的值。这是我的工作示例。 （需要用expo运行）

import React from 'react';
import Expo, 
  Gyroscope,
 from 'expo';

import  Text, TouchableOpacity, View  from 'react-native';

export default class Test extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      gyroscopeData: 
        x: 0,
        y: 0,
        z: 0
      ,
    
  
  componentDidMount() 
    this._toggle();
  

  componentWillUnmount() 
    this._unsubscribe();
  

  _toggle = () => 
    if (this._subscription) 
      this._unsubscribe();
     else 
      this._subscribe();
    
  
  _slow = () => 
    Gyroscope.setUpdateInterval(1000);
  

  _fast = () => 
    Gyroscope.setUpdateInterval(16);
  
  _subscribe = () => 
    this._subscription = Gyroscope.addListener((result) => 
      this.setState(gyroscopeData: result);
    );
  

  _unsubscribe = () => 
    this._subscription && this._subscription.remove();
    this._subscription = null;
  
  render() 
    let  x, y, z  = this.state.gyroscopeData;
    return (
      <View>
        /*<Text> x: round(x)</Text>*/
        /*<Text> y: round(y)</Text>*/
        <Text> z: z</Text>

        <View>
          <TouchableOpacity onPress=this._toggle>
            <Text>Toggle</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress=this._slow>
            <Text>Slow</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress=this._fast>
            <Text>Fast</Text>
          </TouchableOpacity>
        </View>
      </View>
    );  
  

function round(n) 
  if (!n) 
    return 0;
  

  return Math.floor(n * 100) / 100;