こんにちは。

スマホアプリを作成するフレームワークReact Nativeの公式ドキュメントを読んでいくシリーズ第2回は、環境設定です。

本記事の位置づけ

基本的に、公式ドキュメントの解説を上から順番に見て、ざっとまとめた記事です。
また、本ページは、下記公式ドキュメントの一番最初「The Basics」の部分をまとめた記事となります。

https://reactnative.dev/docs/getting-started
- Part1. The Basics
- Part2. Environment setup ←今ココ★
- Part3. Workflow
- Part4. Design
- Part5. Interaction
- Part6. Inclusion
- Part7. Performance
- Part8. JavaScript Runtime
- Part9. Connectivity
- Part10. Native Components and Modules
- Part11. Guides (Android)
- Part12. Guides (iOS)

なお、本ページに記載のソースコードはすべて上記サイトから引用したものとなります。

開発環境のセットアップ

• モバイル開発経験がない方は、ExpoCLIを使うのが便利
• ブラウザでぱっと動作を確認したい場合は、Snackを使うのが便利
• モバイル開発の経験がある方は、React Native CLIを使うのが便利(ここでは解説しない)

Expo CLIのセットアップ

1.Node.js(バージョン12 LTS以降)をインストール
2.npmでExpo CLIをインストール

npm install -g expo-cli

3.以下コマンドで"AwesomeProject"という名前のプロジェクトを作る

expo init AwesomeProject
cd AwesomeProject
npm start

npm startの代わりにexpo startでもよい

Expo CLI上でのアプリ実行

1.Expoアプリをスマホにインストールする(iOS、Android両方あり)
2.PCとスマホを同じWifiネットワーク上に接続する
3.Android:Expoアプリ上でPCのターミナル上のQRコードを読む
iOS:カメラアプリのQRコードリーダーでPCのターミナル上のQRコードを読む
4.アプリがスマホで実行される
5.メインファイルであるApp.jsの修正からしていきましょう！コードを修正すると自動的にスマホに反映されます。

困ったときのリンク

• Expo docs
• Expo CLIの制限事項

Expo CLI利用時の注意事項

• Expo CLIはネイティブコードを実行しているわけではないため、各プラットフォームのネイティブコードは実行できない
• 各デバイスのシミュレータや実機で動かしたい場合もExpo CLIは使えない
• 上記のような場合は、React Native CLI Quickstartを読んでネイティブ環境をセットアップするなり、ネイティブコードを"eject"するなどの必要がある。
• Expo CLIは最新のReact Nativeをフォローするため、どのバージョンをサポートしているかはバージョン依存のページを見てね。

既存アプリとの統合

すみませんが、この章は割愛します。
原文を読んでください。

TVデバイスとの統合

すみませんが、この章は割愛します。
原文を読んでください。

Android、iOS、Web以外のプラットフォーム

下記のプラットフォームに対応しているので、気になるものはぐぐってみてください。
実験的に対応しているだけのものもあるため、よく読んでから使うようにするとよいです。

• React Native Windows
• React Native DOM
• React Native Turbolinks
• React Native Desktop
• React Native macOS
• React Native tvOS
• alita
• Proton Native

また、好きなプラットフォームに独自に対応させることもできるようなので、こちらもドキュメントを参照してください。

Creating your own React Native platform

参考データ

うーん、「6/1(月)」って表示できないかな。

現在のコード

xaxis: {
  type: "datetime",
  axisBorder: {
    show: true,
    color: theme.palette.divider
  },
  axisTicks: {
    show: true,
    color: theme.palette.divider
  },
  categories: categories,
  labels: {
    format: 'MM/dd(ddd)',
    style: {
      colors: theme.palette.text.secondary
    }
  }
},

公式を見てみる。

公式情報

Datetime ApexCharts.js

んー、曜日の日本語表記はなさそう。

　とりあえずこれで対処

const weekday = ["日", "月", "火", "水", "木", "金", "土"];
/*
…
*/
labels: {
  formatter: function (value, timestamp) {
    var date = new Date(timestamp);
    return date.getMonth() + 1 + '/' + date.getDate() + '(' + weekday[date.getDay()] + ')';
  }
}

結果

これで良しとする。

追伸

なにか他に良いコードがあればご教示いただけましたら幸いです。

React+TypeScriptでCanvasを用いて矩形描画をする関数コンポーネントです。

import React, { useEffect, useRef, memo, FC } from 'react';

type Props = {
  canvasWidth: number; //canvas幅
  canvasHeight: number; //canvas高さ
  x: number; //矩形始点x
  y: number; //矩形始点y
  rectWidth: number; //矩形幅
  rectHeight: number; //矩形高さ
};

const Canvas: FC<Props> = ({
  canvasWidth,
  canvasHeight,
  x,
  y,
  rectWidth,
  rectHeight
}) => {
  const canvasRef = useRef(null);

  const getContext = (): CanvasRenderingContext2D => {
    const canvas: any = canvasRef.current;
    return canvas.getContext('2d');
  };

  useEffect(() => {
    const ctx = getContext();
    ctx.strokeStyle = '#000000'; // 矩形色
    ctx.lineWidth = 2; // 矩形線幅
    ctx.strokeRect(x, y, rectWidth, rectHeight); // 矩形描画
  }, [canvasWidth, canvasHeight, x, y, rectWidth, rectHeight]);

  return <canvas ref={canvasRef} width={canvasWidth} height={canvasHeight} />;
};

export default memo(Canvas);

最近Reactを始めてuseStateってなんぞやということで調べてみるとこの記事が参考になった
https://ja.reactjs.org/docs/hooks-state.html

下記コードを例にざっくりまとめるとcountに初期値0を代入して、値を更新する場合はsetCount関数を使うってことみたいです。

react.js

import React, {setState} from "react"

const [count, setCount] = useState(0)