리액트네이티브 react-native-navigation v2 개발환경 설정 (ios) #1

React-native 에서 화면 간의 이동을 하기위해서는 사용하는 대표적인? 방법으로는 react-navigation 과 react-native-navigation  있다. 이중에서 react-native-navigation 사용하기 위해서 개발 환경을 설정해보기로 한다. 

1. RN프로젝트를 생성하고 해당폴더에서 아래명령어로 library를 설치한다.

npm install --save react-native-navigation

2.  Xcode를 실행한후 RN프로젝트를 Open 하고 프로젝트 네비게이션을 선택한후 

Libraries > Add files to "프로젝트명" 을 선택한다. 

node_modules/react-native-navigation/lib/ios/ReactNativeNavigation.xcodeproj 를 선택한다.

3. Project Navigator (왼쪽 패널)에서 프로젝트 (위)를 클릭 한 다음 대상 행 (오른쪽 창의 왼쪽 열에있는 "프로젝트 및 대상 목록")을 클릭하고 Build Phases 탭 라이브러리가있는 링크 바이너리 섹션에 libReactNativeNavigation.a를 추가한다.

4. IOS 설정에 경우  AppDelegate.m 파일을 편집해야한다. AppDelegate.m 파일을 선택하고 파일 내용을 아래와 같이 수정한다.

#import "AppDelegate.h"
 
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
 #import <ReactNativeNavigation/ReactNativeNavigation.h>
 
@implementation AppDelegate
 
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  [ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];
  
  return YES;
}
 
@end
 

파일 선택시  RCTBundleURLProvider.h file not fonud  에러메시지가 나타날경우 아래와 같이조치를 해준다. 프로젝트 폴더에 해당명렁어를 실행하고 

npm install -g react-native-git-upgrade

Xcode 에서 Product -> Scheme -> Manage Schemes 선택하고 + 기호를 선택하여 React를 추가한다음 Shread 열에 체크를 선택한다. 

이때 Target을 React로 선택한다.

참고 https://wix.github.io/react-native-navigation/#/docs/Installing

유트브에서 React Native Navigation 설치 영상을 참고해도 좋다.