createNativeStackNavigator 함수를 사용하면 Stack이라는 객체가 만들어집니다. 이 안에 Stack.Navigator라는 컴포넌트와 Stack.Screen 컴포넌트가 들어있습니다.

Stack.Navigator 컴포넌트는 NavigationContainer 사이에 넣어야 정상적으로 작동합니다. 그리고 Stack.Screen 컴포넌트를 사용해 각 화면을 설정할 수 있습니다. 이 컴포넌트에 설정된 name은 화면의 이름을 설정하는 Props입니다. 이 값은 다른 화면으로 이동하거나 현재 화면이 어떤 화면인지 조회할 때 사용합니다(반드시 대문자로 시작할 필요는 없습니다만, 공식 문서에서는 대문자로 시작하는 것을 권장(prefer)하고 있습니다).

코드를 보면 Stack.Navigator에 initialRouteName이라는 Props가 "Home"으로 설정되었죠? 이는 네이티브 스택 내비게이터에서 기본적으로 보여줄 화면의 이름(초기 화면)을 가리킵니다. 만약 이 값을 설정하지 않으면 기본적으로 내비게이터 안에 들어있는 첫 번째 화면(이 경우에는 Home)이 보여집니다.

여기까지 코드를 작성했다면 yarn ios와 yarn android 명령어로 시뮬레이터를 실행하세요(맥OS를 사용하지 않는다면 iOS 시뮬레이터는 생략해도 됩니다).

▲ 그림 5-2 네이티브 스택 내비게이터 설정 후 초기 화면

Home 타이틀과 버튼이 나타났나요? 이와 같이 iOS와 안드로이드에서 타이틀이 보이는 영역이 조금 다르답니다.