サンプル集  >  ReactNative  >  React Native CLIをインストール
React Native CLIをインストール
2021/11/07

React Native CLIをインストールします。

◆環境
OS Windows 10 Home 20H2 64bit OS x64 プロセッサ

PowerShellでのyarnを使ったReact Native CLIのインストールコマンドです。

参考:yarnインストール

yarn global add react-native-cli

PowerShellを管理者で実行しコマンドを実行します。

PS C:\Windows\system32> yarn global add react-native-cli
yarn global v1.22.15
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "react-native-cli@2.0.1" with binaries:
      - react-native
Done in 7.17s.
PS C:\Windows\system32>

プロジェクトの作成

React Nativeのプロジェクトを作成するコマンドです。

react-native.cmd init (プロジェクト名) --template typescript

React Nativeのプロジェクトを作成したいフォルダに移動してコマンドを実行します。

PS C:\src> react-native.cmd init RNTest --template typescript
This will walk you through creating a new React Native project in C:\
src\RNTest
Using yarn v1.22.15
Installing react-native...
yarn add v1.22.15
info No lockfile found.
[1/4] Resolving packages...
warning react-native > @react-native-community/cli-platform-ios > xco
de > uuid@3.4.0: Please upgrade  to version 7 or higher.  Older ver
sions may use Math.random() in certain circumstances, which is know
n to be problematic.  See https://v8.dev/blog/math-random for detai
ls.
warning react-native > @react-native-community/cli > @react-native-co
mmunity/cli-plugin-metro > metro > metro-minify-uglify > uglify-es@
3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3
.13.0
warning react-native > @react-native-community/cli > @react-native-co
mmunity/cli-plugin-metro > metro-core > jest-haste-map > sane@4.1.0
: some dependency vulnerabilities fixed, support for node < 10 drop
ped, and newer ECMAScript syntax/features added
warning react-native > react-native-codegen > jscodeshift > micromatc
h > snapdragon > source-map-resolve > resolve-url@0.2.1: https://gi
thub.com/lydell/resolve-url#deprecated
warning react-native > react-native-codegen > jscodeshift > micromatc
h > snapdragon > source-map-resolve > urix@0.1.0: Please see https:
//github.com/lydell/urix#deprecated
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "win32" is incompatible with this m
odule.
info "fsevents@2.3.2" is an optional dependency and failed compatibil
ity check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-native > use-subscription@1.5.1" has unmet peer depend
ency "react@^16.8.0 || ^17.0.0".
warning "react-native > metro-react-native-babel-transformer@0.66.2" 
has unmet peer dependency "@babel/core@*".
warning "react-native > react-native-codegen > jscodeshift@0.11.0" ha
s unmet peer dependency "@babel/preset-env@^7.1.6".
warning " > react-native@0.66.2" has unmet peer dependency "react@17.
0.2".
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 376 new dependencies.
info Direct dependencies
└─ react-native@0.66.2
info All dependencies
├─ @babel/code-frame@7.16.0
├─ @babel/compat-data@7.16.0
:
略(372行)
:
├─ y18n@4.0.3
└─ yargs-parser@18.1.3
Done in 33.06s.
info Setting up new React Native app in C:\src\RNTest
info Fetching template react-native-template-typescript...
(node:8912) Warning: Accessing non-existent property 'padLevels' of m
odule exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was create
d)
yarn add v1.22.15
[1/4] Resolving packages...
warning @react-native-community/eslint-config > babel-eslint@10.1.0: 
babel-eslint is now @babel/eslint-parser. This package will no long
er receive updates.
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "win32" is incompatible with this m
odule.
info "fsevents@2.3.2" is an optional dependency and failed compatibil
ity check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-native > react-native-codegen > jscodeshift@0.11.0" ha
s unmet peer dependency "@babel/preset-env@^7.1.6".
warning "@react-native-community/eslint-config > @typescript-eslint/e
slint-plugin > tsutils@3.21.0" has unmet peer dependency "typescrip
t@>=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".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 202 new dependencies.
info Direct dependencies
├─ @react-native-community/eslint-config@2.0.0
├─ eslint@7.14.0
├─ jest@26.6.3
├─ react-native-template-typescript@6.8.2
├─ react-test-renderer@17.0.2
└─ react@17.0.2
info All dependencies
├─ @babel/plugin-syntax-async-generators@7.8.4
├─ @babel/plugin-syntax-bigint@7.8.3
:
略(198行)
:
├─ xmlchars@2.2.0
└─ yallist@4.0.0
Done in 20.07s.
info Adding dependencies for the project...
info No additional dependencies.
info Adding develop dependencies for the project...
info No additional develop dependencies.
yarn remove v1.22.15
[1/2] Removing module react-native-template-typescript...
[2/2] Regenerating lockfile and installing missing dependencies...
info fsevents@2.3.2: The platform "win32" is incompatible with this m
odule.
info "fsevents@2.3.2" is an optional dependency and failed compatibil
ity check. Excluding it from installation.
warning "react-native > react-native-codegen > jscodeshift@0.11.0" ha
s unmet peer dependency "@babel/preset-env@^7.1.6".
warning "@react-native-community/eslint-config > @typescript-eslint/e
slint-plugin > tsutils@3.21.0" has unmet peer dependency "typescrip
t@>=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".
success Uninstalled packages.
Done in 1.93s.
info Adding required dependencies
yarn add v1.22.15
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "win32" is incompatible with this m
odule.
info "fsevents@2.3.2" is an optional dependency and failed compatibil
ity check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-native > react-native-codegen > jscodeshift@0.11.0" ha
s unmet peer dependency "@babel/preset-env@^7.1.6".
warning "@react-native-community/eslint-config > @typescript-eslint/e
slint-plugin > tsutils@3.21.0" has unmet peer dependency "typescrip
t@>=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".
[4/4] Building fresh packages...
success Saved 0 new dependencies.
Done in 1.96s.
info Adding required dev dependencies
yarn add v1.22.15
[1/4] Resolving packages...
[2/4] Fetching packages...
warning Pattern ["@babel/core@^7.16.0"] is trying to unpack in the sa
me destination "C:\\Users\\xxxxx\\AppData\\Local\\Yarn\\Cache\\v6\\
npm-@babel-core-7.16.0-c4ff44046f5fe310525cc9eb4ef5147f0c5374d4-int
egrity\\node_modules\\@babel\\core" as pattern ["@babel/core@^7.14.
0","@babel/core@^7.14.0","@babel/core@^7.14.0","@babel/core@^7.14.0
","@babel/core@^7.1.6","@babel/core@^7.14.0","@babel/core@^7.14.0",
"@babel/core@^7.14.0","@babel/core@^7.7.5","@babel/core@^7.1.0","@b
abel/core@^7.1.0","@babel/core@^7.12.3","@babel/core@^7.7.2","@babe
l/core@^7.14.0"]. This could result in non-deterministic behavior, 
skipping.
warning Pattern ["@babel/runtime@^7.16.0"] is trying to unpack in the
 same destination "C:\\Users\\xxxxx\\AppData\\Local\\Yarn\\Cache\\v
