Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@TechnoKuRo(TechnoKuRo)

ReactNative 事始め(Ryzen対応版)

Last updated at Posted at 2020-01-27

参考

さて、ひとまず、参考URLをそのままトレース＋ちょっとつまづいたところを修正しながら進めました。
参考URLにならっていればできると思います。わざわざ私の記事を見るほど、違うところは些細なものですが、自分メモや、些細なことで挫折しないように記事にしてみました。

特に違うところは、Ryzen用の手順を少しだけ書いたところかな。

合わせ読みしてください。（参考URLが更新してるかもなので）

Chocolatery のインストール

https://chocolatey.org/install
Windows ならではのインストーラではなく、PowerShell(管理者として起動)を操作してインストールする。

Power.shell
Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

新しいクロスプラットフォームの PowerShell をお試しください https://aka.ms/pscore6

PS C:\Windows\system32> Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
Getting latest version of the Chocolatey package for download.
Getting Chocolatey from https://chocolatey.org/api/v2/package/chocolatey/0.10.15.
Downloading 7-Zip commandline tool prior to extraction.
Extracting C:\Users\user\AppData\Local\Temp\chocolatey\chocInstall\chocolatey.zip to C:\Users\user\AppData\Local\Temp\chocolatey\chocInstall...
Installing chocolatey on this machine
Creating ChocolateyInstall as an environment variable (targeting 'Machine')
  Setting ChocolateyInstall to 'C:\ProgramData\chocolatey'
WARNING: It's very likely you will need to close and reopen your shell
  before you can use choco.
Restricting write permissions to Administrators
We are setting up the Chocolatey package repository.
The packages themselves go to 'C:\ProgramData\chocolatey\lib'
  (i.e. C:\ProgramData\chocolatey\lib\yourPackageName).
A shim file for the command line goes to 'C:\ProgramData\chocolatey\bin'
  and points to an executable in 'C:\ProgramData\chocolatey\lib\yourPackageName'.

Creating Chocolatey folders if they do not already exist.

WARNING: You can safely ignore errors related to missing log files when
  upgrading from a version of Chocolatey less than 0.9.9.
  'Batch file could not be found' is also safe to ignore.
  'The system cannot find the file specified' - also safe.
chocolatey.nupkg file not installed in lib.
 Attempting to locate it from bootstrapper.
PATH environment variable does not have C:\ProgramData\chocolatey\bin in it. Adding...
警告: Not setting tab completion: Profile file does not exist at
'C:\Users\user\OneDrive\ドキュメント\WindowsPowerShell\Microsoft.PowerShell_profile.ps1'.
Chocolatey (choco.exe) is now ready.
You can call choco from anywhere, command line or powershell by typing choco.
Run choco /? for a list of functions.
You may need to shut down and restart powershell and/or consoles
 first prior to using choco.
Ensuring chocolatey commands are on the path
Ensuring chocolatey.nupkg is in the lib folder

とある記事だと、choco -version で確認することになっているが、本来は以下のようだ

PowerShell
PS C:\Windows\system32> choco -v
0.10.15

choco で node.js をインストール

PS C:\Windows\system32> choco install -y nodejs.install
Chocolatey v0.10.15
Installing the following packages:
nodejs.install
By installing you accept licenses for the packages.
Progress: Downloading nodejs.install 13.6.0... 100%

nodejs.install v13.6.0 [Approved]
nodejs.install package files install completed. Performing other installation steps.
Installing 64 bit version
Installing nodejs.install...
nodejs.install has been installed.
  nodejs.install may be able to be automatically uninstalled.
Environment Vars (like PATH) have changed. Close/reopen your shell to
 see the changes (or in powershell/cmd.exe just type `refreshenv`).
 The install of nodejs.install was successful.
  Software installed as 'msi', install location is likely default.

Chocolatey installed 1/1 packages.
 See the log for details (C:\ProgramData\chocolatey\logs\chocolatey.log).
Cmd.exe
C:\Users\user>node --version
v13.6.0

C:\Users\user>npm --version
6.13.4

Python インストール

PS C:\Windows\system32> choco install -y python2
Chocolatey v0.10.15
Installing the following packages:
python2
By installing you accept licenses for the packages.
Progress: Downloading python2 2.7.17... 100%

python2 v2.7.17 [Approved]
python2 package files install completed. Performing other installation steps.
Installing 64-bit python2...
python2 has been installed.
Installed to 'C:\Python27'
Adding C:\Python27 to PATH if needed
  python2 may be able to be automatically uninstalled.
Environment Vars (like PATH) have changed. Close/reopen your shell to
 see the changes (or in powershell/cmd.exe just type `refreshenv`).
 The install of python2 was successful.
  Software installed as 'msi', install location is likely default.

Chocolatey installed 1/1 packages.
 See the log for details (C:\ProgramData\chocolatey\logs\chocolatey.log).

React Native CLI

C:\Users\user>npm install -g react-native-cli
C:\Users\user\AppData\Roaming\npm\react-native -> C:\Users\user\AppData\Roaming\npm\node_modules\react-native-cli\index.js
+ react-native-cli@2.0.1
added 72 packages from 25 contributors in 10.06s

