Question

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

在较早版本的应用程序中，App组件会将其自身的状态设置为设备的实时加速度计数据。这发生在组件的构造函数中，其中可观察到的加速度计使用了订阅运算符来调用“ 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可观察对象的异步特性。我还知道还有其他运算符，例如“地图”可能在这里有帮助，但是我不确定如何在这种情况下实现它。

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

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

function()

用法：

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

      return accelerometer;
    }

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

2 个答案:

尝试从导出的​​函数中返回RxJS可观察的流

2 个答案:

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