6\\npm-@babel-runtime-7.16.0-e27b977f2e2088ba24748bf99b5e1dece64e4f
0b-integrity\\node_modules\\@babel\\runtime" as pattern ["@babel/ru
ntime@^7.8.4"]. This could result in non-deterministic behavior, sk
ipping.
warning Pattern ["metro-react-native-babel-preset@^0.66.2"] is trying
 to unpack in the same destination "C:\\Users\\xxxxx\\AppData\\Loca
l\\Yarn\\Cache\\v6\\npm-metro-react-native-babel-preset-0.66.2-fdde
bcf413ad4ea617d4f47f7c1da401052de734-integrity\\node_modules\\metro
-react-native-babel-preset" as pattern ["metro-react-native-babel-p
reset@0.66.2","metro-react-native-babel-preset@0.66.2"]. This could
 result in non-deterministic behavior, skipping.
info fsevents@2.3.2: The platform "win32" is incompatible with this m
odule.
info "fsevents@2.3.2" is an optional dependency and failed compatibil
ity check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-native > react-native-codegen > jscodeshift@0.11.0" ha
s unmet peer dependency "@babel/preset-env@^7.1.6".
warning "@react-native-community/eslint-config > eslint-plugin-react@
7.26.1" has incorrect peer dependency "eslint@^3 || ^4 || ^5 || ^6 
|| ^7".
warning "@react-native-community/eslint-config > eslint-plugin-react-
native@3.11.0" has incorrect peer dependency "eslint@^3.17.0 || ^4 
|| ^5 || ^6 || ^7".
warning "@react-native-community/eslint-config > @typescript-eslint/e
slint-plugin@4.33.0" has incorrect peer dependency "eslint@^5.0.0 |
| ^6.0.0 || ^7.0.0".
warning "@react-native-community/eslint-config > eslint-plugin-react-
hooks@4.2.0" has incorrect peer dependency "eslint@^3.0.0 || ^4.0.0
 || ^5.0.0 || ^6.0.0 || ^7.0.0".
