我如何在反应原生中使用陀螺仪?

时间:2018-02-08 03:16:08

标签: react-native expo

我尝试过“本地传感器管理器”#be;和' react-native-shake-event'和世博会的陀螺仪。但我一次又一次地失败了。我不知道为什么。这是我的代码。

import React from 'react';
import {
  Gyroscope,
} from 'expo';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';

export default class GyroscopeSensor extends React.Component {
  state = {
    gyroscopeData: {},
  }

  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>Gyroscope:</Text>
        <Text>x: {round(x)} y: {round(y)} z: {round(z)}</Text>

        <View >
          <TouchableOpacity onPress={this._toggle} style={styles.button}>
            <Text>Toggle</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={this._slow} style={[styles.button, styles.middleButton]}>
            <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;
}

视图成功渲染但陀螺仪运动功能无效。我如何在反应原生中使用陀螺仪?

有人帮我............................................ ..

1 个答案:

答案 0 :(得分:0)

您不能在普通世博会中使用这些套餐,因为它们需要链接。

您应该阅读世博会文档,了解您可以做什么,可以做些什么,使用您需要展示detachexpokit的图书馆,以便您可以链接本地代码。