C:\Users\user>react-native --version
react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory

C:\Users\user>

JDK を choco でインストール

C:\Windows\system32>choco install -y jdk8
Chocolatey v0.10.15
Installing the following packages:
jdk8
By installing you accept licenses for the packages.
Progress: Downloading jdk8 8.0.231... 100%

jdk8 v8.0.231 [Approved]
jdk8 package files install completed. Performing other installation steps.
Downloading JDK from https://javadl.oracle.com/webapps/download/GetFile/1.8.0_231-b11/5b13a193868b4bf28bcb45c792fce896/windows-i586/jdk-8u231-windows-x64.exe
Installing jdk8...
jdk8 has been installed.
PATH environment variable does not have C:\Program Files\Java\jdk1.8.0_231\bin in it. Adding...
  jdk8 may be able to be automatically uninstalled.
Environment Vars (like PATH) have changed. Close/reopen your shell to
 see the changes (or in powershell/cmd.exe just type `refreshenv`).
 The install of jdk8 was successful.
  Software installed to 'C:\Program Files\Java\jdk1.8.0_231\'

Chocolatey installed 1/1 packages.
 See the log for details (C:\ProgramData\chocolatey\logs\chocolatey.log).

どうやら、chocoによるインストールだと、環境変数がすぐに適用されないようなので、cmd 再起動

C:\Windows\system32>java -version
java version "1.8.0_231"
Java(TM) SE Runtime Environment (build 1.8.0_231-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.231-b11, mixed mode)

Android Studio

基本デフォルトでインストールを進めるが、Install Type で Custom を選択する。

image.png

SDK を選択するとき、Android Virtual Device （Androidエミュレータ）をインストールします。
HAXM は、エミュレータを高速化する技術です。
CPUが intel 系ならば、何も気にせず、 Intel HAXM をインストールすればよいのですが、AMD系CPU（Ryzen）のPCの場合は、後程、別に　WHPX (Windows Hypervisor Platform) を入れることになります。
　-> 参考　https://webbibouroku.com/Blog/Article/amd-ryzen-android-emulator
　AMD系CPUの場合は、 HAXM のチェックボックスを外してNEXT。

　起動できるようになったら、SDK Manager でターゲットとなるAndroidバージョンのSDKは適宜インストールしましょう。

　AMD系PCUで、WHPXが必要なら、この後にインストール。

Android SDK パスの環境設定への追加

　インストールしたSDKの場所を環境設定に追加する必要があるそうなので追加
　参考リンク先だと、C直下にディレクトリがあるみたいなのですが、デフォルトで進めた私の場合、ユーザディレクトリ内にあるみたいなので、そいつを追加した
　場所はSDK Manager から確認できる
image.png

　ユーザ環境変数を設定したところ
image.png

　ユーザ環境変数のPathにも platform-tools を追加
image.png

　Path設定すれば、 adb が起動します。
　Path設定後にCMDの起動が必要ですよ。

C:\Users\ユーザ>adb
Android Debug Bridge version 1.0.41
Version 29.0.5-5949299
Installed as C:\Users\ユーザ\AppData\Local\Android\Sdk\platform-tools\adb.exe
～～～

SampleApp を生成して起動

npm で SampleApp を生成できるみたい
　なお、以下の参考URLに従っておきました。

react-nativeはバージョンにによって、うまく起動出来たアプリが急に起動出来なくなったり、ビルドする時エラーが出たりしたりなど、色んな問題が発生する可能性が高いです。したがって、react-nativeでアプリを開発する時は、下記のようにnpmコマンドでバージョンを固定して使うことをお勧めします。

C:\user\ユーザ>npm config set save-exact=true
   ╭────────────────────────────────────────────────────────────────╮
   │                                                                │
   │      New patch version of npm available! 6.13.4 -> 6.13.6      │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.13.6   │
   │               Run npm install -g npm to update!                │
   │                                                                │
   ╰────────────────────────────────────────────────────────────────╯

