首页指南参考教程
This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 51).

Expo Gyroscope iconExpo Gyroscope

A library that provides access to the device's gyroscope sensor.

Android
Web

Gyroscope from expo-sensors provides access to the device's gyroscope sensor to respond to changes in rotation in three-dimensional space.

Installation

Terminal
npx expo install expo-sensors

If you are installing this in an existing React Native app (bare workflow), start by installing expo in your project. Then, follow the additional instructions as mentioned by library's README under "Installation in bare React Native projects" section.

Usage

Basic Gyroscope usage
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Gyroscope } from 'expo-sensors';

export default function App() {
  const [{ x, y, z }, setData] = useState({
    x: 0,
    y: 0,
    z: 0,
  });
  const [subscription, setSubscription] = useState(null);

  const _slow = () => Gyroscope.setUpdateInterval(1000);
  const _fast = () => Gyroscope.setUpdateInterval(16);

  const _subscribe = () => {
    setSubscription(
      Gyroscope.addListener(gyroscopeData => {
        setData(gyroscopeData);
      })
    );
  };

  const _unsubscribe = () => {
    subscription && subscription.remove();
    setSubscription(null);
  };

  useEffect(() => {
    _subscribe();
    return () => _unsubscribe();
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Gyroscope:</Text>
      <Text style={styles.text}>x: {x}</Text>
      <Text style={styles.text}>y: {y}</Text>
      <Text style={styles.text}>z: {z}</Text>
      <View style={styles.buttonContainer}>
        <TouchableOpacity onPress={subscription ? _unsubscribe : _subscribe} style={styles.button}>
          <Text>{subscription ? 'On' : 'Off'}</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={_slow} style={[styles.button, styles.middleButton]}>
          <Text>Slow</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={_fast} style={styles.button}>
          <Text>Fast</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10,
  },
  text: {
    textAlign: 'center',
  },
  buttonContainer: {
    flexDirection: 'row',
    alignItems: 'stretch',
    marginTop: 15,
  },
  button: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#eee',
    padding: 10,
  },
  middleButton: {
    borderLeftWidth: 1,
    borderRightWidth: 1,
    borderColor: '#ccc',
  },
});

API

import { Gyroscope } from 'expo-sensors';

Classes

Android
iOS
Web

Gyroscope

Type: Class extends DeviceSensor<GyroscopeMeasurement>

A base class for subscribable sensors. The events emitted by this class are measurements specified by the parameter type Measurement.

Gyroscope Methods

Android
iOS
Web

addListener(listener)

NameTypeDescription
listenerListener<GyroscopeMeasurement>

A callback that is invoked when a gyroscope update is available. When invoked, the listener is provided a single argument that is an GyroscopeMeasurement object.


Subscribe for updates to the gyroscope.

Returns:

EventSubscription

A subscription that you can call remove() on when you would like to unsubscribe the listener.

Android
iOS
Web

getListenerCount()

Returns the registered listeners count.

Returns:

number

Android
iOS
Web

getPermissionsAsync()

Checks user's permissions for accessing sensor.

Android
iOS
Web

hasListeners()

Returns boolean which signifies if sensor has any listeners registered.

Returns:

boolean

Android
iOS
Web

isAvailableAsync()

You should always check the sensor availability before attempting to use it.

Returns whether the gyroscope is enabled on the device.

On mobile web, you must first invoke Gyroscope.requestPermissionsAsync() in a user interaction (i.e. touch event) before you can use this module. If the status is not equal to granted then you should inform the end user that they may have to open settings.

On web this starts a timer and waits to see if an event is fired. This should predict if the iOS device has the device orientation API disabled in Settings > Safari > Motion & Orientation Access. Some devices will also not fire if the site isn't hosted with HTTPS as DeviceMotion is now considered a secure API. There is no formal API for detecting the status of DeviceMotion so this API can sometimes be unreliable on web.

Returns:

Promise<boolean>

A promise that resolves to a boolean denoting the availability of the gyroscope.

Android
iOS
Web

removeAllListeners()

Removes all registered listeners.

Returns:

void

Android
iOS
Web

removeSubscription(subscription)

NameTypeDescription
subscriptionEventSubscription

A subscription to remove.


Removes the given subscription.

Returns:

void

Android
iOS
Web

requestPermissionsAsync()

Asks the user to grant permissions for accessing sensor.

Android
iOS
Web

setUpdateInterval(intervalMs)

NameTypeDescription
intervalMsnumber

Desired interval in milliseconds between sensor updates.

Starting from Android 12 (API level 31), the system has a 200ms limit for each sensor updates.

If you need an update interval less than 200ms, you should:

  • add android.permission.HIGH_SAMPLING_RATE_SENSORS to app.json permissions field
  • or if you are using bare workflow, add <uses-permission android:name="android.permission.HIGH_SAMPLING_RATE_SENSORS"/> to AndroidManifest.xml.

Set the sensor update interval.

Returns:

void

Interfaces

Android
iOS
Web

PermissionResponse

An object obtained by permissions get and request functions.

PermissionResponse Properties

NameTypeDescription
canAskAgainboolean

Indicates if user can be asked again for specific permission. If not, one should be directed to the Settings app in order to enable/disable the permission.

expiresPermissionExpiration

Determines time when the permission expires.

grantedboolean

A convenience boolean that indicates if the permission is granted.

statusPermissionStatus

Determines the status of the permission.


Types

Android
iOS
Web

GyroscopeMeasurement

Each of these keys represents the rotation along that particular axis measured in degrees per second (°/s).

NameTypeDescription
timestampnumber

Timestamp of the measurement in seconds.

xnumber

Value of rotation in degrees per second device reported in X axis.

ynumber

Value of rotation in degrees per second device reported in Y axis.

znumber

Value of rotation in degrees per second device reported in Z axis.

Android
iOS
Web

PermissionExpiration

Literal Type: multiple types

Permission expiration time. Currently, all permissions are granted permanently.

Acceptable values are: 'never' | number

Android
iOS
Web

Subscription

A subscription object that allows to conveniently remove an event listener from the emitter.

NameTypeDescription
remove() => void

Removes an event listener for which the subscription has been created. After calling this function, the listener will no longer receive any events from the emitter.

Enums

Android
iOS
Web

PermissionStatus

PermissionStatus Values

DENIED

PermissionStatus.DENIED = "denied"

User has denied the permission.

GRANTED

PermissionStatus.GRANTED = "granted"

User has granted the permission.

UNDETERMINED

PermissionStatus.UNDETERMINED = "undetermined"

User hasn't granted or denied the permission yet.

Expo 中文网 - 粤ICP备13048890号