React Native × Typescript 설치를 시도했습니다.

0. Prepare Today's environment

Windows 10
노드 v12.18.2
Android Studio 3.5
→Android Studio는 Android SDK와 Android Virtual Device를 사용하기 위해.

1. Install react-native-community/cli

「react-native-community/cli」는 React Native × Typescript 템플릿을 제공해 주어 편리합니다.

$ npm install -g @react-native-community/cli
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
C:\Users\takas\AppData\Roaming\npm\react-native -> C:\Users\takas\AppData\Roaming\npm\node_modules\@react-native-community\cli\build\bin.js

> [email protected] postinstall C:\Users\takas\AppData\Roaming\npm\node_modules\@react-native-community\cli\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\@react-native-community\cli\node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN @react-native-community/[email protected] requires a peer of react-native@^0.62.0-rc.0 but none is installed. You must install peer dependencies yourself.

+ @react-native-community/[email protected]
added 614 packages from 353 contributors in 37.963s

2. Check compatible versions between react-native-community/cli & react-native-community/react-native-template-typescript

react-native-community/cli의 GitHub 페이지에서 React Native와의 호환성을 확인.
설치된 react-native-community/cli는 4.10.1이므로 react-native는 0.62.x가 대응.


react-native-community/react-native-template-typescript의 GitHub 페이지에서 React Native와의 호환성을 확인.
인스톨 되는 react-native는 0.62.x이므로 react-native-template-typescript는 6.4.x가 대응.


3. Create react-native-template-typescript project

React Native × Typescript 템플릿으로 프로젝트를 만듭니다.
덧붙여서, 프로젝트명에는 -(하이픈)라든지 사용할 수 없는 문자가 있으므로 주의.

npx react-native init onlibrary_frontend --template [email protected]

4. Check Android SDK folder

Android Studio를 설치할 때 저장된 Android SDK 폴더를 확인합니다.


5. Create local.properties

프로젝트 바로 아래 android 폴더 아래에 local.properties를 만듭니다.
Android SDK의 저장처를 기재.
덧붙여서 local.properties 대신 Windows 환경 변수로 ANDROID_SDK_ROOT를 작성해도 OK.

$ cat android/local.properties
sdk.dir = C:\\Users\\takas\\AppData\\Local\\Android\\Sdk

6. Launch Android Virtual Device

Android Studio를 설치할 때 함께 제공되는 Android Virtual Device를 만들고 시작합니다.
만들 가상 모바일 장치는 임의.
만약을 위해, 시작하기 전에 데이터를 삭제.


7. Check Android Virtual Device ID

부팅된 가상 모바일 장치의 ID를 확인합니다.

$ adb devices
List of devices attached
emulator-5554   device

8. Run react-native-template-typescript project

React Native의 실행은 프로젝트 바로 아래에서 "react-native run-android"의 명령 일발.
부팅 중인 가상 모바일 장치의 ID에 대한 조작이 표준 출력으로 흘러 표시.

takas@DESKTOP-5GP9BNU MINGW64 /c/workspace/onlibrary/onlibrary_frontend (master)
$ react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 960 file(s) to forward-jetify. Using 4 workers...
info Starting JS server...
info Installing the app...

> Task :app:stripDebugDebugSymbols UP-TO-DATE
Compatible side by side NDK version was not found.

> Task :app:installDebug
09:03:30 V/ddms: execute: running am get-config
09:03:30 V/ddms: execute 'am get-config' on 'emulator-5554' : EOF hit. Read: -1
09:03:30 V/ddms: execute: returning
Installing APK 'app-debug.apk' on 'Nexus_6_API_28(AVD) - 9' for app:debug
09:03:30 D/app-debug.apk: Uploading app-debug.apk onto device 'emulator-5554'
09:03:30 D/Device: Uploading file onto device 'emulator-5554'
09:03:30 D/ddms: Reading file permision of C:\workspace\onlibrary\onlibrary_frontend\android\app\build\outputs\apk\debug\app-debug.apk as: rwx------
09:03:32 V/ddms: execute: running pm install -r -t "/data/local/tmp/app-debug.apk"
09:04:09 V/ddms: execute 'pm install -r -t "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1
09:04:09 V/ddms: execute: returning
09:04:09 V/ddms: execute 'rm "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1
09:04:09 V/ddms: execute: returning
Installed on 1 device.

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.0.1/userguide/command_line_interface.html#sec:command_line_warnings

BUILD SUCCESSFUL in 1m 0s
27 actionable tasks: 2 executed, 25 up-to-date
info Connecting to the development server...
info Starting the app on "emulator-5554"...
Starting: Intent { cmp=com.onlibrary_frontend/.MainActivity }

9. Display React Native App

성공하면 기본 화면이 표시됩니다.