#36. React Native Navigation

React Native란?

React Native는 React를 사용하여 Native Apps(모바일 기기에 직접 다운로드하여 사용하는 앱)를 개발할 수 있는 프레임워크입니다.

github참조

Expo란?

Expo는 React application을 위한 프레임워크 입니다. React Native와 Native 플랫폼으로 만들어진 도구나 서비스들은 JavaScript와 TypeScript기반의 iOS, Android, Web apps를 개발하고, 실행가능한 파일로 만들고, 배포하는 일련의 과정들을 가능하게 해줍니다. 즉, React Native를 빠르게 시작할 수 있도록 도와줍니다.

React Native의 UI Components를 React의 태그와 비교해서 알아보겠습니다.

<div> 대신 <View>또는<ScrollView>를 사용해 감싸주며 <img>태그는 <Image>로,
<input type="text">는 <TextInput>을 사용한다.

React Components 공식문서 참조

Styling이 달라진 부분

1. display
display의 default값(기본값)이 display: flex; flex-direction: column으로 정의되어 있습니다. 따라서 가로로 정렬하려면 flex-direction: row로 하면 됩니다.
2. 화면 비율
기존에는 화면 전체를 채울 때, height: 100% 또는 height: 100vh를 사용했지만 RN에서는 flex: 1 을 사용하면 됩니다.

React Navigation 사용하기 (페이지 이동)

페이지를 이동할 때, react-router 대신 react-navigation을 사용할 수 있습니다. 간단하게 사용하는 방법에 대해서 알아보겠습니다.

1. Core library 설치

yarn add @react-navigation/native 또는
npm install @react-navigation/native

@react-navigation/native 라이브러리에 내장된 NavigationContainer를 사용합니다.

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

2. Stack Navigator 설치

yarn add @react-navigation/stack 또는
npm install @react-navigation/stack

@react-navigation/stack에 내장된 createStackNavigator의 메서드들을 사용합니다.
App.js

import React from 'react';
import {createStackNavigator} from "@react-navigation/stack";
import {NavigationContainer} from "@react-navigation/native";
import {Home, CartList} from "./screens";

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
    // 첫 시작화면의 컴포넌트를 다음과 같이 설정합니다.
    <Stack.Navigator
      initialRouteName={"Home"}
    >
    // 화면에 보여줄 스크린 (Home, CartList)을 Stack.Screen을 사용하여 추가해줍니다.
    <Stack.Screen
      name="Home" 
      component={Home}
      options={{
        title: "NIKE SHOES",
	  }}
    />
    <Stack.Screen
      name="CartList" 
      component={CartList}
      options={{
        title: "NIKE SHOES",
        headerTitleColor: COLORS.lightGray,
        headerTitleStyle: {
          ...FONTS.navTitle
        },
        headerRight: () => (
          <TouchableOpacity>
            CartList
          </TouchableOpacity>
        )
      }}
    />
    </Stack.Navigator>
    </NavigationContainer>

screens 폴더 생성
하위 폴더에 index.js, Home.js, CartList.js 3개의 파일 생성
index.js

import Home from "./Home";
import CartList from "./CartList";

export {
  Home,
  CartList,
}

Home.js

import React from 'react';
import {
  View, Text, SafeAreaView, StyleSheet, TouchableOpacity,
  FlatList, Modal, Image, Button,
} from 'react-native';

const Home = ({navigation}) => {
  return (
    <View>
      <Text> TRENDING </Text>
      <Button
        title="Cart"
        onPress={() => navigation.navigate('CartList')}
      />
    </View>
  )
}

CartList.js

import React from 'react';
import { Text } } from 'react-native';

const CartList = () => {
  
  function renderCart() {
    return (
      <Text>GoToCart</Text>
    )
  }
  return (
    <>
      {renderCart()}
    </>
  )
}
export default CartList;