c:\user\ユーザ>react-native init SampleApp
This will walk you through creating a new React Native project in C:\Users\ユーザ\SampleApp
'yarn' �́A����R�}���h�܂��͊O���R�}���h�A
����”\�ȃv���O�����܂��̓o�b�` �t�@�C���Ƃ��ĔF������Ă��܂���B
Installing react-native...
Consider installing yarn to make this faster: https://yarnpkg.com
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 core-js@1.2.7: 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.

> core-js@2.6.11 postinstall C:\Users\ユーザ\SampleApp\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 notice created a lockfile as package-lock.json. You should commit this file.
npm WARN react-native@0.61.5 requires a peer of react@16.9.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ react-native@0.61.5
added 646 packages from 414 contributors and audited 66241 packages in 81.482s

5 packages are looking for funding
  run `npm fund` for details

found 4 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
info Setting up new React Native app in C:\Users\ユーザ\SampleApp
info Adding required dependencies
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ react@16.9.0
added 1 package and audited 67240 packages in 28.792s

5 packages are looking for funding
  run `npm fund` for details

found 4 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
info Adding required dev dependencies
npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()
npm WARN eslint-plugin-react-native@3.6.0 requires a peer of eslint@^3.17.0 || ^4 || ^5 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-react@7.12.4 requires a peer of eslint@^3.0.0 || ^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @typescript-eslint/parser@1.13.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @typescript-eslint/eslint-plugin@1.13.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ babel-jest@24.9.0
+ eslint@6.8.0
+ react-test-renderer@16.9.0
+ jest@24.9.0
+ metro-react-native-babel-preset@0.56.4
+ @babel/core@7.8.3
+ @babel/runtime@7.8.3
+ @react-native-community/eslint-config@0.0.5
added 285 packages from 271 contributors, updated 3 packages and audited 957285 packages in 74.91s

19 packages are looking for funding
  run `npm fund` for details

found 4 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

  Run instructions for iOS:
    • cd C:\Users\ユーザ\SampleApp && npx react-native run-ios
    - or -
    • Open SampleApp\ios\SampleApp.xcodeproj in Xcode or run "xed -b ios"
    • Hit the Run button

  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd C:\Users\ユーザ\SampleApp && npx react-native run-android

スペックによるところでしょうけど、5分くらいかかりました。
文字化けしていますが、とりあえず気にせずに進めました。なんて書いてあったんだろう？

AndroidStudioでエミュレータを起動させる。
カレントをSampleAppに変更して、SampleAppを起動してみる。

c:\users\ユーザ>cd SampleApp
c:\users\ユーザ>npm run android
> SampleApp@0.0.1 android C:\Users\ユーザ\SampleApp
> react-native run-android

info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 864 file(s) to forward-jetify. Using 8 workers...
info Starting JS server...
info Installing the app...
Downloading https://services.gradle.org/distributions/gradle-5.5-all.zip
.................................................................................................................................

Welcome to Gradle 5.5!

Here are the highlights of this release:
 - Kickstart Gradle plugin development with gradle init
 - Distribute organization-wide Gradle properties in custom Gradle distributions
 - Transform dependency artifacts on resolution

For more details see https://docs.gradle.org/5.5/release-notes.html

Starting a Gradle Daemon (subsequent builds will be faster)

> Configure project :app
File C:\Users\ユーザ\.android\repositories.cfg could not be loaded.
Checking the license for package Android SDK Build-Tools 28.0.3 in C:\Users\ユーザ\AppData\Local\Android\Sdk\licenses
License for package Android SDK Build-Tools 28.0.3 accepted.
Preparing "Install Android SDK Build-Tools 28.0.3 (revision: 28.0.3)".
"Install Android SDK Build-Tools 28.0.3 (revision: 28.0.3)" ready.
Installing Android SDK Build-Tools 28.0.3 in C:\Users\ユーザ\AppData\Local\Android\Sdk\build-tools\28.0.3
"Install Android SDK Build-Tools 28.0.3 (revision: 28.0.3)" complete.
"Install Android SDK Build-Tools 28.0.3 (revision: 28.0.3)" finished.
C:\Users\ユーザ\.gradle\caches\modules-2\files-2.1\com.squareup.okhttp3\okhttp\3.12.1\dc6d02e4e68514eff5631963e28ca7742ac69efe\okhttp-3.12.1.jar: D8: Type `org.conscrypt.Conscrypt` was not found, it is required for default or static interface methods desugaring of `java.security.Provider okhttp3.internal.platform.ConscryptPlatform.getProvider()`

> Task :app:installDebug
09:24:20 V/ddms: execute: running am get-config
09:24:20 V/ddms: execute 'am get-config' on 'emulator-5554' : EOF hit. Read: -1
09:24:20 V/ddms: execute: returning
Installing APK 'app-debug.apk' on 'Pixel_3a_Edited_API_29(AVD) - 10' for app:debug
09:24:20 D/app-debug.apk: Uploading app-debug.apk onto device 'emulator-5554'
09:24:20 D/Device: Uploading file onto device 'emulator-5554'
09:24:20 D/ddms: Reading file permision of C:\Users\ユーザ\SampleApp\android\app\build\outputs\apk\debug\app-debug.apk as: rwx------
09:24:20 V/ddms: execute: running pm install -r -t "/data/local/tmp/app-debug.apk"
09:24:21 V/ddms: execute 'pm install -r -t "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1
09:24:21 V/ddms: execute: returning
09:24:21 V/ddms: execute: running rm "/data/local/tmp/app-debug.apk"
09:24:21 V/ddms: execute 'rm "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1
09:24:21 V/ddms: execute: returning
Installed on 1 device.

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

BUILD SUCCESSFUL in 3m 13s
27 actionable tasks: 27 executed
info Connecting to the development server...
8081
info Starting the app on "emulator-5554"...
Starting: Intent { cmp=com.sampleapp/.MainActivity }

やっぱ5分くらいはかかりました。

image.png

はい。起動しましたね。

画面にもちょっといじってみろや、的なことが書いてあるので、こっからいろいろいじってみましょ。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?