react‐navigation 세팅 - study-pals/frontend GitHub Wiki

Navigator 요구사항

가능하다면 Android, iOS, Windows, MacOS 네 플랫폼에서 일관적으로 동작할 수 있는 navigator를 찾아야 했다. 조사한 바에 의하면 react-navigation은 이 요구사항에 가장 근접한 라이브러리로, 네 플랫폼과 모두 호환된다.

추가적으로 우리 프로젝트와 conflict가 발생하지 않는 패키지 버전을 조사했고, 이는 다음과 같다.

"@react-navigation/native": "^7.1.6",
"@react-navigation/stack": "^7.2.10",
"@react-navigation/bottom-tabs": "^7.3.10",
"@react-navigation/drawer": "7.3.9"

• @react-navigation/drawer 가 macos 환경에서 동작하지 않는다는 이슈를 발견했다. 추후 이 문제가 해결되었는지 직접 확인해 본 뒤에, 해결되지 않았다면 이에 대한 대책을 마련해야 할 듯하다.

  ref - https://www.reddit.com/r/reactnative/comments/17y6vxx/reactnavigation_on_macos/

패키지 결정하기: /stack VS /native-stack

@react-navigation 는 아래의 두 가지 stack 내비게이터를 제공한다.

• @react-navigation/native-stack
• @react-navigation/stack

두 라이브러리가 stack navigator로서의 역할을 수행하는 방식은 동일하지만(개발자에게 보여지는 인터페이스에는 차이가 없음), 그 내부 구현에 차이가 있다.

/stack는 내비게이션을 온전히 js 단에서 컨트롤하지만, /native-stack는 네이티브 컴포넌트를 활용해 내비게이션을 컨트롤한다. 따라서 네이티브 단에서 내비게이션이 수행되는 /native-stack이 성능상 이점이 존재한다. 다만, /stack 보다 low level에서 구현된 만큼 다양한 플랫폼에서 일관적인 동작을 기대하기 힘들 것으로 판단하여 우리 프로젝트에는 /stack를 적용하기로 결정하였다.

런타임 에러: ViewManagerResolver returned null for either ...

기본적인 navigation 구조를 작성한 뒤에 시뮬레이터를 동작시켜 보았다. Windows에서는 문제없이 동작했으나, Android에서는 위와 같은 에러가 발생했다.

@react-navigation/stack 라이브러리가 내부적으로 의존하는 패키지를 우리 프로젝트에서 찾을 수 없어 발생한 문제였다. npm에서 확인한 해당 라이브러리가 요구하는 peerDependency는 아래와 같았다.

 "peerDependencies": {
    "@react-navigation/native": "^7.1.6",
    "react": ">= 18.2.0",
    "react-native": "*",
    "react-native-gesture-handler": ">= 2.0.0",
    "react-native-safe-area-context": ">= 4.0.0",
    "react-native-screens": ">= 4.0.0"
  },

위 peerDependency 중 누락된 것들을 우리 프로젝트에 설치하니 문제가 해결되었다.

iOS, MacOS에서의 런타임 에러

pod가 package.json 업데이트로 생긴 변경사항을 알지 못해 생긴 문제였다.

ios, macos 디렉토리에서 pod install 해주니 해결되었다.