1. React Native CLI 환경에서 인스타그램 앱 만들기

!주의 : React Native CLI 개발환경을 세팅해야 가능!!

프로젝트 생성

터미널에서 프로젝트를 만들고 싶은 폴더로 이동 후, 다음과 같은 명령어 입력

npx react-native init ReactNativeInstaApp(프로젝트이름)

다음과같이 설치됌

폴더 구조 생성

스크린 페이지

다음과 같이 폴더 구조를 만들어준다.
assets은 강의자료 소스에 있는 폴더를 그대로 붙혀넣었다.

screens 폴더는 다음과 같이 만든다

rnfe 사용해 스크린 파일을 채워넣어준다

2. 라우팅 구현하기

모듈 설치하기

터미널에서 다음과 같이 입력한다

npm install @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/material-top-tabs

index.js 엔트리 파일

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

AppRegistry는 모든 RN 앱을 실행하기 위한 JS 진입점 -> App루트 컴포넌트는 AppRegistry.registerComponent에 자신을 등록해야 함 -> 기본 시스템은 앱에 대한 번들 로드 후, AppRegistry.runApplication을 호출하여 앱이 준비되면 실제로 앱을 실행할 수 있음.

app.json

appKey 등록하기

{
  "name": "ReactNativeInstaApp",
  "displayName": "ReactNativeInstaApp"
}

Stack vs Tab

Stack Navigator

RN앱이 Stack을 사용하여 화면 간에 전환할 수 있는 방법을 제공한다.
예를 들어 로그인에서 가입 화면으로 이동하면, 가입 화면이 로그인 화면 맨 위에 쌓이고 뒤로 이동하면 가입 화면이 스택에서 꺼진다.

Tab Navigator

화면 하단이나 상단에 Tab이 있는 네비게이터며, 다른 화면 사이를 전환하는데 사용.

라이브러리 설치

npm install react-native-screens react-native-safe-area-context

맥을 사용중이고 ios용으로 개발 중인 경우 아래 명령어를 쳐서 연결을 완료해야 함

cd ios && pod install

설치하고 난 후 아래 그림처럼 ios폴더로 들어가지는데 cd..을 눌러 밖으로 나온다

app.tsx 코드 입력

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import React from 'react';
import Home from './src/screens/Home';
import Search from './src/screens/Search';
import Activity from './src/screens/Activity';
import Profile from './src/screens/Profile';
import {NavigationContainer} from '@react-navigation/native';
import Status from './src/screens/Status';
import FriendProfile from './src/screens/FriendProfile';
import EditProfile from './src/screens/EditProfile';

const App = () => {
  const Stack = createNativeStackNavigator();
  const Tab = createBottomTabNavigator();
  const BottomTabScreen = () => {
    return (
      <Tab.Navigator>
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="Search" component={Search} />
        <Tab.Screen name="Activity" component={Activity} />
        <Tab.Screen name="Profile" component={Profile} />
      </Tab.Navigator>
    );
  };

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{headerShown: false}}>
        <Stack.Screen name="Bottom" component={BottomTabScreen} />
        <Stack.Screen name="Status" component={Status} />
        <Stack.Screen name="FriendProfile" component={FriendProfile} />
        <Stack.Screen name="EditProfile" component={EditProfile} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

이 상태에서 화면을 켜면 아래처럼 나옴.

하단 탭 스타일 변경하기

app.tsx파일의 BottomTabScreen부분 수정

const BottomTabScreen = () => {
    return (
      <Tab.Navigator
        screenOptions={({route}) => ({
          tabBarHideOnKeyboard: true,
          tabBarShowLabel: false,
          headerShown: false,
          tabBarStyle: {
            height: 70,
          },
        })}>
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="Search" component={Search} />
        <Tab.Screen name="Activity" component={Activity} />
        <Tab.Screen name="Profile" component={Profile} />
      </Tab.Navigator>
    );
  };

아래처럼 이미지가 변경되었음

3. 아이콘 사용하기

터미널에 입력해 라이브러리 설치

npm install react-native-vector-icons

안드로이드 적용

android > app > src > main 폴더에
assets > fonts 폴더를 만들어준다

node_modules > react-native-vector-icons > Fonts 폴더에 있는 파일을 모두 복사한 후, 위에 만든 폴더에 붙혀넣기한다.

ios 적용

https://github.com/oblador/react-native-vector-icons
위 링크 들어가서 List of all available fonts to copy & paste in Info.plist 라고 써진 부분 토글 눌러 펼친 후 복사하기

command+p 눌러 info.plist 검색하거나
(안될경우) ios > ReactNativeInstaApp > Info.plist 파일 들어가기

위에 복사한 글 false 아래 붙혀넣기하기

터미널에 아래 명령어 입력 : 어떤 모듈 설치 후 ios에서도 사용 가능하게 하려면 아래 명령어 입력해야 함

cd ios && pod install

npm run android와 npm run ios 둘다 입력하여 안드로이드와 ios 둘 다 이상없이 작동하는지 확인

4. 탭 아이콘 넣어주기

아이콘 목록 확인하기

https://oblador.github.io/react-native-vector-icons/

코드 넣기

Tab.Navigator 부분에 tabBarIcon 속성을 다음과 같이 넣어준다.

//상단에 반드시 import하기
import Ionic from 'react-native-vector-icons/Ionicons';

...


<Tab.Navigator
        screenOptions={({route}) => ({
          tabBarHideOnKeyboard: true,
          tabBarShowLabel: false,
          headerShown: false,
          tabBarStyle: {
            height: 70,
          },
          tabBarIcon: ({focused, size, color}) => {
            let iconName;
            if (route.name === 'Home') {
              iconName = focused ? 'home-sharp' : 'home-outline';
              size = focused ? size + 8 : size + 2;
            } else if (route.name === 'Search') {
              iconName = focused ? 'search' : 'ios-search-outline';
            } else if (route.name === 'Activity') {
              iconName = focused ? 'ios-heart' : 'ios-heart-outline';
            } else if (route.name === 'Profile') {
              iconName = focused ? 'ios-person-circle' : 'ios-person-outline';
            }

            return <Ionic name={iconName} size={size} color={color} />;
          },
        })}>

다음 그림과 같이 적용된다.
혹시 시뮬레이터상에서 적용이 안된다면
npm run ios , android를 해준다!