개발자

NavigationContainer 중첩 오류

2024년 09월 13일조회 81

안녕하세요, RN(Expo)로 React Navigation을 적용하다 오류가 해결되지 않아서 질문드립니다. expo를 통해 다음과 같이 index.js에 React Navigation을 적용했습니다. import { store } from "@/redux/store"; import MainScreen from "./screens/MainScreen"; import { Provider } from "react-redux"; import { NavigationContainer } from "@react-navigation/native"; import { createNativeStackNavigator } from "@react-navigation/native-stack"; import LoginScreen from "./screens/LoginScreen"; export default function HomeScreen() { const Stack = createNativeStackNavigator(); return ( <Provider store={store}> <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Main" component={MainScreen} /> <Stack.Screen name="Login" component={LoginScreen} />{" "} </Stack.Navigator> </NavigationContainer> </Provider> ); } 그러나 다음과 같은 오류가 뜨며 빈화면만 보이더라구요ㅠ Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitly. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them. 찾아보니 NavigationContainer가 중첩되었다는 것 같은데, 저는 계속해서 그대로 강의를 따라가고 있었고, 따로 NavigationContainer를 적용한 파일이 존재하지 않습니다 ㅠ 다음 속성을 추가해도 오류가 해결되지 않습니다 ㅠ 아마 어디선가 부모에서 NavigationContainer가 적용된 것 같은데 찾을 수가 없네요 ㅠㅠ independent={true} 조금 더 찾아보니 expo-router랑 충돌이 난 거일 수도 있다는데 정확하게 모르겠네요 ㅠ

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 0

답변이 없을 때 보이는 아이콘

첫 답변을 기다리고 있어요.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 09월 13일

이 오류는 어딘가에서 `NavigationContainer`를 중첩 사용하고 있을 때 나타나는 메시지라고 보입니다. 이 경우, 디버깅을 통해 여러분이 만든 모든 컴포넌트 파일을 빠짐없이 살펴보셔야 할 것 같습니다. 장기적으로 볼 때, `NavigationContainer`를 재사용하는 패턴은 정말로 필요한 경우에만 사용하는 것이 좋습니다. 왜냐하면 이런 식으로 코드를 작성하면 부모와 자식 네비게이터 사이의 연결을 끊어버리기 때문에 네비게이션 상태를 전체 앱 수준에서 추적하기 어려워집니다. 그럼에도 불구하고, 확실한 해결책을 찾기위해 의심스러운 부분들을 체크해보세요 : 1. Expo SDK 버전: Expo SDK 40 이상에서는 이미 `@react-navigation/native`가 내장되어 있으므로 따로 설치하지 않아도 됩니다. 그래서 만약 `expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view`를 실행했다면 필요 없는 설치일 수 있습니다. 2. `MainScreen` 또는 `LoginScreen`: 이 화면들 안에 다른 NavigationContainer가 있는지 확인해보세요. 3. Third-party 라이브러리: NavigationContainer를 사용하는 서드 파티 라이브러리가 있는지 확인해보세요. 4. `NavigationContainer independent={true}`: 이 속성은 child navigators를 parent navigator로부터 독립적으로 만들어 줍니다. 그래서 오류 메시지에서 제안하는 것처럼, 의도적으로 중첩을 사용하고 있다면 이 속성을 추가해주는 것이 해결책일 수 있습니다. 5. `Expo router`와의 충돌: 이 경우라면 Expo를 업데이트하거나 다른 방법을 찾아봐야 할 수도 있겠네요.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!