warning "@react-native-community/eslint-config > @typescript-eslint/e
slint-plugin > tsutils@3.21.0" has unmet peer dependency "typescrip
t@>=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".
warning "@react-native-community/eslint-config > @typescript-eslint/p
arser@4.33.0" has incorrect peer dependency "eslint@^5.0.0 || ^6.0.
0 || ^7.0.0".
warning " > @react-native-community/eslint-config@3.0.1" has unmet pe
er dependency "prettier@>=2".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 60 new dependencies.
info Direct dependencies
├─ @babel/core@7.16.0
├─ @babel/runtime@7.16.0
├─ @react-native-community/eslint-config@3.0.1
├─ babel-jest@27.3.1
├─ eslint@8.2.0
├─ jest@27.3.1
└─ metro-react-native-babel-preset@0.66.2
info All dependencies
├─ @babel/core@7.16.0
├─ @babel/runtime@7.16.0
:
略(56行)
:
├─ type-fest@0.20.2
└─ v8-to-istanbul@8.1.0
Done in 14.13s.


  Run instructions for Android:
    ? Have an Android emulator running (quickest way to get started),
 or a device connected.
    ? cd "C:\src\RNTest" && npx react-native run-android

  Run instructions for Windows:
    ? See https://aka.ms/ReactNativeGuideWindows for the latest up-to
-date instructions.


PS C:\src>

2~3分かかりました。結構warnningが出ました。

Please upgrade  to version 7 or higher.
Older versions may use Math.random() in certain circumstances, which 
is known to be problematic.
See https://v8.dev/blog/math-random for details.

バージョン7にアップグレードしてください。それより古いバージョンのMath.random()は問題があることが知られています。

support for ECMAScript is superseded by `uglify-js` as of v3.13.0

ECMAScriptのサポートは、v3.13.0以降 uglify-js にかわりました。

some dependency vulnerabilities fixed, support for node < 10 dropped,
 and newer ECMAScript syntax/features added

いくつかの依存関係の脆弱性が修正され、node < 10のサポートが停止され、新しいECMAScriptの構文/機能が追加されました。

"react-native > use-subscription@1.5.1" has unmet peer dependency "re
act@^16.8.0 || ^17.0.0"

「peer dependency」は依存先が自動的にはインストールされないものを指すようです。unmetなので未処理のpeer dependencyがある、ということのようです。

「react-native > use-subscription@1.5.1」は「react@^16.8.0 || ^17.0.0」へのpeer dependencyが満たされていない。となりそうですが、どうすればよいか分かりませんでした。

同じ文のwarinigがあと3つ出ています。

"react-native > metro-react-native-babel-transformer@0.66.2" has unme
t peer dependency "@babel/core@*".
"react-native > react-native-codegen > jscodeshift@0.11.0" has unmet 
peer dependency "@babel/preset-env@^7.1.6".
" > react-native@0.66.2" has unmet peer dependency "react@17.0.2".

Accessing non-existent property 'padLevels' of module exports inside 
circular dependency

依存関係の中のexportsモジュールに存在しないプロパティ"padLevels"へアクセスしたようです。

