updated, 2019-08-11
reddit 에 올라온 댓글 (
Flutter: A Framework to Surpass React Native : programming) 을 보면, react native 의 단점을 엿볼 수 있다. 더불어 Flutter 의 장점도 알 수 있다.
글을 보면 Flutter 가 여러모로 나아보인다.
React Native 시작하기
Getting Started · React Native >> Building Projects with Native Code >> OS 선택 및 target OS 선택
Windows 에서 Android App 을 만드는 경우에 대한 글이다. 각각의 경우에 대해서는
ref. 1 을 참고하자.
설치
- Node >= 8.3
- Python2
- JDK >= 8
- React Native command line interface :
npm install -g react-native-cli
- Android Studio 설치, 아래 component 를 전부 설치하자.
- Android SDK
- Android SDK Platform
- Performance (Intel ® HAXM)
- Android Virtual Device
- Android 8.1(Oreo) SDK
- Android Studio > Tools > SDK manager
- Show Package Details 를 클릭 해서, Android 8.1 아래서 다음것들을 check 하고 설치한다.(그림. 1)
- Android SDK Platform 27
- Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image
- 제어판 > 시스템 > 고급시스템설정 (시스템속성) > 고급탭 > 환경변수
- ANDROID_HOME 이란 변수를 설정해 준다. Android SDK 의 path 를 설정해 주면 된다. path 는 Android Studio 의 Preferences 에서 찾을 수 있다.(Appearance & Behavior → System Settings → Android SDK.)
 |
| 그림. 1 |
 |
| 그림. 2 |
project 시작하기
project 를 위한 folder 를 하나 만들자. 여기서는 newApp 이라는 이름을 사용하려 한다. 아래처럼 실행한다.
react-native init newApp
아래와 같은 파일들이 만들어진다.
android\
ios\
node_modules\
.babelrc
.buckconfig
.flowconfig
.gitattributes
.gitignore
.watchmanconfig
App.js
app.json
index.js
package.json
package-lock.json
실행
먼저 Android phone 을 USB 로 컴퓨터에 연결하고
USB debugging 이 가능하게 설정해준다.
그다음, 아래처럼 run-android 를 하면 자동으로 build 를 하고 app 을 실행한다.
cd newApp
react-native run-android
Error: Unable to load script from assets index.android.bundle
위처럼 하면, asset bundle 을 load 할 수 없다고 error 가 보인다. 그래서 asset 을 하나 만들어 줘야 한다. 방법은 아래와 같다.
c:\a\programming\nodejs\reactnative\newApp>react-native bundle --platform android --dev false --entry-file index.js --bundle-output android\app\src\main\assets\index.android.bundle --assets-dest android\app\src\main\res
Loading dependency graph, done.
bundle: Writing bundle output to: android\app\src\main\assets\index.android.bundle
bundle: Done writing bundle output
이러면 아래 경로에 index.android.bundle 가 만들어진다.
<newApp>\android\app\src\main\assets\index.android.bundle
이제다시
react-native run-android 를 하면 된다. 참고로, App.js 를 수정한 후에도 다시 위의
react-native bundle ...를 해주고 난 후 run-android 를 해야 한다.
with vscode
참고로 build 시에 vscode 를 열어놓으면 access permission 때문에 작업이 제대로 안되는 경우가 있다. 참고하자.
결과
제대로 실행이되면 아래와 같은 화면이 보인다.
Typescript 사용
이것은 tsx를 js 대신에 사용할 수 있다. 즉, react-native bundle 를 할 때 tsx 를 js로 변경해서 bundling 을 해준다. 그래서 현재 .tsx 에 대해서 따로 .js 파일을 만들지 않는다.
react-native init MyApp --template typescript && node MyApp/setup.js
React-navigation
debugger
References
- Getting Started · React Native
