Jump To VB.NET

지난 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 ))*

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

React Native 개발을 시도하면서 많은 시행착오를 겪고 있습니다.

그 중 가장 큰 하나는 "Big Sur" 입니다.

최신 맥북을 샀다고 즐거워 한 것은 잠시 였습니다.

잘 된다고 하는 소스를 받아 실행을 시켜보면 여지없이 오류가 났으며

Googling 을 통해 안 것은 "Big Sur" 에 관한 것이었습니다.

"Big Sur" 가 나오면서 XCode 버전업이 되었으며

그 버전업으로 인해 Third Party 중 몇몇 package 들이 오류를 일으키고 있었습니다.

그 중 디버깅에 사용하는 Flipper 의  Folly 가 가장 자주 만나는 녀석입니다.

해결방법은 ios directory 에 있는 Podfile 의 내용을 다음과 같이 수정하는 것입니다.

  #use_flipper!
  use_flipper!({ 'Flipper-Folly' => '2.3.0' })

그리고 Navigator 사용하는데 오랜시간을 보내게 되었습니다.

createStackNavigator 와 createAppContainer 때문인데요.

문제는 다음의 import 문입니다.

import { createStackNavigator, createAppContainer } from 'react-navigation';

하지만 오류를 만나게 됩니다.

(오류를  capture 하지 않았네요... 귀차니즘 발동으로 그냥 넘어가겠습니다. ^^;)

내용은 대충 "createStatckNavigator 는 react-navigation-stack 으로 옮겨졌다.

그럼 당연히 

npm install react-navigation-stack --save

로 설치하고 아래와 같이 바꿔줘야겠지요?

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

그런데 이상하게도 다른 오류들이 나타납니다.

react-native-gesture-handler 가 없다느니 react-native-safe-area-context 가 없다느니...

당연히 다시 설치해주고 Rebuild 해줘도 오류가 나옵니다.

아항... 메모장에 옮겨놓은 오류가 있어서 붙여놓습니다.

여튼... 

하라는 대로 해봤지만 별 소용이 없습니다.

서너시간은 npm install, npm uninstall  로 보내버렸네요... ㅡㅡ;

해당부분을 모두 지우고 다시 설치를 계속 반복하다가...

차근차근 해보자는 생각에 

다음과 같이 진행했습니다.

다음 공식 page 를 참고했구요.

reactnavigation.org/docs/4.x/getting-started

reactnavigation.org/docs/4.x/hello-react-navigation

먼저 react-navigation 과 관련된 모든 package 들은 uninstall 해줍니다.

그리고 ios directory 로 이동하여 

pod update 해줍니다.

cd ios
pod update
cd ..

그리고 다음과 같은 실행해 줍니다.

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

npm install react-navigation-stack @react-native-community/masked-view react-native-safe-area-context --save

@react-native-community/masked-view react-native-safe-area-context 부분은 중복되지만 그냥 실행해줬습니다.

cd ios
pod install
cd ..

이 부분을 찾아 내느라 몇번의 시행착오를 거쳤지만 결국엔 오류없는 화면을 봤습니다. ^^;

IOS 개발도 낯선대다가 Expo 사용하지 않고 React Native CLI 를 사용하여 작업하려니 시행착오가 많네요.

얼마나 많은 퀘스트 들이 기다리고 있을지 기대가 됩니다.

제가 잘못알고 있는 점이 있다면 알려주십시오.

여러분의 소중한 작은 충고가 React Native 개발자로 나아가는데 큰 도움이 되리라 생각합니다.

행복한 고수되십시오.

woojja ))*

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

Email Html 을 작성해 주는 Page 입니다.

htmlemail.io/inline/

행복한 고수되셔요.

woojja ))*

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