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

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


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:
npm WARN deprecated urix@0.1.0: Please see
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 ( ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:

Also, the author of core-js ( ) 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/react-native-template-typescriptのGitHubページでReact Nativeとの互換関係を確認。

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のフォルダを確認。

5. Create

Android SDKの格納先を記載。

$ cat android/
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


$ adb devices
List of devices attached
emulator-5554   device
8. Run react-native-template-typescript project

React Nativeの実行はプロジェクト直下で「react-native run-android」のコマンド一発。

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.

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