babel-eslint is now @babel/eslint-parser.
This package will no longer receive updates.

「babel-eslint」は「@babel/eslint-parser」になりました。このパッケージは今後更新を受けません。

また unmet peer dependency が2つ出ています。

"react-native > react-native-codegen > jscodeshift@0.11.0" has unmet 
peer dependency "@babel/preset-env@^7.1.6". "@react-native-community/eslint-config > @typescript-eslint/eslint-pl
ugin > tsutils@3.21.0" has unmet peer dependency "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".

また unmet peer dependency が2つ出ています。前回と同じ内容です。

"react-native > react-native-codegen > jscodeshift@0.11.0" has unmet 
peer dependency "@babel/preset-env@^7.1.6". "@react-native-community/eslint-config > @typescript-eslint/eslint-pl
ugin > tsutils@3.21.0" has unmet peer dependency "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".

また unmet peer dependency が2つ出ています。今回も前回と同じ内容です。

"react-native > react-native-codegen > jscodeshift@0.11.0" has unmet 
peer dependency "@babel/preset-env@^7.1.6". "@react-native-community/eslint-config > @typescript-eslint/eslint-pl
ugin > tsutils@3.21.0" has unmet peer dependency "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".

Pattern ["@babel/core@^7.16.0"] is trying to unpack in the same desti
nation "C:\\Users\\...\\@babel\\core" as pattern
[
    "@babel/core@^7.14.0"
   ,"@babel/core@^7.14.0"
   ,"@babel/core@^7.14.0"
   ,"@babel/core@^7.14.0"
   ,"@babel/core@^7.1.6"
   ,"@babel/core@^7.14.0"
   ,"@babel/core@^7.14.0"
   ,"@babel/core@^7.14.0"
   ,"@babel/core@^7.7.5"
   ,"@babel/core@^7.1.0"
   ,"@babel/core@^7.1.0"
   ,"@babel/core@^7.12.3"
   ,"@babel/core@^7.7.2"
   ,"@babel/core@^7.14.0"
].
This could result in non-deterministic behavior, skipping.

パターン「@babel/core@^7.16.0"」はパターン「"@babel/core@^7.14.0",...」と同じ保存先に解答しようとしています。 これにより non-deterministic behavior(非決定論的動作?)、スキップが発生します。

同じwarningが2つ出ています。

