正在尝试从导出的函数返回RxJS可观察流

Question

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

在该应用程序的早期版本中，应用程序组件会将自己的状态设置为设备的实时加速度计数据。这发生在组件的构造函数中，其中加速计可观察值使用订阅运算符调用'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组件。我的意图是将观察值作为一个函数导出，该函数将返回一个值流，即从加速度计发出的值。这就是我被卡住的地方。我第一次尝试导出可观察到的数据时如下所示：

Accelerometer.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‘，在这里可能会有帮助，但我不完全确定如何在这种情况下实现它。

Answer 1

您只需将其作为可观察对象返回，并使用包装在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()

Answer 2

谢谢范翔。我最终走了这条路：

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