RN 学習小記之使用 Expo 作成プロジェクト

ビジネスの必要性から、今後の要求に備えて RN を学び始めました。以前に RN を使用したことがありますが、プロジェクトの構築などはすでにパッケージ化されたスキャフォールドを使っていたため、実際にはあまり理解していませんでした。そこで、個人的に RN プロジェクトをゼロから構築するプロセスを記録することにしました。ついでに資料収集も行います。

対象：フロントエンドの基礎があり、基本的なフロントエンド開発環境を持ち、Expo を使った RN プロジェクトの構築プロセスを理解したい人々

RN 関連資料#

公式サイト：Site Unreachable
- Introduction · React Native
- Core Components and APIs · React Native
中国語サイト：简介・React Native 中文网
Expo 公式サイト：Expo
Github リソース
- GitHub - jondot/awesome-react-native Awesome React Native は、最高の React Native ライブラリ、ツール、チュートリアル、記事などをまとめた素晴らしいスタイルリストです。
- GitHub - infinitered/ignite Ignite は、Expo と裸の React Native で最も人気のある React Native アプリケーションのテンプレートであり、6 年以上にわたる React Native 開発の結晶です。
ブログ記事
- 📝 没 2 年 React Native 开发经验，你都遇不到这些坑 - 掘金

開発環境#

Windows での Android 開発環境の構築#

Android では、Android Studio と Android SDK をインストールすることに注意が必要です。Android Studio はデフォルトで最新バージョンの Android SDK をインストールします。現在、React Native アプリをコンパイルするにはAndroid 13 (Tiramisu)バージョンの SDK が必要です（注意：SDK バージョンは端末のシステムバージョンとは異なります。RN は現在、Android 5 以上のデバイスをサポートしています）。Android Studio の SDK マネージャーで各バージョンの SDK を選択してインストールできます。

1. Android Studio のインストール#

Download and install Android Studio Android Studio をダウンロードしてインストールします。Android Studio のインストールウィザードで、以下のすべての項目の横にあるボックスを選択してください：

Android SDK
Android SDK Platform
Android Virtual Device
Hyper-V を使用していない場合： Performance (Intel ® HAXM) （AMD または Hyper-V については、こちらを参照）

2. Android SDK のインストール#

Android Studio はデフォルトで最新の Android SDK をインストールします。ネイティブコードで React Native アプリケーションを構築するには特にAndroid 13 (Tiramisu) SDK が必要です。Android Studio の SDK マネージャーを使用して他の Android SDK をインストールできます。

Android Studio を開き、「More Actions」ボタンをクリックして「SDK Manager」を選択します。
SDK マネージャーから「SDK Platforms」タブを選択し、右下の「Show Package Details」の横にあるボックスをチェックします。Android 13 (Tiramisu)エントリを探して展開し、以下の項目が選択されていることを確認します：

Android SDK Platform 33
Intel x86 Atom_64 System Image または Google APIs Intel x86 Atom System Image

Pasted image 20230620141725.png
3. 次に、「SDK Tools」タブを選択し、「Show Package Details」の横にあるチェックボックスを選択します。Android SDK Build-Toolsエントリを探して展開し、33.0.0が選択されていることを確認します（ps: 現在は34.0.0です）

ANDROID_HOME環境変数の設定
高度なシステム設定 - 環境変数 - 新しいANDROID_HOMEユーザー変数を作成し、Android SDK のパスを指すようにします：

Pasted image 20230620141904.png

デフォルトでは、SDK は以下の場所にインストールされます：

%LOCALAPPDATA%\Android\Sdk

例: C:\Users\xxxx\AppData\Local\Android\Sdk

Android Studio の設定のAppearance & Behavior → System Settings → Android SDKの下で SDK の実際の場所を見つけることができます。

Pasted image 20230620141558.png

環境変数が追加されたことを確認します：

PowerShell を開く
Get-ChildItem -Path Env:\を PowerShell にコピーして貼り付ける
ANDROID_HOMEが追加されていることを確認します

Pasted image 20230620142037.png

Expo の使用#

なぜ Expo を使うのか？#

Expo は、JavaScript を使ってネイティブの iOS および Android アプリケーションを構築するためのツール、ライブラリ、サービスのセットです。言い換えれば、React Native の上にもう一つのレイヤーを追加して、開発をより便利で迅速にします。

モバイル端末の経験がある方は、クロスプラットフォームを行う前に、さまざまなネイティブ機能（カメラ、アルバム、位置情報、Bluetooth など）について心配するでしょうが、Expo を使用すれば、裸の React Native を開発するよりもはるかに早く、たくさんの落とし穴を避けることができます。

モバイル端末の経験がないフロントエンド開発者には、特に必要です。そうでないと、モバイル端末の隠れた制限や落とし穴があなたを悩ませることになります。
——React Native 基于 Expo 开发（一）项目搭建 - 掘金

次に、公式のチュートリアルに従って、Expo のアプリケーションを構築します：Create your first app - Expo Documentation

Expo プロジェクトの初期化#

create-expo-appを使用して新しい Expo アプリケーションを初期化します。これは、expoパッケージがインストールされた新しい React Native プロジェクトを作成するためのコマンドラインツールです。

npx create-expo-app StickerSmash
cd StickerSmash

公式ドキュメントからデモプロジェクトに必要な画像などの静的リソースをダウンロードし、プロジェクト内の assets を置き換えます：Download assets

さて、私たちのお気に入りのコードエディタまたは IDE でプロジェクトディレクトリを開きましょう。このチュートリアルでは、VS Code を例として使用します。

プロジェクトの起動#

Install dependencies 依存関係をインストール

Web 上でプロジェクトを実行するには、プロジェクトを Web 上で実行するのに役立つ以下の依存関係をインストールする必要があります：

npx expo install react-dom react-native-web @expo/webpack-config

起動

npx expo start

QR コードをスキャン	起動成功

Expo 推奨ライブラリ#

以下は、Expo が公式に推奨するライブラリのいくつかです：

セーフエリアライブラリ react-native-safe-area-context
- react-native-safe-area-contextは、Android および iOS のデバイスの安全領域の挿入情報にアクセスするための柔軟な API を提供します。また、SafeAreaView コンポーネントを提供し、View の代わりに使用して安全領域を自動的に考慮したビューを挿入できます。
アニメーションライブラリ react-native-reanimated
- Expo プロジェクトでは、React Native のアニメーション API を使用できます。ただし、より高性能で高度なアニメーションを使用したい場合は、react-native-reanimatedライブラリを使用できます。これは、スムーズで強力かつメンテナンス可能なアニメーションを作成するプロセスを簡素化する API を提供します。
データの保存 Store data - Expo Documentation
- expo-secure-storeは、デバイス上で暗号化された安全なキーと値のペアを保存する方法を提供します。

他にもいくつかの推奨ライブラリがありますので、こちらをご覧ください。

React Native と Expo SDK の使い方 - 掘金

AppAuth、AuthSession：OAuth を通じてユーザーを認証
SplashScreen：アプリケーション起動時にスプラッシュスクリーンを作成（公式ドキュメント）
localization アプリケーションの l10n/i18n を管理し、ローカライズを実現
AppLoading：アセット、フォントなどを読み込む。
MapView：アプリケーション内で地図を使用
ImagePicker または ImageManipulator ：デバイスから画像または動画を開く
Sharing：アプリケーションとデバイス間でデータを共有
SecureStore: デバイスストレージにデータを保存
Camera: デバイスのカメラを使用して写真や動画を撮影
Notifications：Expo プッシュサービスからのプッシュ通知