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 SDK は Android Studio の 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

SDK の実際の場所は、Android Studio の設定のAppearance & Behavior → System Settings → Android 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 上でプロジェクトを実行するには、以下の依存関係をインストールする必要があります：

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 を提供します。また、View の代わりに使用できる SafeAreaView コンポーネントも提供し、安全エリアを自動的に考慮してビューを挿入します。
アニメーションライブラリ react-native-reanimated
- Expo プロジェクト内で、React Native のアニメーション API を使用できます。ただし、より高性能で高度なアニメーションを使用したい場合は、react-native-reanimatedライブラリを使用できます。これにより、スムーズで強力かつメンテナンス可能なアニメーションを簡単に作成できます。
データの保存 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 プッシュサービスからのプッシュ通知