使用React的窗口DeviceMotion事件

Question

当我移动浏览器时，我无法在React应用程序中触发DeviceMotion函数。我使用window对象devicemotion事件来实现这个功能。

摘录自我的代码

export default function App() {
  const [x, setX] = useState("");
  const [y, setY] = useState("");
  const [z, setZ] = useState("");

  function handleMotionEvent(event) {
    console.log("handle motion event", event);

    var x = event.accelerationIncludingGravity.x;
    var y = event.accelerationIncludingGravity.y;
    var z = event.accelerationIncludingGravity.z;

    setX(x);
    setY(y);
    setZ(z);
  }

  useEffect(() => {
    window.addEventListener("devicemotion", handleMotionEvent, true);
  }, [x, y, z]);

  return (
    <div className="App">
      <h1>Device Motion</h1>
      <div>
        X - {x} Y - {y} Z - {z}
      </div>
    </div>
  );
}

我使用CodeSandbox创建了一个工作示例。有人能帮忙吗？

Answer 1

问题是，您没有使用SSL证书，您必须设置您的react应用程序来使用SSL证书，这些说明可以在这个链接https://www.makeuseof.com/create-react-app-ssl-https/中找到，一旦您使用SSL证书运行，您的移动浏览器将读取de加速度计数据，我希望这会有所帮助。