쿠...sal: [컴][안드로이드] React Native App

updated, 2019-08-11

reddit 에 올라온 댓글 (Flutter: A Framework to Surpass React Native : programming) 을 보면, react native 의 단점을 엿볼 수 있다. 더불어 Flutter 의 장점도 알 수 있다.

react native library 업데이트가 어렵다.(https://github.com/facebook/react-native/issues/23886#issuecomment-472946523)
간단한 앱을 만든 개발자도 반년정도 써봤는데, 최악이라고(horrible)

글을 보면 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 을 하나 만들어 줘야 한다. 방법은 아래와 같다.

react native - Unable to load script from assets index.android.bundle on windows - Stack Overflow

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

React Native App - react-navigation

debugger

쿠...sal: [컴][안드로이드] React Native App Debugger 설치 - vscode

References

Getting Started · React Native

쿠...sal

[컴][안드로이드] React Native App