Expo routerライブラリの使用方法について④　～JavaScriptでのやり方とその考察～

JavaScriptでExpo Routerを使用し、NavigationとTabを使う方法についてまとめると、

下記のYoutube動画が有用。ソースコードも概要欄にリンクされている（一部 .tsxファイルとなっているが、.jsxに変えて登録すればよい。[id].tsxだけTypeScriptで記載されているがジェネリクスの部分を削除すれば使用できる。）

ただし、例によって、いろいろな知識がまとめて説明されているため、混乱を生じる人もいるでしょう（私も含め）

youtube動画

Learn Expo Router - Complete Tutorial - YouTube

Source code 

https://github.com/cosdensolutions/code/tree/master/videos/long/expo-router-tutorial

初めから少しずつ作っていきましょう。

（共通）

npx create-expo-app -t      

[npx create-expo-app --template と同じだと思います]

選択画面では、Blankを選択。

npx expo uninstall expo

npx expo install expo@49.0.18

npx expo install --fix

（現在、expo@50は不安定？また、Google ChromeのJS Debuggerが使用できないこともあるため）

 

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

 

package.json内の"main"の項目を公式ドキュメント通りに置き換えます。エントリーポイントを変更してます。

https://qiita.com/KamataRyo/items/4e8a4c31bd3e20f00cbe

{
  "name": "expo-router-tutorial2",
  "version": "1.0.0",
  "main": "expo-router/entry",
 
｝

app.json内で、”slug”下に、"scheme"項目を追加します（今回のプロジェクト名はexpo-router-tutorial2）

{
  "expo": {
    "name": "expo-router-tutorial2",
    "slug": "expo-router-tutorial2",
    "scheme": "expo-router-tutorial2",

babel.config.js内のreturn内に、plugins項目を追加します。

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['expo-router/babel'],
  };
};
 
npx expo start -c　で下記のように表示されれば成功です。
 

（Navigatioin編）

index.jsはホーム画面です。

Appフォルダ直下に、index.jsと並列して、遷移するページが入るフォルダを作成します。ここでは、usersにします。

今は、_layout.jsは白紙状態でよいです。

index.jsは下記

import { Link, router } from "expo-router";
import { Pressable, Text, View } from "react-native";

const HomePage = () => {
  return (
    <View>
      <Text>Home Page</Text>
      <Pressable
        onPress={() =>
          router.push({
            pathname: "/users/[id]",
            params: { id: 2 },
          })
        }
      >
        <Text>Go to user 2</Text>
      </Pressable>
    </View>
  );
};

export default HomePage;

 

usesフォルダ内に、[id].jsを作成します。

[id].js

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

const UserPage = () => {
  const { id } = useLocalSearchParams();

  return (
    <View>
      <Text>User Page - {id}</Text>
    </View>
  );
};

export default UserPage;

 

これでNavigationが完成です。

画面遷移の方法はいろいろあり、これについて記載したHPは多数あるので省きます。

ちなみに、初めに作成されたapp/index.jsは、app下のフォルダであれば、別のフォルダに移動してもエラーにならず追跡してくれるようです。例えば、app/(tabs)/index.jsにしても、ファイルを移動するだけでOKです。

（Tab編）

上記に追加する形で記載します。

さきほど白紙だった   app/_layout.jsに下記を追加します。

app/_layout.js

import { Tabs } from "expo-router";

const TabsLayout = () => {
  return (
    <Tabs>
      <Tabs.Screen
        name="index"
        options={{
          headerTitle: "Home",
          title: "Home",
        }}
      />
      <Tabs.Screen
        name="users/[id]"
        options={{
          headerTitle: "User Page",
          title: "User",
        }}
      />
    </Tabs>
  );
};

export default TabsLayout;

この時点で、フォルダ構成は下記のようになっています。

通常TypeScriptで作成される場合は、(tabs)フォルダというものがあります。

そこでそれに寄せてみましょう。

app直下に(tabs)フォルダを作成し、さきほどapp下にあったファイルをすべてその下に入れてみます。不思議とエラーが出ません。

タブのレイアウト作成のため、app直下に、(tabs)フォルダと並列に、_layout.jsを作成します。[ (tabs)フォルダ内の_layout.jsとは別です]　おそらくここで、タブのレイアウト設定ができるでしょう。

プロジェクト名はさきほどと違いますが、フォルダ構成は下記のようになります。