React(javascript)でCanvasで長方形を書く

久しぶりにReact.jsで書くのでやり方をわすれつつあるので復習しながらやっていきます。create-react-appで行います。

import React, { useState, useEffect } from "react";

import { ReactDOM } from "react-dom";

import "./App.css";

function App() {

  const [context, setContext] = useState(null);

  useEffect(() => {

    const canvas = document.getElementById("canvas");

    const canvasContext = canvas.getContext("2d");

    setContext(canvasContext);

    if (context != null) {

      canvasContext.strokeRect(0, 0, 100, 100);

    } else {

      console.log("contextは存在しません");

    }

  }, []);

  return (

    <div>

      <canvas width="1280" height="720" id="canvas" />

    </div>

  );

}

export default App;

ReactでCanvasを使う #JavaScript - Qiita

JavaScriptで図形を描画したい！canvasの基本とライブラリの活用方法 | 侍エンジニアブログ (sejuku.net)

これと同じようなことを、普通にReact Nativeでしようとするとできない。

なぜなら、React Nativeには、getElementByIdメソッドがないからである。

しかし⓵expo-2d-contextライブラリを使用したり(

GitHub - expo/expo-2d-context: A pure-js implementation of the W3C's Canvas-2D Context API that can be run on either Expo Graphics or WebGL)

②WebViewを作成してcanvasを配置する（[Expo/ReactNative]WebViewでCanvasを使ってみる #reactnative - Qiita）

ことで可能になるようである。

⓵はそのページにもあるようにパフォーマンスに難あり。

②は、HTML文字列をブラウザで表示させるのだが、コーディングの際に、ESLintなどの修正機能が働かない（つまりスペルミスなどに気づきにくい）という難あり。

やはり、React Nativeでは、react-native-reanimatedを使用すべきなのだろう。