查看: 2014|回复: 0

[手机开发] Expo大作战(二十四)--expo sdk api之Accelerometer

发表于 2018-3-21 08:00:01

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

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

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

相关文章:

Expo大作战(一)--什么是expo,如何安装expo clinet和xde,xde如何使用

Expo大作战(二)--expo的生命周期,expo社区交流方式,expo学习必备资源,开发使用expo时关注的一些问题

Expo大作战(三)--针对已经开发过react native项目开发人员有针对性的介绍了expo,expo的局限性,开发时项目选型注意点等

Expo大作战(四)--快速用expo构建一个app,expo中的关键术语

Expo大作战(五)--expo中app.json 文件的配置信息

Expo大作战(六)--expo开发模式,expo中exp命令行工具,expo中如何查看日志log,expo中的调试方式

Expo大作战(七)--expo如何使用Genymotion模拟器

Expo大作战(八)--expo中的publish以及expo中的link,对link这块东西没有详细看,大家可以来和我交流

更多>>

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


SDK API参考

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

  1. import { Contacts } from 'expo';
复制代码

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

  1. 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(数字)加速度计更新之间的期望间隔(以毫秒为单位)。
例如:基本订阅(可以运行这段代码看看效果)
  1. import React from 'react';
  2. import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
  3. import { Accelerometer } from 'expo';
  4. export default class AccelerometerSensor extends React.Component {
  5. state = {
  6. accelerometerData: {},
  7. }
  8. componentDidMount() {
  9. this._toggle();
  10. }
  11. componentWillUnmount() {
  12. this._unsubscribe();
  13. }
  14. _toggle = () => {
  15. if (this._subscription) {
  16. this._unsubscribe();
  17. } else {
  18. this._subscribe();
  19. }
  20. }
  21. _slow = () => {
  22. Accelerometer.setUpdateInterval(1000);
  23. }
  24. _fast = () => {
  25. Accelerometer.setUpdateInterval(16);
  26. }
  27. _subscribe = () => {
  28. this._subscription = Accelerometer.addListener(accelerometerData => {
  29. this.setState({ accelerometerData });
  30. });
  31. }
  32. _unsubscribe = () => {
  33. this._subscription && this._subscription.remove();
  34. this._subscription = null;
  35. }
  36. render() {
  37. let { x, y, z } = this.state.accelerometerData;
  38. return (
  39. <View style={styles.sensor}>
  40. <Text>Accelerometer:</Text>
  41. <Text>x: {round(x)} y: {round(y)} z: {round(z)}</Text>
  42. <View style={styles.buttonContainer}>
  43. <TouchableOpacity onPress={this._toggle} style={styles.button}>
  44. <Text>Toggle</Text>
  45. </TouchableOpacity>
  46. <TouchableOpacity onPress={this._slow} style={[styles.button, styles.middleButton]}>
  47. <Text>Slow</Text>
  48. </TouchableOpacity>
  49. <TouchableOpacity onPress={this._fast} style={styles.button}>
  50. <Text>Fast</Text>
  51. </TouchableOpacity>
  52. </View>
  53. </View>
  54. );
  55. }
  56. }
  57. function round(n) {
  58. if (!n) {
  59. return 0;
  60. }
  61. return Math.floor(n * 100) / 100;
  62. }
  63. const styles = StyleSheet.create({
  64. container: {
  65. flex: 1
  66. },
  67. buttonContainer: {
  68. flexDirection: 'row',
  69. alignItems: 'stretch',
  70. marginTop: 15,
  71. },
  72. button: {
  73. flex: 1,
  74. justifyContent: 'center',
  75. alignItems: 'center',
  76. backgroundColor: '#eee',
  77. padding: 10,
  78. },
  79. middleButton: {
  80. borderLeftWidth: 1,
  81. borderRightWidth: 1,
  82. borderColor: '#ccc',
  83. },
  84. sensor: {
  85. marginTop: 15,
  86. paddingHorizontal: 10,
  87. },
  88. });
复制代码


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



回复

使用道具 举报