開発環境 (Expo Bare Workflow)
※ 全体参照：https://reactnative.dev/docs/environment-setup
下記のような開発環境で行います！(w/ VSCode)
try🐶everything myproject$ npx expo-env-info
expo-env-info 1.0.5 environment info:
System:
OS: macOS 13.5.2
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.7.0 - ~/.anyenv/envs/nodenv/versions/20.7.0/bin/node
Yarn: 1.22.19 - ~/.anyenv/envs/nodenv/versions/20.7.0/bin/yarn
npm: 10.1.0 - ~/.anyenv/envs/nodenv/versions/20.7.0/bin/npm
Watchman: 2023.09.04.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.12.1 - /Users/xxxxx/.anyenv/envs/rbenv/shims/pod
SDKs:
iOS SDK:
Platforms: DriverKit 23.0, iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0
Android SDK:
API Levels: 29, 30, 31, 32, 33
Build Tools: 29.0.2, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 33.0.0
System Images: android-29 | Google APIs ARM 64 v8a, android-29 | Google APIs Intel x86 Atom, android-30 | Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom, android-31 | Google APIs ARM 64 v8a, android-32 | Google APIs ARM 64 v8a, android-33 | Google APIs ARM 64 v8a
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.10671973
Xcode: 15.0/15A240d - /usr/bin/xcodebuild
npmPackages:
expo: ~49.0.11 => 49.0.11
react: 18.2.0 => 18.2.0
react-native: 0.72.4 => 0.72.4
Expo Workflow: bare
try🐶everything myproject$
それでは、Expo bare 環境を作成 > TypeScript 環境に変更 順に進めて行きます。
新しいプロジェクトを作成する
※ 全体参照：https://docs.expo.dev/routing/installation/
try🐶everything ReactNative$ npx create-expo-app --template
Need to install the following packages:
create-expo-app@2.1.1
Ok to proceed? (y) y
? Choose a template: › - Use arrow-keys. Return to submit.
Blank
Blank (TypeScript)
Navigation (TypeScript)
❯ Blank (Bare) - blank app with the native code exposed (expo prebuild) // <- Blank (Bare) を選択する
✔ Choose a template: › Blank (Bare)
✔ What is your app named? … casablanca // <-- 適宜入力する(casablanca)
✔ Downloaded and extracted project files.
> npm install
...
Installing CocoaPods // <-- ☕️ 初めての設置であれば時間がかかル！
...
- cd casablanca
- npm run android
- npm run ios- npm run web
...
try🐶everything casablanca$ yarn ios // <-- OR, yarn android
try🐶everything casablanca2$ yarn start
プロジェクトを TypeScript 環境に変更する
※ 全体参照：https://github.com/expo/examples/tree/master/with-typescript#adding-typescript-to-existing-projects
try🐶everything ReactNative$ cd casablanca try🐶everything casablanca$ touch tsconfig.json try🐶everything casablanca$ yarn start // <--実行すると必要なdependenciesをチェックしてくれます yarn run v1.22.19 $ expo start --dev-client Starting project at /Users/jacepark/ReactNative/casablanca Starting Metro Bundler ✔ It looks like you're trying to use TypeScript but don't have the required dependencies installed. Would you like to install typescript@^5.1.3, @types/react@~18.2.14? … yes // <-- yes? dependenciesへ設置、 no? devDependenciesへ手動設置可能！ › Installing 2 SDK 49.0.0 compatible native modules using npm > npm install ... try🐶everything casablanca$ yarn add -D typescript @types/react // <-- devDependenciesに設置する
タイプチェックを設定する
※ 全体参照：https://docs.expo.dev/guides/typescript/
package.json の script 部分に下記のように追加するとプロジェクト全体のファイルのタイプチェックができるので設定しておけば便利です。
{
"scripts": {
"ts:check": "tsc"
...
}
}
yarn tscコマンドを実行すると、下記のようにプロジェクトファイルのタイプチェックができます。
try🐶everything casablanca$ yarn tsc
yarn run v1.22.19
$ tsc
app/textRecognition.tsx:18:40 - error TS2552: Cannot find name 'TextRecognitionResult'. Did you mean 'SpeechRecognitionResult'?
18 const [result, setResult] = useState<TextRecognitionResult>();
~~~~~~~~~~~~~~~~~~~~~
...
Path aliases を設定する
※ 全体参照：https://docs.expo.dev/guides/typescript/#path-aliases
src ディレクトリを⬇︎のように作成します。
try🐶everything casablanca$ tree src
src
├── common
│ ├── assets
│ │ ├── fonts
│ │ │ └── SpaceMono-Regular.ttf
│ │ └── images
│ │ ├── adaptive-icon.png
│ │ ├── favicon.png
│ │ ├── icon.png
│ │ └── splash.png
│ └── constants
│ ├── colors.ts
│ └── index.ts
└── components
├── EditScreenInfo.tsx
├── StyledText.tsx
└── Themed.tsx
6 directories, 11 files
try🐶everything casablanca$
tsconfig.jsonファイルに"paths": {"": ["src/"]}のように追加します。
// tsconfig.json
{
"compilerOptions": {
"strict": true,
"baseUrl": ".",
"paths": {"*": ["src/*"]}
},
"extends": "expo/tsconfig.base"
}
$ npx expo start コマンドでメトロサーバを再起動します。
以降、Line5、6 のような使い方ができます。
import React from 'react';
import {StatusBar} from 'expo-status-bar';
import {Platform, StyleSheet} from 'react-native';
import EditScreenInfo from 'components/EditScreenInfo'; // 👍 'src/components/EditScreenInfo' --> 'components/EditScreenInfo'
import {Text, View} from 'components/Themed';
...
Expo Router v2 を設定する
※ 全体参照：https://docs.expo.dev/routing/installation/#quick-start
Expo Router 設置
try🐶everything casablanca$ npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar react-native-gesture-handler try🐶everything casablanca$ npx pod-install try🐶everything casablanca$ yarn ios // <-- OR, yarn android
Entry point を設定する
// package.json
{
"name": "casablanca",
"version": "1.0.0",
"main": "expo-router/entry", // <-- 編集
...
Enty Point を変更すると、既存の App.js index.js ファイルは不要になるので削除しても構いません。最初のクライアントファイルは app/_layout.ts に変わります。
プロジェクト設定を変更する
// app.json
{
"expo": {
"name": "casablanca",
"slug": "casablanca",
"version": "1.0.0",
"assetBundlePatterns": ["**/*"],
"plugins": ["expo-router"],
"scheme": "csblanca", // <--追加する
"experiments": {"tsconfigPaths": true}
}
}
...
babel.config.jsファイルを変更する
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['expo-router/babel'], // <-- 追加
;
};
ページを作成する
※ ページとは：https://docs.expo.dev/routing/create-pages/#pages
app ディレクトリを⬇︎のように作成します。
try🐶everything casablanca$ tree app app ├── (tabs) │ ├── _layout.tsx │ ├── index.tsx │ └── two.tsx ├── [...missing].tsx ├── _layout.tsx └── modal.tsx 1 directory, 6 files try🐶everything casablanca$
iOS シミュレーター・Androidエミュレーターなどで動作を確認します。
あとがき
今までは、Expo & React Native アプリのルーティングとナビゲーションは React Navigation を使用していましたが、設定項目が多い・設定ファイル数が多いなど煩わしさを感じていたところでした。
一方、Expo Router は同じく Expo チームの React Navigation に基づいて構築されていてファイルベース (file-base) のルーターなのでその設定のシンプルさやナビゲーションのスピードなどに期待できるかと。
Expo Router は React Navigation の進化版であって欲しいですね。
※ ちなみに、src や app ディレクトリ下のファイルは npx create-expo-app --template > Navigation (TypeScript) コマンドを実行し作成したプロジェクトのファイルを再利用しています！(⬇︎)
try🐶everything ReactNative$ npx create-expo-app --template
? Choose a template: › - Use arrow-keys. Return to submit.
Blank
Blank (TypeScript)
❯ Navigation (TypeScript) - File-based routing with TypeScript enabled // <-- 選択
Blank (Bare)
コメント