🔨
新規のexpoプロジェクトからexpo routerを外す方法
経緯
ここ最近expoがnextjs路線に走り始め、ファイルベースルーターのexpo routerというのがリリースされた。そして、新規でのプロジェクトには問答無用でexpo routerをデフォルトで入っている状態になっている、新規で作った後にどうやって外すかの情報があまりなかったので、書いておくことにした。
できれば新規作成時にはexpo router使うかどうかを聞いてほしいとは思うが、ここ最近のeas hosting などの動きを見るとあまりそういうのは期待できなさそうな雰囲気
index.js作る
expoで新規プロジェクト作るとディレクトリ構成が以下のようになっているはず👇
.
├── README.md
├── app.json
├── assets
│ ├── fonts
│ └── images
├── eas.json
├── eslint.config.mjs
├── expo-env.d.ts
├── node_modules
├── package.json
├── scripts
│ └── reset-project.js
├── src
│ ├── app
│ │ ├── _layout.tsx
│ │ ├── index.tsx
├── tsconfig.json
srcの外側にindex.js
ファイルを作成し、中身を以下👇のように書く。
index.js
import { registerRootComponent } from "expo";
import App from "./src/App";
registerRootComponent(App);
_layout.tsxを外側に持って来る
index.jsでsrc/App
を読み込むように書いているので、app/_layout.tsx
ファイルをApp.tsx
に変更し、appの外側に持ってくる
そして、Slotとかは要らないので、中身を消しちゃっても良い
src/App.tsx
import {SafeAreaView, Text} from 'react-native';
export default function App() {
return (
<SafeAreaView>
<Text>Hello World </Text>
</SafeAreaView>
)
}
package.jsonの編集
package.jsonにはmainフィルドが以下のように変更する
package.jsonjson
- "main": "expo-router/entry",
+ "main": "index.js",
起動確認
後書き
ファイルベースルーターには好き嫌いが分かれる点があるかもしれない。しかし、React Nativeを使ってクロスプラットフォームアプリを開発する際、Webのプラクティスを活用できることや、Webのコードベースからネイティブのコードを開発できるという大きなメリットがあるように思う。一方で、Webを作る予定のない純粋なネイティブアプリにおいては、ファイルベースルーターは適していないようにも感じる。そもそもファイルベースルーターのコンセプト自体が、HTTPサーバーや過去のPHPのようなWeb技術をベースにしていると考えられ、それをネイティブ環境で使用するのは少し違和感がある。
Discussion