https://yuddomack.tistory.com/entry/1React-Native-%EC%84%A4%EC%B9%98%EC%99%80-%EC%8B%A4%ED%96%89hello-world?category=754156 (이하 링크 문서) - 이 링크에 너무 잘 정리되어 있어 따라하면서 배우는 중입니다. (글쓴이님. 감사합니다. :)


https://wix.github.io/react-native-navigation/#/docs/Installing (이하 공식 문서)


아래 내용은 다음과 같은 환경에서 진행된 내용입니다. 

OS 

 macOS Mojave 10.14.1

 Android Studio 

 3.3.1

 XCode 

 10.1

 nodejs 

 10.13.0

 react 

 16.6.3

 react-native

 0.58.6

 react-native-navigation

 2.13.1



일단 링크문서의 1~5 chapter까지는 좋은 가이드가 되니 꼭 참고하시기 바랍니다.


chapter 6에서는 react native navigation을 다루는데, 최신 버전에서 변경된 내용들이 있어 별도로 정리를 해둡니다.


react-native-navigation을 설치하고 나면 low severity vulnerabilities에 대한 경고를 출력하고 npm audit fix(npm v6)를 실행하라는 안내가 나올 수 있습니다.


이를 실행하면 react-native-navigation을 사용하기 위해 필요한 몇몇 module의 버전을 조정하는 작업이 진행됩니다.


Android/iOS 세팅은 공식문서의 내용 중 수동 링크를 기준으로 정리하며 부족한 샘플 코드를 추가하였습니다. 왜 수동 링크 작업을 해야 하는지는 링크 문서에 잘 나와 있으니 참고하시기 바랍니다.


[RNN iOS 세팅]


우선 링크 문서 6장 의 내용을 참고하여 xcode에 react native navigation을 추가합니다. 공식문서보다 이 링크가 좀 더 명확히 정리되어 있습니다.


AppDelegate.m을 수정할 때 아래와 같은 에러가 발생할 수 있습니다.


 React/RCTBundleURLProvider.h file not found

 Use of undeclared identifier 'rootView'


이와 관련된 해결책은 공식 문서에 있으며, XCode에서 프로젝트를 선택 후, 메뉴 Product >> Scheme 에서 react native navigation을 선택하면 사라집니다.


링크 문서에서는 공식 문서와는 달리 RCCManager.h를 사용하도록 코드가 되어 있는데, 이전 버전의 내용이니, 아래 내용을 참고하시면 됩니다.


** 중간에 여러 코드 및 세팅을 테스트를 위해 수정하면서 Systrace.setEnable  관련된 에러가 ios 에뮬레이터에서 발생. 검색해보니 방법없으니 다시 설치하라는 내용만 있어 프로젝트 삭제 후 다시 설치. -0-a


관련 코드들은 공식 문서의 내용으로 적용하면 됩니다. 


(( 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


XCode를 위한 세팅은 이것으로 끝입니다.


[RNN Android 세팅]


** 간간히 이런 작업들을 할 때 느끼는 거지만 아래 링크 문서의 샘플 코드에서 rootProject.projectDir 처럼, 저런 정의된 값을 어디서 찾아야 하는지 난감할 때가 많다. 기존에 android studio를 많이 다뤄 보신 분들은 쉽게 알 수도 있을 듯 한데, 처음 볼 때는 뜬금없어서.. 특히 javascript 프로젝트 할 때는 predefined keyword가 아닌 것들이 (intelligence를 지원하지 않는 ide에서) class의 public 맴버처럼 접근하는걸 볼 때마다 이게 어디에 정의되어 있는지, 올바르게 사용된건지 확인하기가 만만치 않은 듯 합니다. 자꾸 하다보니 그러려니 하긴 하지만...


아래 네 개의 gradle 파일을 수정할 때는 공식 문서를 참고하고, 자신의 android studio 버전에 따라 문서의 내용과 다를 수 있으니, 그에 맞추어 수정해야 합니다.

(( android/settings.gradle ))

(( android/gradle/wrapper/gradle-wrapper.properties ))

(( android/build.gradle ))

(( android/app/build.gradle ))


아래 두 코드를 공식 문서를 참고하여 수정 합니다.


(( MainActivity.java ))

(( MainApplication.java ))


그 다음으로 React Navtive 의 버전을 타겟팅하는 설정이 android/app/build.gradle에 추가해야 합니다. 별도 항목으로 제외된 것을 보면 중요한 항목인 듯 하네요. package.json 파일을 확인하니 제가 사용하는 버전은 0.58.6인 상태입니다.


저는 missingDimensionStrategy "RNN.reactNativeVersion", "reactNative57_5"로 설정을 추가 했습니다. 


공식 문서의 내용 1~8가지 따라하면서 주의할 점은 app/build.gradle의 dependencies를 추가할 때 특정 버전 대신 "${rootProject.ext.supportLibVersion}"을 설정하세요. 버전이 맞지 않아 빌드 실패 하는 경우가 종종 있었습니다. 

(https://github.com/wix/react-native-navigation/issues/3419 를 참고하세요.)







[about setting command line tools ]


react-native run-ios 로 실행을 시도했을 때 command line tools 없다는 에러가 발생하는데, 


xcode-select --install로 설치를 해도 반응이 없다. 


단순히 설치만 해서는 안되고 xcode preferences에 설정을 해야 한다. 


XCode > Preferences > Locations 화면에서 Command Line Tools 이 비어 있다면 이를 설정하면 된다.

--------------------------------------------------------------------------------------------------------

when it occurs an error there is no command line tools you run "react-native run-ios" command


in my case, it doesn't work even I installed the tool like this "xcode-select --install"


the reason is ... you have to set an information in XCode > Preferences > Locations.





[8081 port problem]


sudo lsof -i :8081 로 해당 프로세스 찾아서 kill.

--------------------------------------------------------------------------------------------------------

Find a process using the port 8081 like this " sudo lsof -i : 8081" and kill it.



[Build failed]

Entry, ":CFBundleIdentifier", Does Not Exist


signing 관련 이슈. 생성한 프로젝트의 xcodeproj 로 xcode 실행 후 General > Signing 설정. 이후 빌드하면 관련 에러없이 애뮬레이터로 실행됨.--------------------------------------------------------------------------------------------------------

The reason is about signing. You have to set a signing information in XCode project > General/Signing on XCode project that you made.



[error : npm update check failed]


sudo chown -R $USER:$(id -gn $USER) /Users/YOUR_USERNAME_HERE/.config





+ Recent posts