Expo RouterのModalsを使う

Expo Routerを使用すると、Next.jsみたくappディレクトリ配下のページがそのままルーティング設定されます　これはいいですよね

Expo Install

早速インストールしてみます　下記のInstall Expo Routerの手順通りです
今回tabs@49は使わなかったですが、tabの遷移は必要になることが多いと思います

1.expo install

npx create-expo-app@latest --template

Blank(TypeScript)を選択して、appの名前を決めてinstall完了待ちます

2.install dependencies

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

Install Expo Router

続いて、package.jsonやapp.jsonに追記します　YouTubeの動画も参考になります

3.package.json書き換え

// package.json 下記に書き換え

{
  "main": "expo-router/entry"
}

4.app.json追記

// app.json  project名がmy-app-routerの場合は、myapprouterとすればいいみたい
{
  "scheme": "myapprouter"
}

"web": {
    "bundler": "metro"
  }

app.json追記後

{
  "expo": {
    "name": "my-app-router",
    "slug": "my-app-router",
    "version": "1.0.0",
    "scheme": "myapprouter",
    "assetBundlePatterns": ["**/*"],
    "plugins": ["expo-router"]
  },
  "web": {
    "bundler": "metro"
  }
}

インストールする

npx expo install react-native-web react-dom

5.babel.config.js追記

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['expo-router/babel'],
  };
};

6.npm installする

npm install

7.npm run iosで立ち上げる （公式だとnpx expo start -cでキャッシュクリア　2023.12.24追記）

npm run ios

Modalsを使う

公式にあるようにappディレクトリ配下に_layout.js, home.js, modal.jsを作成します
home.jsの名前をindex.tsxに変えると一番初めに表示されるようになります

Modals

index.tsxのPresent modalをタップするとmodalが表示されました！📱

<Link href="/modal">Present modal</Link>

上のようにLinkで遷移する方法と、例えば下記のようにコンポーネントなどをタップして遷移する方法があります　下記の場合は router()を使用します

    import { Link, router } from "expo-router";


     <FlatList
       data={times}
       renderItem={({ item }: { item: Alarm }) => (
         <AlarmTimeItem
           time={item.time}
           label={item.label}
           alarm={item.alarm}
           onPress={() => router.push("/modal")}
         />
       )}
         keyExtractor={(item, index) => index.toString()}
     />

app/_layout.jsのnameにはファイル名を指定
headerShown: falseでヘッダー非表示に

import { Stack } from "expo-router";


export default function Layout() {

  return (
    <Stack>
      <Stack.Screen
        name="index"
        options={{
          headerShown: true,
          title: "アラーム",
          headerStyle: {
            backgroundColor: "red",
          },
          headerTintColor: "#000",
          headerTitleStyle: {
            fontWeight: "bold",
          },
        }}
      />
      <Stack.Screen
        name="modal"
        options={{
          title: "アラームの追加",
          // Set the presentation mode to modal for our modal route.
          presentation: "modal",
         
        }}
      />

      <Stack.Screen
        name="audio"
        options={{
          headerShown: true,
          title: "サウンド",
          presentation: "modal",
        }}
      />

    </Stack>
  );
}

app router,  expo routerはgoodです