Pattern ["@babel/runtime@^7.16.0"] is trying to unpack in the same de
stination "C:\\Users\\...\\@babel\\runtime" as pattern ["@babel/run
time@^7.8.4"]. This could result in non-deterministic behavior, ski
pping.
Pattern ["metro-react-native-babel-preset@^0.66.2"] is trying to unpa
ck in the same destination "C:\\Users\\...\\metro-react-native-babe
l-preset" as pattern ["metro-react-native-babel-preset@0.66.2","met
ro-react-native-babel-preset@0.66.2"]. This could result in non-det
erministic behavior, skipping.

また unmet peer dependencyが出ています。

"react-native > react-native-codegen > jscodeshift@0.11.0" has unmet 
peer dependency "@babel/preset-env@^7.1.6".

"@react-native-community/eslint-config > eslint-plugin-react@7.26.1" 
has incorrect peer dependency "eslint@^3 || ^4 || ^5 || ^6 || ^7".

unmet ではなく incorrect(正しくない?)と表示されています。

incorrect peer dependencyが4件、unmet peer dependencyが2件出ていました。

"@react-native-community/eslint-config > eslint-plugin-react-native@3
.11.0" has incorrect peer dependency "eslint@^3.17.0 || ^4 || ^5 ||
 ^6 || ^7".
"@react-native-community/eslint-config > @typescript-eslint/eslint-pl
ugin@4.33.0" has incorrect peer dependency "eslint@^5.0.0 || ^6.0.0
 || ^7.0.0".
"@react-native-community/eslint-config > eslint-plugin-react-hooks@4.
2.0" has incorrect peer dependency "eslint@^3.0.0 || ^4.0.0 || ^5.0
.0 || ^6.0.0 || ^7.0.0".
"@react-native-community/eslint-config > @typescript-eslint/eslint-pl
ugin > tsutils@3.21.0" has unmet peer dependency "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".
"@react-native-community/eslint-config > @typescript-eslint/parser@4.
33.0" has incorrect peer dependency "eslint@^5.0.0 || ^6.0.0 || ^7.
0.0".
" > @react-native-community/eslint-config@3.0.1" has unmet peer depen
dency "prettier@>=2".

「Done」で区切ると5つのステップが実施されたようです。

This will walk you through creating a new React Native project in C:\
src\RNTest
Using yarn v1.22.15
Installing react-native...
yarn add v1.22.15
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 376 new dependencies.
Done in 33.06s.

「Installing react-native...」と表示されています。

info Setting up new React Native app in C:\src\RNTest
info Fetching template react-native-template-typescript...
yarn add v1.22.15
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 202 new dependencies.
Done in 20.07s.

「Setting up new React Native app」と表示されています。

info Adding dependencies for the project...
info No additional dependencies.
info Adding develop dependencies for the project...
info No additional develop dependencies.
yarn remove v1.22.15
[1/2] Removing module react-native-template-typescript...
[2/2] Regenerating lockfile and installing missing dependencies...
success Uninstalled packages.
Done in 1.93s.

最後に「success Uninstalled packages」と表示されています。

info Adding required dependencies
yarn add v1.22.15
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved 0 new dependencies.
Done in 1.96s.

「required dependencies」と表示されています。

info Adding required dev dependencies
yarn add v1.22.15
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 60 new dependencies.
Done in 14.13s.

「required dev dependencies」と表示されています。

warningの整理

react-native

「@react-native-community/cli-platform-ios > xcode > uuid@3.4.0: Please upgrade to version 7 or higher.」はupgradeすれば解消しそうです。

他の3つは依存関係の問題のようです。

use-subscription1.5.1react@^16.8.0 || ^17.0.0
metro-react-native-babel-transformer0.66.2@babel/core@*".
react-native-codegen
> jscodeshift
0.11.0@babel/preset-env@^7.1.6".

また「react-native@0.66.2」も「react@17.0.2」がpeer dependencyのようです。

@react-native-community/eslint-config

「babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.」はbabel-eslintがeslint-parserに代わったというものなので問題ないと思います。

他の6つは依存関係の問題のようです。

eslint-plugin-react7.26.1eslint@^3 || ^4 || ^5 || ^6 || ^7
eslint-plugin-react-native3.11.0eslint@^3.17.0 || ^4 || ^5 || ^6 || ^7
eslint-plugin-react-hooks4.2.0eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0

@react-native-community/eslint-config@typescript-eslint

eslint-plugin
> tsutils
3.21.0typescript@>=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
eslint-plugin4.33.0eslint@^5.0.0 || ^6.0.0 || ^7.0.0
parser4.33.0

Pattern is trying to unpack in the same destination

@babel/core@^7.16.0@babel/core@^7.1.0
@babel/core@^7.1.6
@babel/core@^7.7.2
@babel/core@^7.7.5
@babel/core@^7.12.3
@babel/core@^7.14.0
@babel/runtime@^7.16.0@babel/runtime@^7.8.4
metro-react-native-babel-preset@^0.66.2metro-react-native-babel-preset@0.66.2

「@react-native-community/eslint-config@3.0.1" has unmet peer dependency "prettier@>=2"」は「@react-native-community/eslint-config」が「prettier@>=2」とpeer dependencyのようです。

パス

以下のパスにいろいろできていました。

C:\Users\(ユーザ名)\AppData\Local\Yarn\Cache\v6
 \ npm-@babel-core-7.16.0-...-integrity
   \ node_modules
     \ @babel
       \ core
 \ npm-@babel-runtime-7.16.0-...-integrity
   \ node_modules
     \ @babel
       \ runtime
 \ npm-metro-react-native-babel-preset-0.66.2-...-integrity
   \ node_modules
     \ metro-react-native-babel-preset

致命的なエラーは出ていないようですが、warningが多く正しくできているのかわかりません。

▲ PageTop  ■ Home


Copyright (C) 2021 ymlib.com