개발자
안녕하세요, 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랑 충돌이 난 거일 수도 있다는데 정확하게 모르겠네요 ㅠ
답변 0
첫 답변을 기다리고 있어요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 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를 업데이트하거나 다른 방법을 찾아봐야 할 수도 있겠네요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!