{"id":1498,"date":"2025-05-21T09:28:10","date_gmt":"2025-05-21T09:28:10","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=1498"},"modified":"2025-05-21T10:08:55","modified_gmt":"2025-05-21T10:08:55","slug":"rnexpocustom-button-filebaserouting","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/05\/21\/rnexpocustom-button-filebaserouting\/","title":{"rendered":"\ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c Expo,\ucee4\uc2a4\ud140\ubc84\ud2bc,\ud30c\uc77c\uae30\ubc18\ub77c\uc6b0\ud305 \/ RNExpo,Custom Button,File-based routing"},"content":{"rendered":"\n

google drive : https:\/\/drive.google.com\/drive\/folders\/1PBYPqnrrp05J8CDE9egIfLMbiMoqQtuZ?usp=share_link<\/a><\/p>\n\n\n\n

1.\ucee4\uc2a4\ud140 \ubc84\ud2bc \/ Custom Button<\/strong>
app\/FlmButton.js : \ucee4\uc2a4\ud140 \ubc84\ud2bc ReactNative CLI\uc5d0\uc11c\ub3c4 \uc0ac\uc6a9\uac00\ub2a5 \/
Custom Buttons are also available in ReactNative CLI<\/p>\n\n\n\n

2.\ud30c\uc77c \uae30\ubc18 \ub77c\uc6b0\ud305 \/ File-based routing<\/strong>
— # npm run reset-project \uc2e4\ud5f9 \ud6c4 \uc0ac\uc6a9\ud55c \ucf54\ub4dc\uc785\ub2c8\ub2e4.
This is the code used after executing # npm run reset-project.<\/p>\n\n\n\n

— project folder\/app\/_layout.js\ud30c\uc77c \uc0ac\uc6a9 ,\ubc18\ub4dc\uc2dc _layout.tsx \ub610\ub294 _layout.js\ud30c\uc77c\uc774\uc5b4\uc57c \ud569\ub2c8\ub2e4.
Use project folder\/app\/_layout.js file, it must be _layout.tsx or _layout.js file.<\/p>\n\n\n\n

— _layout.js\ud30c\uc77c \ucf54\ub4dc\ub0b4\uc5d0\uc11c “Stack.Screen name=”App”\uc740 App.js \ud30c\uc77c\uacfc \uc774\ub984\uc774 \uac19\uc544\uc57c \ud569\ub2c8\ub2e4.
In the _layout.js file code, “Stack.Screen name=”App” must have the same name as the App.js file.<\/p>\n\n\n\n

2.\ud30c\uc77c \uae30\ubc18 \ub77c\uc6b0\ud305 \/ File-based routing
— # npm run reset-project \uc2e4\ud5f9 \ud6c4 \uc0ac\uc6a9\ud55c \ucf54\ub4dc\uc785\ub2c8\ub2e4.
This is the code used after executing # npm run reset-project.<\/p>\n\n\n\n

— \uc544\ub798\ub294 _layout.js\ud30c\uc77c \/ Below is the _layout.js file<\/p>\n\n\n\n

import { Stack } from 'expo-router'; \/\/ expo router\n\nexport default function Layout() {\n  return (\n    <Stack>\n      {\/* Stack.Screen name=\"App\"  == App.js file *\/}\n      <Stack.Screen name=\"App\" options={{ title: 'Home' }} \/>\n      <Stack.Screen name=\"AppUI\" options={{ title: 'Second' }} \/>\n    <\/Stack>\n  );\n}\n<\/code><\/pre>\n\n\n\n
— project folder\/app\/_layout.js\ud30c\uc77c\uc744 \uc0ac\uc6a9\ud558\uace0 ,\ubc18\ub4dc\uc2dc _layout.tsx \ub610\ub294 _layout.js\ud30c\uc77c\uc774\uc5b4\uc57c \ud569\ub2c8\ub2e4.
Use project folder\/app\/_layout.js file, it must be _layout.tsx or _layout.js file.<\/p>\n\n\n\n
— _layout.js\ud30c\uc77c \ucf54\ub4dc\ub0b4\uc5d0\uc11c “Stack.Screen name=”App”\uc740 App.js \ud30c\uc77c\uacfc \uc774\ub984\uc774 \uac19\uc544\uc57c \ud569\ub2c8\ub2e4.
In the _layout.js file code, “Stack.Screen name=”App” must have the same name as the App.js file.<\/p>\n\n\n\n
— \uae30\uc874\uc758 ReactNative CLI\uc758 \ucf54\ub4dc\ub97c \uc0ac\uc6a9\ud558\ub824\uba74 \ubcf5\uc7a1\ud574\uc9c0\uae30 \ub54c\ubb38\uc5d0 expo router\ub97c \uc4f0\ub294\uac8c \uac04\ub2e8\ud569\ub2c8\ub2e4.
It’s simpler to use expo router because the existing ReactNative CLI code becomes complicated.<\/p>\n\n\n\n
— \uc67c\ucabd\uc740 \ud504\ub85c\uc81d\ud2b8 \ub514\ub809\ud1a0\ub9ac \ub9ac\uc2a4\ud2b8, \uc624\ub978\ucabd\uc740 \uc571\uc2e4\ud589\ud654\uba74 \uc785\ub2c8\ub2e4.
On the left is the project directory list, and on the right is the app execution screen.<\/p>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n","protected":false},"excerpt":{"rendered":"
google drive : https:\/\/drive.google.com\/drive\/folders\/1PBYPqnrrp05J8CDE9egIfLMbiMoqQtuZ?usp=share_link 1.\ucee4\uc2a4\ud140 \ubc84\ud2bc \/ Custom Buttonapp\/FlmButton.js : \ucee4\uc2a4\ud140 \ubc84\ud2bc ReactNative CLI\uc5d0\uc11c\ub3c4 \uc0ac\uc6a9\uac00\ub2a5 \/Custom Buttons are also available in ReactNative CLI 2.\ud30c\uc77c \uae30\ubc18 \ub77c\uc6b0\ud305 \/ File-based routing— # npm run reset-project \uc2e4\ud5f9 \ud6c4 \uc0ac\uc6a9\ud55c \ucf54\ub4dc\uc785\ub2c8\ub2e4.This is the code used after executing # npm run reset-project. — project folder\/app\/_layout.js\ud30c\uc77c \uc0ac\uc6a9 ,\ubc18\ub4dc\uc2dc _layout.tsx \ub610\ub294 _layout.js\ud30c\uc77c\uc774\uc5b4\uc57c […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,1],"tags":[],"class_list":["post-1498","post","type-post","status-publish","format-standard","hentry","category-reactnative","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=1498"}],"version-history":[{"count":7,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1498\/revisions"}],"predecessor-version":[{"id":1509,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1498\/revisions\/1509"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=1498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=1498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=1498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}