🛣️

React NativeでもNext.jsのようなファイルルーティングをしたい！

2022/10/01に公開

React Native

Expo

tech

はじめに

React NativeでもNext.jsのようなファイルシステムベースによるルーティングができればな〜と思っていたところ、それが可能になったライブラリExpor Routerのβ版が公開されたのでチュートリアルを触ってみます。

プロダクトを作成する

下記を叩くと、Getting Startedの環境構築が済んだ状態のプロダクトが構築させるので、これを利用します。

$ npx create-react-native-app -t with-router

次にページを作成するために、appディレクトリを作成して、そこにファイルを作成します。

$ mkdir app
$ touch app/index.tsx
$ touch app/test.tsx

各種ファイルでは、ReactNativeを用いた画面表示を適当に書いておきます。

import "expo-router/entry";
import { View, Text } from "react-native";

export default function Index() {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text style={{ fontSize: 44, fontWeight: "bold" }}>Home</Text>
    </View>
  );
}

Next.jsとは違い、ExpoRouterでは/appディレクトリを参照します。
Expo Router | Routes

また、現段階で、js,ts,jsx,tsx拡張子が利用できます。
スターターキットでは、tsファイルを作成した状態で、expoを走らせると、ターミナル上でtypescriptを入れるか聞いてくれるのでYesを選択することで、使用可能になりました。

It looks like you're trying to use TypeScript but don't have the required dependencies installed. Would you
like to install typescript@^4.6.3, @types/react@~18.0.0, @types/react-native@~0.69.1? › (Y/n)

動かしてみる

フォルダとファイルを追加して確認ができる状態になったので、ターミナルからexpoを起動します。

$ npx expo start --clear

iOSを動かした場合は
$ i
Androidの場合は
$ a
Webの場合は
$ w

URLでの移動が確認しやすいので、Webを今回は起動します。

$ w

expo起動後、自動的にブラウザでlocalhostを開くので画面の表示を確認します。
http://localhost:19000/で app/index.tsxの表示ができることを確認できました。

今回のサンプルでは app/test.tsxを作成したので、http://localhost:19000/testへアクセスしてみます。

無事 app/test.tsx の内容を表示することができました。

終わりに

本記事では、ExpoRouterでの動作確認をおこなうことができました。
まだβ版なので、プロダクトへの採用はまだ早い感じがありますが、Next.jsチックに簡単にアプリのナビゲーションを作っていくことができるので、DX改善としてとても良いのではないでしょうか？
個人開発の小さなアプリなどで試しつつ、ExpoRouterを追いかけていこうかな？と思いました。

今回の確認に使ったソースコードは下記になります。

はじめに

プロダクトを作成する

動かしてみる

終わりに

Discussion