博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Expo大作战(二十四)--expo sdk api之Accelerometer
阅读量:6002 次
发布时间:2019-06-20

本文共 3071 字,大约阅读时间需要 10 分钟。

 

简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网

我猜去全部机翻+个人修改补充+demo测试的形式,对expo进行一次大补血!欢迎加入expo兴趣学习交流群:597732981

【之前我写过一些列关于expo和rn入门配置的东i西,大家可以点击这里查看:】

相关文章:

写在二十三章以后的话,之前的翻译,不管shen'ru好与不好,终究是告一段落,也把expo基础理论的东西又深入的理解了一遍,后续expo大作战系列将主要介绍expo sdk的api。


SDK API参考

Expo SDK提供对系统功能的访问,如联系人,相机和社交登录。 它由npm package 提供。 通过在项目的根目录中运行npm install --save expo来安装它。 然后你可以在你的JavaScript代码中从它导入模块,如下所示:

import { Contacts } from 'expo';

您还可以导入所有Expo SDK模块:

import Expo from 'expo';

例如,这允许您编写Expo.Contacts.getContactsAsync()。

SDK版本

每个月都会有一个新的Expo SDK版本,通常更新为最新版本的React Native,并包含各种对expo API的错误修正,功能和改进。 了解您的Expo项目正在运行的React Native版本通常很有用,因此下表将expoSDK版本映射到其包含的React Native版本。

 

加速度计(Accelerometer)

访问设备加速计传感器以响应三维空间中加速度的变化。

Expo.Accelerometer.addListener(listener)

订阅加速计的更新。

参数
  • 侦听器(函数)(listener (function)) - 加速度计更新可用时调用的回调函数。 当被调用时,监听器被提供一个包含键x,y,z的对象的单个参数。
返回
  • 一个EventSubscription对象,当您想要取消订阅侦听器时,您可以调用remove()。

Expo.Accelerometer.removeAllListeners()

删除所有听众(监听器)。

Expo.Accelerometer.setUpdateInterval(intervalMs)

订阅加速计的更新。

参数
  • intervalMs(数字)加速度计更新之间的期望间隔(以毫秒为单位)。

例如:基本订阅(可以运行这段代码看看效果)

import React from 'react';import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';import { Accelerometer } from 'expo';export default class AccelerometerSensor extends React.Component {  state = {    accelerometerData: {},  }  componentDidMount() {    this._toggle();  }  componentWillUnmount() {    this._unsubscribe();  }  _toggle = () => {    if (this._subscription) {      this._unsubscribe();    } else {      this._subscribe();    }  }  _slow = () => {    Accelerometer.setUpdateInterval(1000);   }  _fast = () => {    Accelerometer.setUpdateInterval(16);  }  _subscribe = () => {    this._subscription = Accelerometer.addListener(accelerometerData => {      this.setState({ accelerometerData });    });  }  _unsubscribe = () => {    this._subscription && this._subscription.remove();    this._subscription = null;  }  render() {    let { x, y, z } = this.state.accelerometerData;    return (      
Accelerometer:
x: {round(x)} y: {round(y)} z: {round(z)}
Toggle
Slow
Fast
); }}function round(n) { if (!n) { return 0; } return Math.floor(n * 100) / 100;}const styles = StyleSheet.create({ container: { flex: 1 }, 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', }, sensor: { marginTop: 15, paddingHorizontal: 10, },});

 


下一张继续介绍,这一篇主要介绍了:expo sdk api之Accelerometer欢迎大家关注我的微信公众号,这篇文章是否被大家认可,我的衡量标准就是公众号粉丝增长人数。欢迎大家转载,但必须保留本人博客链接!

 

你可能感兴趣的文章
基于Spring Security Role过滤Jackson JSON输出内容
查看>>
从设计者的角度看 React
查看>>
js常见问题
查看>>
CentOS6系统编译部署LAMP(Linux, Apache, MySQL, PHP)环境
查看>>
71. Simplify Path
查看>>
海量大数据大屏分析展示一步到位:DataWorks数据服务对接DataV最佳实践
查看>>
PAT A1043
查看>>
JavaScript之手写Promise
查看>>
PHP_SELF变量解析和重复路径解决
查看>>
git 命令行使用(基础篇)
查看>>
在VUE中利用MQTT协议实现即时通讯
查看>>
Vue笔记(五)——Token&生命周期
查看>>
《前端十年心路-我把一切告诉你》的书稿大纲&问题收集
查看>>
CSS居中总结大全
查看>>
Elasticsearch 参考指南(安装X-Pack)
查看>>
[LintCode] 604. Design Compressed String Iterator
查看>>
微信小程序黑客马拉松即将开始,来做最酷的 Mini Program Creators!
查看>>
从人肉到智能,阿里运维体系经历了哪些变迁?
查看>>
JavaScript基础---函数
查看>>
前端每日实战:120# 视频演示如何用纯 CSS 创作锡纸撕开的文字效果
查看>>