Help us understand the problem. What is going on with this article?

React Native × Typescript のインストールをやってみた

image.png

0. Prepare Today's environment

Windows 10
Node 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/joi@15.1.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/address@2.1.4: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated core-js@2.6.11: 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 fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: 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

> core-js@2.6.11 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 fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN @react-native-community/cli@4.10.1 requires a peer of react-native@^0.62.0-rc.0 but none is installed. You must install peer dependencies yourself.

+ @react-native-community/cli@4.10.1
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が対応。
image.png

react-native-community/react-native-template-typescriptのGitHubページでReact Nativeとの互換関係を確認。
インストールされるreact-nativeは0.62.xなのでreact-native-template-typescriptは6.4.xが対応。
image.png

3. Create react-native-template-typescript project

React Native × Typescriptのテンプレートでプロジェクトを作成。
ちなみに、プロジェクト名には - (ハイフン)とか使えない文字があるので注意。

npx react-native init onlibrary_frontend --template react-native-template-typescript@6.4.4
4. Check Android SDK folder

Android Studioのインストール時に格納されたAndroid SDKのフォルダを確認。
image.png

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を作成して起動。
作成する仮想モバイルデバイスは任意。
念のため、起動前にデータを削除。
image.png

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

成功なら、デフォルト画面が表示。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away