내일배움캠프 React트랙 46일차 회고 (2022.01.03)

expo setup

<----터미널에서 지정된 저장소에 셋업파일 추가 ---->

1. 로컬저장소에 셋업

https://reactnative.dev/docs/environment-setup

yarn create expo-app 파일명

<----셋업된 파일을 vsc코드에 불러와 vsc터미널에서---->

2. expo계정에 프로젝트추가

eas update:configure

3. 배포

eas update

---

App icon, Splash Screen 이미지 변경

 

https://docs.expo.dev/guides/app-icons/

App icons

 

splash screen(or launch screen)이란 앱을 구동(Cold start)할 때 보여주는 시작화면을 말한다.

 

---

 

로컬저장소에 셋업된 파일내의 assets폴더에 각각의 파일을 동일한 이름으로 붙여넣기하면 아이콘과 스플래시스크린이 변경된다.

---

React navigation

https://reactnavigation.org/

React Navigation | React Navigation

 

React Navigation은 React의 react-router-dom을 대체하는 역할과 네비게이션을 위한 레이아웃도 제공해준다.

yarn add @react-navigation/native

npx expo install react-native-screens react-native-safe-area-context

[메뉴탭]API Reference -> Navigators: 다음과 같이 6개의 네비게이터를 이용할 수 있다.

 

각각의 네비게이터를 사용하기 위해서는 다음과 같이 각각의 네비게이터를 따로 다시 설치해줘야한다.

yarn add @react-navigation/native-stack

 

추가적으로 네비게이터를 사용하기 위해서는 다음과 같이 최상단에 네비게이션컨테이너로 감싸줘야 한다.

import { NavigationContainer } from '@react-navigation/native'; // <-- import해줘야함
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <네비게이터들>
    </NavigationContainer>
  );
}

 

navigation props는 메뉴탭[API Reference-> Navigation prop]에서 확인가능하다.

 

native stack props는 메뉴탭[API Reference-> Navigatiors -> props]에서 확인가능하다.

 

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

const Stack = createNativeStackNavigator();

const One = ({ navigation: { navigate } }) => {
  return (
    <TouchableOpacity onPress={() => navigate("two")}>
      <Text>One</Text>
    </TouchableOpacity>
  );
};

const Two = ({ navigation: { navigate, setOptions } }) => {
  return (
    <>
      <TouchableOpacity onPress={() => navigate("three")}>
        <Text>Two</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() =>
          setOptions({
            title: "변경된 제목",
          })
        }
      >
        <Text>Set Options</Text>
      </TouchableOpacity>
    </>
  );
};

const Three = ({ navigation: { goBack, reset } }) => {
  return (
    <>
      <TouchableOpacity onPress={() => goBack()}>
        <Text>Three</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() =>
          reset({
            index: 1,
            routes: [{ name: "three" }, { name: "two" }],
          })
        }
      >
        <Text>Reset Navigation</Text>
      </TouchableOpacity>
    </>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="one"
        screenOptions={{
          headerTintColor: "blue",
          headerShwon: true,
          headerBackTitle: "뒤로",
          presentation: "modal",
          animation: "flip",
        }}
      >
        <Stack.Screen name="one" component={One} />
        <Stack.Screen name="two" component={Two} />
        <Stack.Screen
          opritons={{ presentation: "modal" }}
          name="three"
          component={Three}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

 

---

BottomTab Navigator

yarn add @react-navigation/bottom-tabs

App.js

import { StatusBar } from "expo-status-bar";
import { NavigationContainer } from "@react-navigation/native";
import Stacks from "./navigation/Stacks";
import Tabs from "./navigation/Tabs";

export default function App() {
  return (
      <NavigationContainer>
        <Tabs />
      </NavigationContainer>
  );
}

불러올 컴포넌트를 미리 작성해둔다.

 

 

 

 

 

 

import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import My from "../screen/My";
import Movies from "../screen/Movies";
import { MaterialIcons } from "@expo/vector-icons";
import { Foundation } from "@expo/vector-icons";

const Tab = createBottomTabNavigator();

export default function Tabs() {
  return (
    <Tab.Navigator
      initialRouteName="Movies"
      sceneContainerStyle={{ backgroundColor: "white" }}
      screenOptions={{
        tabBarLabelPosition: "beside-icon",
      }}
    >
      <Tab.Screen
        options={{
          title: "영화",
          headerTitleAlign: "center",
          tabBarLabel: "Movies",
          tabBarIcon: ({ color, size }) => (
            <MaterialIcons name="local-movies" size={size} color={color} />
          ),
        }}
        name="Movies"
        component={Movies}
      />
      <Tab.Screen
        options={{
          title: "내가 작성한 댓글",
          headerTitleAlign: "center",
          tabBarLabel: "My",
          tabBarBadge: "hi",
          tabBarIcon: ({ color, size }) => (
            <Foundation name="social-myspace" size={size} color={color} />
          ),
        }}
        name="My"
        component={My}
      />
    </Tab.Navigator>
  );
}

---

combine navigators