React-native 和 Expo：Android 的抖动传感器组件

Question

我是 React Native 和 Expo 的新手，我想尝试使用 Accelerometer 组件来构建一个神奇的 8 球游戏，用户在摇晃他们的 android 时可以获得问题的答案。

我在一个名为 MagicAnswer.js 的组件中有 fetch，现在想将该组件连接到 ShakeSensor.js 我想我需要在组件中进行一些重组，但希望我可以调用 ShakeSensor在 StartPage 中显示神奇的答案，但我目前的问题是答案不会留在屏幕上。

我更新到这个（见下面的代码）：isShaking(data) &&

// ShakeSensor.js component: 
import React, { useState, useEffect } from 'react';
import { Accelerometer } from 'expo-sensors';
import styled from 'styled-components/native';

import { MagicAnswer } from './MagicAnswer'

// ==========================
// = Functions
const isShaking = (data) => {
  const totalForce = Math.abs(data.x) + Math.abs(data.y) + Math.abs(data.z);
  return totalForce > 1.78;
};

// ==========================
// = Styled components
const ShakeView = styled.View`
  display: flex;
  flex-direction: column;
`;

const ShakeAlert = styled.Text`
  font-size: 36px;
  font-weight: bold;
  color: #aa0000;
`;
const ShakeDataView = styled.View``;
const ShakeDataTitle = styled.Text`
  font-weight: bold;
`;
const ShakeData = styled.Text``;

export const ShakeSensor = () => {
  Accelerometer.setUpdateInterval(400);

  const [data, setData] = useState({
    x: 0,
    y: 0,
    z: 0,
  });

  const [subscription, setSubscription] = useState(null);

  const _subscribe = () => {
    setSubscription(
      Accelerometer.addListener((accelerometerData) => {
        setData(accelerometerData);
      })
    );
  };

  const _unsubscribe = () => {
    subscription && subscription.remove();
    setSubscription(null);
  };

  useEffect(() => {
    _subscribe();

    return () => _unsubscribe();
  }, []);

  return (
    <ShakeView>
      {isShaking(data) && <MagicAnswer></MagicAnswer>}
      <ShakeDataView>
        <ShakeDataTitle>Shake Data</ShakeDataTitle>

        <ShakeData>X: {data.x.toFixed(2)}</ShakeData>
        <ShakeData>Y: {data.y.toFixed(2)}</ShakeData>
        <ShakeData>Z: {data.z.toFixed(2)}</ShakeData>
      </ShakeDataView>
    </ShakeView>
  )
}

Answer 1

如果我理解得很好，你想在手机摇晃之后显示你的MagicAnswer。在您当前的设置中，它仅在 isShaking fn 返回 true 时显示。

这意味着一旦手机没有被晃动，你就不会再显示组件了。

另一种方法是在 data 中的字段不为 0 时显示您的 MagicAnswer，然后在您再次开始摇晃手机时重置它们。

类似

  {data.x != 0 && data.y != 0 && <MagicAnswer></MagicAnswer>}

然后当手机静止时，你的值就会被重置。

如果没有，您可以保留这些值，直到您进行下一次摇动 -> 所以在您的侦听器中，您可以使用 fn 并比较总力，而不是立即将值设置为状态。如果总力发生变化 - 将其设置为数据并显示您的新 MagicAnswer。