layout tab 설정 문의.

아바타 커뮤니티앱 만들기 (React Native Expo)

[2-2] 네비게이션 구조 설정 with Expo Router

해결된 질문

작성

113

탭 설정 관련 문의 드립니다.

현재 디렉토리는 아래 이미지와 같은 구조이고, 하단의 스크립트처럼 Tab 설정에는 Home / Profile / setting 3가지가 명시 된 상태인데 이전 미션에서 작성한 mission.tsx가 하나의 탭으로 잡히고 있습니다.

RN 구조상 (tabs) 디렉토리 하단에 파일들이 자동으로 탭으로 잡히는 구조인지, 별도의 설정으로 뺄 수 있는지 알수 있을까요??

export default function TabLayout() {
  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: "black",
        headerShown: false,
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: "Home",
        }}
      />
      <Tabs.Screen
        name="my"
        options={{
          title: "Profile",
        }}
      />
      <Tabs.Screen
        name="setting"
        options={{
          title: "setting",
        }}
      />
    </Tabs>
  );
}

javascript react react-native typescript react-query

답변 2

Kyo

지식공유자

tabs안에 넣어서 자동으로 잡히는걸로 보이네요! mission는 서비스개발에는 필요없으므로 삭제하시고, 터미널 종료후 앱을 다시실행해보시면 없어질거예요!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. dev.edchoi님.

React Navigation에서 Screens는 기본적으로 파일 시스템 기반의 구조에서 결정됩니다. 즉, 디렉토리 구조에 따라 자동으로 스크린이 잡히게 설정될 수 있습니다. 하지만 특정 파일이나 폴더를 제외하고 싶다면 명시적으로 Tabs.Screen에 포함되지 않도록 설정할 수 있습니다.

현재 상황에서는 tabs 디렉토리 하위에 있는 모든 파일이 기본적으로 스크린으로 잡힐 가능성이 큽니다. 이를 해결하려면 mission.tsx 파일을 Tabs.Screen 구성에서 제외하도록 하셔야 합니다. 아래와 같은 방법으로 접근할 수 있습니다:

Tabs.Screen 설정에서 mission.tsx를 명시적으로 제외하거나,
mission.tsx를 다른 디렉토리로 이동시키거나,
조건문을 통해 특정 스크린을 제외하는 방법을 사용할 수 있습니다.

현재 코드에서 사용하고 있는 Tabs.Screen 설정처럼, 명시적으로 선언하지 않은 파일들이 자동으로 탭으로 설정되는 구조가 아닌지 여부를 확인하기 위해, index.js 파일 등에서의 기본 경로 설정을 확인해보시기를 권장합니다.

관련하여 유사한 논의를 한 게시물이 있어 참고하시길 바랍니다:
- 🔗 React Navigation Tab 구조 및 설정 방법

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

layout tab 설정 문의.