![見出し画像](https://assets.st-note.com/production/uploads/images/120671372/rectangle_large_type_2_932085cfd4c779ee8f3232d7a6b76810.png?width=1200)
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
続いて、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に変えると一番初めに表示されるようになります
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です
この記事が気に入ったらサポートをしてみませんか?