首页 > 解决方案 > 尝试从导出的​​函数返回 RxJS 可观察流

问题描述

我有一个 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”,在这里可能会有所帮助,但我不完全确定如何在这种情况下实现它。

标签: javascriptreact-nativerxjsobservablereact-native-sensors

解决方案


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

 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");
        };
    });
 }
}

推荐阅读