[React Native Master Class By Nomad Coders] #2.7 ~2.12

#2.7 Dark Mode

• Color Scheme Hook 사용법 / document 참고
• Theme 사용법 / document 참고

#2.8 Tab Bar Icons

• Tab.Navigator Component에서 option으로 icon을 수정할 수 있지만, Tab.Screen Component에서 option으로 icon을 수정하는 방법이 훨씬 깔끔하다.

#2.9 Stack Navigation

• 새 스크린이 이전의 스크린 위로 올라오는 스크린을 의미한다.

Stack Navigator vs Native Stack Navigator

• Stack Navigator
  - Stack Navigator는 React Navigation에 있는 것이고, 오로지 javascript로 구현
  • 중요한 차이점은 platform의 navigation을 사용하지 않는다는 것이다.
  • ios나 android의 navigation을 사용하지 않는다.
  • native로 구현된 것보다 성능이 좋지 않을 수 있다.
  • navigator의 모양이나 느낌은 native의 navigation과 거의 똑같지만, 이는 javascript로 구현되어 있고, 컴파일이 필요하다.
  • 자유로운 커스텀이 가능하다.
• Native Stack Navigator
  - native API를 이용해 구현
  • ios의 UINavigationController와 android의 Fragment를 사용
  • natvie로 만든 일반적인 어플리케이션과 완전히 같은 방식으로 작동하고, 퍼포먼스도 똑같다.
  • 커스텀이 가능한 영역이 한정적이다.

#2.10 The Navigation Prop

• <NativeStack.Navigator> 컴포넌트로 감싸져 있는 <NavigationStack.Screen> 컴포넌트는 navigation 이라는 prop을 전달받는다.
• navigaiton prop을 통해서 다른 페이지로 이동할 수 있으며, 뒤로가기, set option도 가능하다.

#2.11 Configuring Stack Navigation

• Stack Navigation 옵션들을 다양하게 구현할 수 있다.
• 헤더를 없애거나, 다른 style을 적용하거나 등...
• 페이지 전환 애니메이션도 지정할 수 있다.
• 다양한 선택지로 Stack Navigation을 커스텀할 수 있다.

#2.12 Stacks and Tabs

• Stack Navigator와 Tab Navigator를 Root Navigator를 통해서 동일 선상에 두는 작업이 가능하다.
• Stack 과 Tab Screen을 자유롭게 넘나드는 기능을 구현할 수 있다.
• Root Navigator

// Root Navigator
import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Tabs from "./Tabs";
import Stack from "./Stack";

// navigator를 생성
const Nav = createNativeStackNavigator();

const Root = () => (
  // screenOption => presentation => 모달 방식으로 스크린 구현
  <Nav.Navigator screenOptions={{ presentation: "modal", headerShown: false }}>
    <Nav.Screen name="Tabs" component={Tabs} />
    <Nav.Screen name="Stack" component={Stack} />
  </Nav.Navigator>
);
export default Root;

• Stack Navigator

const ScreenThree = ({ navigation: { navigate } }) => (
  // navigaton prop을 사용해서 Tabs Screen에 접근 후, screen name을 지정해준다.
  // 클릭 후 Tabs Navigation 안에 있는 'Search'라는 Screen으로 이동
  <TouchableOpacity onPress={() => navigate("Tabs", { screen: "Search" })}>
    <Text>Go to search</Text>
  </TouchableOpacity>
);

• Tabs Navigator

// Stack Navigator에 접근해서 screen name을 지정해준다.
// 클릭 후 Stack Navigation 안에 있는 'Three'라는 Screen으로 이동
  <TouchableOpacity
    onPress={() => navigate("Stack", { screen: "Three" })}
    style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
  >
    <Text>Movies</Text>
  </TouchableOpacity>