[React Native] React Navigation V5

지난 Post 와 관련하여 React Navigation V5 설치에 관해 다시 정리한다.

 

먼저

react-native init 프로젝트명

으로 React native 기본 App 을 생성한다.

 

cd 프로젝트명

으로 생성한 App 의 Directory 로 이동한다.

 

cd ios

podfile 의 내용을 다음과 같이 수정한다.

  #use_flipper! <== 주석처리
  use_flipper!({ 'Flipper-Folly' => '2.3.0' }) # <= 추가
  
  post_install do |installer|
    flipper_post_install(installer)
  end

xcode 12.4 를 사용하는 경우에 위와 같이 처리해주어야 Build 시 오류가 발생하지 않는다.

그리고 pod 를 Update 해준다.

pod update

pod update 이전에 npm install 이 실행되어야 할 수도 있다.

npm install
npm install @react-navigation/native --save
npm install @react-navigation/stack --save

//추가 navigation
npm install @react-navigation/drawer
npm install @react-navigation/bottom-tabs
npm install @react-navigation/material-top-tabs react-native-tab-view

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

cd ios
pod install

다음과 같이 설치가 되었다면 코드를 작성하고 실행해 본다.

// Screens/HomeScreen.js

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

const HomeScreen = (props) => {
    return (
        <View
            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
        >
            <Text>Home Screen</Text>
        </View>
    );
};

export default HomeScreen;

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

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import HomeScreen from './Screens/HomeScreen';

const Stack = createStackNavigator();

const App = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Home" component={HomeScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
};
export default App;

react-native run-ios 또는 npm run ios

 

행복한 고수되십시오.

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\