inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

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

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

layout tab 설정 문의.

해결된 질문

142

dev.edchoi

작성한 질문수 1

0

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

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

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

image.png

 

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>
  );
}

 

image.png

 

javascript react react-native typescript react-query

답변 2

0

Kyo

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

0

인프런 AI 인턴

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

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

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

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

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

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

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

secureTextEntry 설정에 관해

0

58

2

expo 55 tabs 사라짐 이슈

0

83

2

백엔드도 궁금합니다!

1

86

1

댓글 버튼 하단에 고정되지 않는 이슈

0

53

1

SafeAreaView 적용 기준 문의

0

82

2

스크린 옵션 아이콘

0

56

2

[Note] 안드로이드 네비게이션 헤더 이슈 안내

0

67

2

ActionSheet

0

87

1

안드로이드 폰과 PC에서 테스트할때 화면 안보임과 오류 문의

0

99

1

iOS 빌드 후 실기기에서 앱 시작

1

71

1

[5-2] 글 목록 무한스크롤 구현하기 with InfiniteQuery 10:40/ useScrollTop(ref) 사용관련

0

84

2

클라이언트 사이드에서 세션 관련 질문

0

82

2

Android 에뮬레이터 환경설정 및 실행 (for Mac) 에러 문의

0

113

1

[5-13] useLikePost 쿼리 구현 중 Tanstack Query 관련 질문

0

63

1

Expo 54 버전 ios에서 headerLeft

1

140

2

어플 개발 후 배포 시에 주의할 사항이 있을까요?

0

79

1

코드 수정 시 ios 시뮬레이터에서 자동반영이 안 되는데 왜그럴까요?

0

92

1

텍스트가 다 상단위로 올라가있는데 어떻게 해야할까요?

0

78

2

Axios Network error...

0

151

2

강의는 52버전인데 expo가 현재 54버전이에요

0

310

1

[TIP] SafeAreaView 사용할 때마다 자꾸 ios에서 위아래가 빵꾸 나시는 분들 필독

0

238

2

키보드 이슈 관련 해결 질문

0

74

1

android header를 ios처럼 바꾸기

0

70

1

CustomButton 코드 버튼 관련 질문

0

66

1