React native和Expo:适用于Android的抖动传感器组件

Question

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

我有一个我称之为MagicAnswer.js的组件，现在我想把它连接到ShakeSensor.js。我想我需要在组件中进行一些重组，但我希望我可以在StartPage中调用ShakeSensor，在抖动时显示Magic Answer，但我目前的问题是答案不会停留在屏幕上。

我更新到这个(见下面的代码(：isShaking(数据(&amp；

// 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。在当前设置中，只有当isShakingfn返回true时才会显示。

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

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

所以类似的东西

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

然后，当手机静止时，您的值会重置。

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