0

我有一个 React-Native 应用程序，它使用库react-native-sensors来访问移动设备的加速度计数据（x、y 和 z 轴）。react-native-sensors 库使用了 RxJS 的 observables，这是我不熟悉的。

在应用程序的早期版本中，应用程序组件会将自己的状态设置为设备的实时加速度计数据。这发生在组件的构造函数中，其中加速度计 observable 使用 subscribe 运算符调用“setState”。这种方法达到了预期的效果，即 App 组件的状态会随着设备的移动而定期更新。

在这个阶段，App 组件看起来像这样：

import React, { Component } from "react"; 
import { setUpdateIntervalForType, SensorTypes, accelerometer } from "react-native-sensors";

export default class App extends Component {   
  constructor(props) {
    super(props);

    setUpdateIntervalForType(SensorTypes.accelerometer, 150);

    accelerometer.subscribe(({ x, y, z }) => {
      this.setState({ x, y, z }),
        error => {
          console.log("The sensor is not available");
        };
    });

    this.state = { x: 0, y: 0, z: 0 };   
  }

  render() {
  ...
  ...
  ...
  }
}

为了改进封装并执行更好的测试，我决定将可观察的加速度计提取到一个单独的文件中，并将其导出回 App 组件。我的意图是将 observable 导出为一个函数，该函数将返回一个值流，即从加速度计发出的值。这就是我卡住的地方。我第一次尝试导出可观察数据如下所示：

加速度计.js

import {
  setUpdateIntervalForType,
  SensorTypes,
  accelerometer
} from "react-native-sensors";

export default function AccelerometerData() {
   var data;

   setUpdateIntervalForType(SensorTypes.accelerometer, 150);

   accelerometer.subscribe(({ x, y, z }) => {
      data = { x, y, z }
   });

  return data;
 }

我很欣赏这种方法不尊重 RxJS 可观察对象的异步性质。我也知道还有其他运算符，例如“map”，在这里可能会有所帮助，但我不完全确定如何在这种情况下实现它。

4

2 回答 2

0

谢谢范翔。我最终选择了这条路线：

 export async function accelerometerData() {
      setUpdateIntervalForType(SensorTypes.accelerometer, 150);

      return accelerometer;
    }

用法：

async getAccelerometerData() {
    const accelerometer = await accelerometerData();

    accelerometer.subscribe(({ x, y, z }) => {
      this.setState({ x, y, z }),
        error => {
          console.log("The sensor is not available");
        };
    });
 }
}
于 2019-02-28T18:45:58.187 回答
0

你可以把它作为一个 observable 返回，并用一个包装在 Obervable 中的 setState 将它链接起来

export default function AccelerometerData() {
   var data;

   setUpdateIntervalForType(SensorTypes.accelerometer, 150);

   return accelerometer
 }

用法

setState(obj)=>
new Observable(obs=>this.setState(obj,()=>obs.next(this.state))
AccelerometerData().pipe(tap(obj=>setState(obj)).subscribe()
于 2019-02-28T02:01:41.483 回答