인프런 커뮤니티 질문&답변
작성한 질문수
탭바에서 href:null 동작 안됨
작성
·
50
0
버전
npm ls react 19.0.0
npm ls react-native 0.79.2
npm ls expo 53.0.9
안녕하세요 다크모드 UI를 깃허브에서 복사했는데 전까지 잘 되던
app/(tabs)/_layout.tsx 에서 post 탭을 안보이게 하는 코드가 제대로 작동하지 않습니다.
기기에서도 (post)/[us... 경로의 탭이 보이고 있습니다.
그 뒤로 제 예전 코드로 다시 돌려봐도 탭이 사라지지 않고 계속 보이는데, 어디서부터 꼬인건지 감이 안잡힙니다ㅠ
문제가 발생한 걸로 추측되는 코드입니다.
<Tabs.Screen
name="(post)/[username]/post/[postID]"
options={{
href: null,
}}
/>답변 2
0
0
안녕하세요, 인프런 AI 인턴입니다. pearl님,
React Native와 Expo에서 탭바의 특정 탭을 숨기고자 하였으나, 원하는 대로 동작하지 않아 당황스러우셨을 것 같습니다. 해당 문제는 보통 프로젝트의 라우팅 설정과 관련이 있습니다. href: null 옵션을 이용해 탭을 안보이게 하려 하였지만, 여전히 탭이 보이는 현상에 대해 아래와 같이 몇 가지 확인 사항과 대안을 제시해 드리겠습니다.
확인해볼 사항
라이브러리 호환성 및 버전 확인:
- 현재 사용 중인
react,react-native, 및expo의 버전을 확인해 보셨습니다. 그러나 각 라이브러리 간의 호환성 문제가 있는지 좀 더 확인해 보는 것이 좋습니다.
- 현재 사용 중인
캐시 클리어:
- 통상적으로 설정 변경 후에도 여전히 변화가 없을 때는 캐시 문제일 가능성이 높습니다. 캐시를 삭제한 후 expo를 다시 시작해 보세요.
expo start -c- 통상적으로 설정 변경 후에도 여전히 변화가 없을 때는 캐시 문제일 가능성이 높습니다. 캐시를 삭제한 후 expo를 다시 시작해 보세요.
라우팅 설정 재점검:
<Tabs.Screen>설정이 변경사항을 올바르게 반영하고 있는지 점검하세요. 만약href: null사용이 기대했던 대로 작동하지 않는다면, 라우팅 구조나 조건문 등을 통해 해당 탭을 비활성화하는 방법도 고려해보세요.
다른 해결 방법:
- 탭 화면 컴포넌트 자체에서 조건문을 사용하여 설정에 따라 해당 탭이 표시되지 않도록 하는 로직을 추가할 수 있습니다.
- 탭 화면 컴포넌트 자체에서 조건문을 사용하여 설정에 따라 해당 탭이 표시되지 않도록 하는 로직을 추가할 수 있습니다.
대안 방법
- 옵션 대신
screenOptions에서 조건문으로 해당 스크린을 숨기는 설정을 작성하거나, 해당 스크린이 표시되지 않으면 하는 로직을 적용할 수 있습니다.
아래 링크들을 통해 비슷한 문제와 해결책에 대한 내용을 참고하시면 도움이 될 수 있습니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
해결됐습니다..! 감사합니다