RN Navigation의 세계에 흠뻑 빠지다

1] 리액트 내비게이션
npm install --save @react-navigation/native

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

npm install @react-navigation/stack
2]

App.js
react-navigation에서 navigationContainer 가져오구..
Navigations/stack 디렉토리에 만들어둔거, 가져오구

return (
    <NavigationContainer>
      <StackNavigation />
    </NavigationContainer>

Stack.js
react-navigation/stack 에서 createStackNavigator 가져오구
Stack을 선언하고 스택네비를 만들어줄것을 할당해주고.
return에다가 Stack.Navigator 안에 Stack.Screen 을 넣어주고
Screen 은 name과 component를 변수로 갖고..
🐱‍👤 스크린말고, 상위요소인 네비게이터 속성에다 넣어주면 화면이 전체 영역을 차지하게 된다. screenOptions={{ cardStyle : {backgroundColor: "pink"}}}
🐥 헤더 이름 변경은 screen 마다 속성 설정 options={{headerTitle:"메뉴1) 집"}}
🐥 이건 네이게이터에다가 속성 설정 screenOptions={{headerTitle:"메뉴1) 집"}}
👨🏾‍🤝‍👨🏻 cardStyle, 헤더 꾸며주기 -> headerStyle, headerTitleStyle,headerTitleAlign

const Stack =createStackNavigator()
const StackNavigation = () => {
    return (
       <Stack.Navigator>
           <Stack.Screen name="List" component={List} />
           <Stack.Screen name="Item" component={Item} />
           <Stack.Screen name="Home" component={Home} />
       </Stack.Navigator>

Home.js
Screen의 component에게는 navigation 프롭스 선물이 주어짐.
navigation 상자에는 다양한 선물이 있는데, 그중 하나가
원하는 곳으로 공간이동 시켜주는 navigate 함수얌..
(첫 파라미터는 이동할 컴포넌트 이름,
둘째 파라미터는 객체를 넘겨줄 수 있는데,
꺼내쓸때는, 그 컴포넌트에서 route를 프롭스로 받아서 route.params.키값 하면 나옴)

const Home = ({navigation}) => {
    return (        
            <View>
                <Text>Home입니다. 환영합니다.오왕 😈😈🤓</Text>
                <Button title="눌러졍 😍" onPress={()=>navigation.navigate('List')} /> 
            </View>

오늘은 여기까지 --------------- !