前回ようやくAndroid仮想デバイスの生成に成功。もう少し残りの環境設定を行い、いよいよReact Nativeアプリケーションを作成するところまで来たかなと思います。
今回も参考にさせていただいているのは以下のリソースになります。
React Native の開発環境を整える（React Native開発実践～第0回）
書籍 React Native
Git
参考ページでgitはついでにインストールを、とのお勧めに従いインストール。特に問題なし。
D:\>choco install git -y
Chocolatey v2.2.2
Installing the following packages:
git
By installing, you accept licenses for the packages.
Progress: Downloading git.install 2.42.0... 100%
git.install v2.42.0 [Approved]
git.install package files install completed. Performing other installation steps.
Using Git LFS
Installing 64-bit git.install...
git.install has been installed.
git.install installed to 'C:\Program Files\Git'
git.install can 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 git.install was successful.
Software installed to 'C:\Program Files\Git\'
Progress: Downloading git 2.42.0... 100%
git v2.42.0 [Approved]
git package files install completed. Performing other installation steps.
The install of git was successful.
Software installed to 'C:\ProgramData\chocolatey\lib\git'
Chocolatey installed 2/2 packages.
See the log for details (C:\ProgramData\chocolatey\logs\chocolatey.log).
D:\>
watchman
こちらは参考書籍の記載内容。これも問題なし。
D:\>choco install watchman -y
Chocolatey v2.2.2
Installing the following packages:
watchman
By installing, you accept licenses for the packages.
Progress: Downloading watchman 2023.10.09.00... 100%
watchman v2023.10.9 [Approved]
watchman package files install completed. Performing other installation steps.
Extracting 64-bit C:\ProgramData\chocolatey\lib\watchman\tools\watchman-v2023.10.09.00-windows.zip to C:\ProgramData\chocolatey\lib\watchman\tools...
C:\ProgramData\chocolatey\lib\watchman\tools
Environment Vars (like PATH) have changed. Close/reopen your shell to
see the changes (or in powershell/cmd.exe just type `refreshenv`).
ShimGen has successfully created a shim for eledo-pty-bridge.exe
ShimGen has successfully created a shim for watchman-diag.exe
ShimGen has successfully created a shim for watchman-make.exe
ShimGen has successfully created a shim for watchman-replicate-subscription.exe
ShimGen has successfully created a shim for watchman-wait.exe
ShimGen has successfully created a shim for watchman.exe
ShimGen has successfully created a shim for watchmanctl.exe
The install of watchman was successful.
Software installed to 'C:\ProgramData\chocolatey\lib\watchman\tools'
Chocolatey installed 1/1 packages.
See the log for details (C:\ProgramData\chocolatey\logs\chocolatey.log).
D:\>
react-native-cliのアンインストール
こちらも参考書籍の記載。新規の環境設定なので、入っているはずはないけど一応確認コマンドを実施してみる。問題なし。
D:\>npm ls -g --depth=0
C:\Program Files\nodejs -> .\
+-- corepack@0.22.0
`-- npm@10.2.0
D:\>
React Nativeパッケージインストール
参考書籍にyarnのインストールの部分にコマンドの記載があった。明示的に手順として実行するような記載にはなってなかったが、ちょっとお試し。そしたらリポジトリからの応答がなかった。
D:\>yarn add --exact react-native
yarn add v1.22.19
info No lockfile found.
(node:10396) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
info There appears to be trouble with your network connection. Retrying...
[1/4] Resolving packages...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
error An unexpected error occurred: "https://registry.yarnpkg.com/react-native: getaddrinfo ENOTFOUND registry.yarnpkg.com".
info If you think this is a bug, please open a bug report with the information provided in "D:\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
D:\>yarn -?
yarn install v1.22.19
info No lockfile found.
(node:9916) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
[1/4] Resolving packages...
[2/4] Fetching packages...
info There appears to be trouble with your network connection. Retrying...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 0.14s.
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
D:\>yarn
yarn install v1.22.19
(node:17948) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
info There appears to be trouble with your network connection. Retrying...
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.13s.
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
D:\>
プロキシ設定してなかったのね。インストールしたソフトウェアが多すぎて、どこまで何をしたのか覚えていない。
あらためてプロキシの設定を実施。構文の確認もなんとなくで実施したので、こんな出力に。
D:\>yarn config set proxy
yarn config v1.22.19
success Set "proxy" to true.
Done in 0.04s.
D:\>yarn config set proxy http://XXX.XXX.XXX.XXX:XXXX
yarn config v1.22.19
success Set "proxy" to "http://XXX.XXX.XXX.XXX:XXXX".
Done in 0.04s.
D:\>
再びReact Nativeパッケージをインストール。
D:\>yarn add --exact react-native
yarn add v1.22.19
(node:13468) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
[1/4] Resolving packages...
warning react-native > @react-native/codegen > jscodeshift > @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
warning react-native > @react-native/codegen > jscodeshift > @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
warning react-native > @react-native/codegen > jscodeshift > @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
warning react-native > @react-native-community/cli > @react-native-community/cli-plugin-metro > metro > metro-react-native-babel-preset > @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
warning react-native > @react-native-community/cli > @react-native-community/cli-plugin-metro > metro > metro-react-native-babel-preset > @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
warning react-native > @react-native-community/cli > @react-native-community/cli-plugin-metro > metro > metro-react-native-babel-preset > @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
warning react-native > @react-native-community/cli > @react-native-community/cli-plugin-metro > metro-react-native-babel-transformer > babel-preset-fbjs > @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
warning react-native > @react-native-community/cli > @react-native-community/cli-plugin-metro > metro > metro-react-native-babel-preset > @babel/plugin-proposal-async-generator-functions@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-async-generator-functions instead.
warning react-native > @react-native-community/cli > @react-native-community/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-community/cli-plugin-metro > metro > metro-react-native-babel-preset > @babel/plugin-proposal-numeric-separator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
warning react-native > @react-native-community/cli > @react-native-community/cli-plugin-metro > metro > metro-react-native-babel-preset > @babel/plugin-proposal-optional-catch-binding@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-catch-binding instead.
warning react-native > @react-native-community/cli > @react-native-community/cli-plugin-metro > metro > metro-react-native-babel-preset > @babel/plugin-proposal-object-rest-spread@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
warning react-native > @react-native-community/cli > @react-native-community/cli-plugin-metro > metro-react-native-babel-transformer > babel-preset-fbjs > @babel/plugin-proposal-object-rest-spread@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
[2/4] Fetching packages...
info There appears to be trouble with your network connection. Retrying...
[3/4] Linking dependencies...
warning "react-native > @react-native/codegen@0.72.7" has unmet peer dependency "@babel/preset-env@^7.1.6".
warning "react-native > react-shallow-renderer@16.15.0" has unmet peer dependency "react@^16.0.0 || ^17.0.0 || ^18.0.0".
warning "react-native > use-sync-external-store@1.2.0" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "react-native > @react-native/codegen > jscodeshift@0.14.0" has unmet peer dependency "@babel/preset-env@^7.1.6".
warning "react-native > @react-native-community/cli > @react-native-community/cli-plugin-metro > metro-react-native-babel-transformer@0.76.8" has unmet peer dependency "@babel/core@*".
warning " > react-native@0.72.7" has unmet peer dependency "react@18.2.0".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 337 new dependencies.
info Direct dependencies
└─ react-native@0.72.7
info All dependencies
├─ @ampproject/remapping@2.2.1
├─ @babel/compat-data@7.23.3
├─ @babel/helper-compilation-targets@7.22.15
├─ @babel/helper-create-class-features-plugin@7.22.15
├─ @babel/helper-create-regexp-features-plugin@7.22.15
├─ @babel/helper-hoist-variables@7.22.5
├─ @babel/helper-remap-async-to-generator@7.22.20
├─ @babel/helper-string-parser@7.22.5
├─ @babel/helper-wrap-function@7.22.20
├─ @babel/helpers@7.23.2
├─ @babel/highlight@7.22.20
├─ @babel/plugin-proposal-async-generator-functions@7.20.7
├─ @babel/plugin-proposal-class-properties@7.18.6
├─ @babel/plugin-proposal-export-default-from@7.23.3
├─ @babel/plugin-proposal-nullish-coalescing-operator@7.18.6
├─ @babel/plugin-proposal-numeric-separator@7.18.6
├─ @babel/plugin-proposal-object-rest-spread@7.20.7
├─ @babel/plugin-proposal-optional-catch-binding@7.18.6
├─ @babel/plugin-proposal-optional-chaining@7.21.0
├─ @babel/plugin-syntax-async-generators@7.8.4
├─ @babel/plugin-syntax-class-properties@7.12.13
├─ @babel/plugin-syntax-dynamic-import@7.8.3
├─ @babel/plugin-syntax-export-default-from@7.23.3
├─ @babel/plugin-syntax-flow@7.23.3
├─ @babel/plugin-syntax-jsx@7.23.3
├─ @babel/plugin-syntax-nullish-coalescing-operator@7.8.3
├─ @babel/plugin-syntax-numeric-separator@7.10.4
├─ @babel/plugin-syntax-object-rest-spread@7.8.3
├─ @babel/plugin-syntax-optional-catch-binding@7.8.3
├─ @babel/plugin-syntax-optional-chaining@7.8.3
├─ @babel/plugin-syntax-typescript@7.23.3
├─ @babel/plugin-transform-async-to-generator@7.23.3
├─ @babel/plugin-transform-block-scoped-functions@7.23.3
├─ @babel/plugin-transform-destructuring@7.23.3
├─ @babel/plugin-transform-flow-strip-types@7.23.3
├─ @babel/plugin-transform-for-of@7.23.3
├─ @babel/plugin-transform-member-expression-literals@7.23.3
├─ @babel/plugin-transform-named-capturing-groups-regex@7.22.5
├─ @babel/plugin-transform-object-super@7.23.3
├─ @babel/plugin-transform-parameters@7.23.3
├─ @babel/plugin-transform-property-literals@7.23.3
├─ @babel/plugin-transform-react-jsx-self@7.23.3
├─ @babel/plugin-transform-react-jsx-source@7.23.3
├─ @babel/plugin-transform-runtime@7.23.3
├─ @babel/plugin-transform-sticky-regex@7.23.3
├─ @babel/plugin-transform-template-literals@7.23.3
├─ @babel/plugin-transform-typescript@7.23.3
├─ @babel/plugin-transform-unicode-regex@7.23.3
├─ @babel/preset-flow@7.23.3
├─ @babel/preset-typescript@7.23.3
├─ @babel/register@7.22.15
├─ @babel/regjsgen@0.8.0
├─ @babel/runtime@7.23.2
├─ @babel/types@7.23.3
├─ @hapi/topo@5.1.0
├─ @jest/create-cache-key-function@29.7.0
├─ @jest/environment@29.7.0
├─ @jridgewell/resolve-uri@3.1.1
├─ @jridgewell/set-array@1.1.2
├─ @jridgewell/source-map@0.3.5
├─ @jridgewell/sourcemap-codec@1.4.15
├─ @react-native-community/cli-clean@11.3.10
├─ @react-native-community/cli-doctor@11.3.10
├─ @react-native-community/cli-hermes@11.3.10
├─ @react-native-community/cli-plugin-metro@11.3.10
├─ @react-native-community/cli-types@11.3.10
├─ @react-native-community/cli@11.3.10
├─ @react-native/assets-registry@0.72.0
├─ @react-native/codegen@0.72.7
├─ @react-native/gradle-plugin@0.72.11
├─ @react-native/js-polyfills@0.72.1
├─ @react-native/normalize-colors@0.72.0
├─ @react-native/virtualized-lists@0.72.8
├─ @sideway/address@4.1.4
├─ @sideway/formula@3.0.1
├─ @sideway/pinpoint@2.0.0
├─ @sinclair/typebox@0.27.8
├─ @sinonjs/commons@3.0.0
├─ @sinonjs/fake-timers@10.3.0
├─ @types/istanbul-lib-report@3.0.3
├─ @types/stack-utils@2.0.3
├─ @types/yargs@17.0.31
├─ abort-controller@3.0.0
├─ accepts@1.3.8
├─ acorn@8.11.2
├─ anser@1.4.10
├─ ansi-fragments@0.2.1
├─ ansi-regex@5.0.1
├─ anymatch@3.1.3
├─ appdirsjs@1.2.7
├─ argparse@1.0.10
├─ asap@2.0.6
├─ ast-types@0.15.2
├─ astral-regex@1.0.0
├─ async-limiter@1.0.1
├─ async@3.2.5
├─ babel-core@7.0.0-bridge.0
├─ babel-plugin-polyfill-corejs2@0.4.6
├─ babel-plugin-polyfill-corejs3@0.8.6
├─ babel-plugin-polyfill-regenerator@0.5.3
├─ babel-plugin-syntax-trailing-function-commas@7.0.0-beta.0
├─ babel-plugin-transform-flow-enums@0.0.2
├─ balanced-match@1.0.2
├─ base64-js@1.5.1
├─ bl@4.1.0
├─ brace-expansion@1.1.11
├─ braces@3.0.2
├─ browserslist@4.22.1
├─ bser@2.1.1
├─ buffer-from@1.1.2
├─ buffer@5.7.1
├─ bytes@3.0.0
├─ caller-callsite@2.0.0
├─ caller-path@2.0.0
├─ callsites@2.0.0
├─ camelcase@5.3.1
├─ caniuse-lite@1.0.30001562
├─ cli-cursor@3.1.0
├─ cli-spinners@2.9.1
├─ cliui@8.0.1
├─ clone-deep@4.0.1
├─ clone@1.0.4
├─ color-convert@2.0.1
├─ color-name@1.1.4
├─ colorette@1.4.0
├─ command-exists@1.2.9
├─ commander@9.5.0
├─ commondir@1.0.1
├─ compressible@2.0.18
├─ compression@1.7.4
├─ concat-map@0.0.1
├─ convert-source-map@2.0.0
├─ core-js-compat@3.33.2
├─ core-util-is@1.0.3
├─ cosmiconfig@5.2.1
├─ cross-spawn@7.0.3
├─ dayjs@1.11.10
├─ deepmerge@4.3.1
├─ defaults@1.0.4
├─ denodeify@1.2.1
├─ deprecated-react-native-prop-types@4.2.3
├─ destroy@1.2.0
├─ electron-to-chromium@1.4.583
├─ emoji-regex@8.0.0
├─ envinfo@7.11.0
├─ error-ex@1.3.2
├─ error-stack-parser@2.1.4
├─ errorhandler@1.5.1
├─ escape-string-regexp@1.0.5
├─ esprima@4.0.1
├─ etag@1.8.1
├─ event-target-shim@5.0.1
├─ fast-xml-parser@4.3.2
├─ fb-watchman@2.0.2
├─ fill-range@7.0.1
├─ finalhandler@1.1.2
├─ find-cache-dir@2.1.0
├─ flow-enums-runtime@0.0.5
├─ flow-parser@0.206.0
├─ fresh@0.5.2
├─ fs-extra@8.1.0
├─ fs.realpath@1.0.0
├─ function-bind@1.1.2
├─ gensync@1.0.0-beta.2
├─ get-caller-file@2.0.5
├─ get-stream@6.0.1
├─ hasown@2.0.0
├─ hermes-estree@0.12.0
├─ http-errors@2.0.0
├─ human-signals@2.1.0
├─ ieee754@1.2.1
├─ image-size@1.0.2
├─ import-fresh@2.0.0
├─ imurmurhash@0.1.4
├─ inflight@1.0.6
├─ inherits@2.0.4
├─ is-arrayish@0.2.1
├─ is-core-module@2.13.1
├─ is-directory@0.3.1
├─ is-fullwidth-code-point@3.0.0
├─ is-interactive@1.0.0
├─ is-number@7.0.0
├─ is-plain-object@2.0.4
├─ is-stream@2.0.1
├─ is-wsl@1.1.0
├─ isarray@1.0.0
├─ isexe@2.0.0
├─ isobject@3.0.1
├─ jest-environment-node@29.7.0
├─ jest-get-type@29.6.3
├─ jest-message-util@29.7.0
├─ jest-regex-util@27.5.1
├─ jest-validate@29.7.0
├─ js-tokens@4.0.0
├─ js-yaml@3.14.1
├─ jsc-android@250231.0.0
├─ jsc-safe-url@0.2.4
├─ jscodeshift@0.14.0
├─ jsesc@2.5.2
├─ json-parse-better-errors@1.0.2
├─ json5@2.2.3
├─ jsonfile@4.0.0
├─ kleur@3.0.3
├─ leven@3.1.0
├─ locate-path@5.0.0
├─ lodash.debounce@4.0.8
├─ log-symbols@4.1.0
├─ logkitty@0.7.1
├─ loose-envify@1.4.0
├─ lru-cache@6.0.0
├─ make-dir@2.1.0
├─ makeerror@1.0.12
├─ memoize-one@5.2.1
├─ metro-file-map@0.76.8
├─ metro-inspector-proxy@0.76.8
├─ metro-minify-terser@0.76.8
├─ metro-minify-uglify@0.76.8
├─ metro-react-native-babel-transformer@0.76.8
├─ metro-transform-worker@0.76.8
├─ mime-db@1.52.0
├─ mime-types@2.1.35
├─ mime@2.6.0
├─ mimic-fn@2.1.0
├─ minimatch@3.1.2
├─ minimist@1.2.8
├─ mkdirp@0.5.6
├─ ms@2.0.0
├─ negotiator@0.6.3
├─ neo-async@2.6.2
├─ nocache@3.0.4
├─ node-abort-controller@3.1.1
├─ node-dir@0.1.17
├─ node-int64@0.4.0
├─ node-releases@2.0.13
├─ node-stream-zip@1.15.0
├─ normalize-path@3.0.0
├─ npm-run-path@4.0.1
├─ ob1@0.76.8
├─ on-finished@2.4.1
├─ on-headers@1.0.2
├─ onetime@5.1.2
├─ open@6.4.0
├─ p-limit@2.3.0
├─ p-locate@4.1.0
├─ p-try@2.2.0
├─ parse-json@4.0.0
├─ path-is-absolute@1.0.1
├─ path-key@3.1.1
├─ path-parse@1.0.7
├─ picocolors@1.0.0
├─ picomatch@2.3.1
├─ pify@4.0.1
├─ pirates@4.0.6
├─ pkg-dir@3.0.0
├─ pretty-format@26.6.2
├─ process-nextick-args@2.0.1
├─ promise@8.3.0
├─ prop-types@15.8.1
├─ queue@6.0.2
├─ range-parser@1.2.1
├─ react-devtools-core@4.28.5
├─ react-is@18.2.0
├─ react-native@0.72.7
├─ react-shallow-renderer@16.15.0
├─ readable-stream@3.6.2
├─ readline@1.3.0
├─ recast@0.21.5
├─ regenerate-unicode-properties@10.1.1
├─ regenerator-runtime@0.13.11
├─ regexpu-core@5.3.2
├─ regjsparser@0.9.1
├─ require-main-filename@2.0.0
├─ resolve-from@3.0.0
├─ resolve@1.22.8
├─ restore-cursor@3.1.0
├─ safe-buffer@5.1.2
├─ scheduler@0.24.0-canary-efb381bbf-20230505
├─ send@0.18.0
├─ serialize-error@2.1.0
├─ set-blocking@2.0.0
├─ setprototypeof@1.2.0
├─ shallow-clone@3.0.1
├─ shebang-command@2.0.0
├─ shebang-regex@3.0.0
├─ shell-quote@1.8.1
├─ sisteransi@1.0.5
├─ slash@3.0.0
├─ slice-ansi@2.1.0
├─ source-map-support@0.5.21
├─ sprintf-js@1.0.3
├─ stack-utils@2.0.6
├─ stackframe@1.3.4
├─ stacktrace-parser@0.1.10
├─ string_decoder@1.3.0
├─ strip-final-newline@2.0.0
├─ strnum@1.0.5
├─ sudo-prompt@9.2.1
├─ supports-color@7.2.0
├─ supports-preserve-symlinks-flag@1.0.0
├─ temp@0.8.4
├─ terser@5.24.0
├─ throat@5.0.0
├─ through2@2.0.5
├─ tmpl@1.0.5
├─ to-fast-properties@2.0.0
├─ to-regex-range@5.0.1
├─ toidentifier@1.0.1
├─ tr46@0.0.3
├─ type-detect@4.0.8
├─ type-fest@0.7.1
├─ uglify-es@3.3.9
├─ undici-types@5.26.5
├─ unicode-canonical-property-names-ecmascript@2.0.0
├─ unicode-match-property-ecmascript@2.0.0
├─ unicode-match-property-value-ecmascript@2.1.0
├─ unicode-property-aliases-ecmascript@2.1.0
├─ universalify@0.1.2
├─ unpipe@1.0.0
├─ update-browserslist-db@1.0.13
├─ use-sync-external-store@1.2.0
├─ util-deprecate@1.0.2
├─ utils-merge@1.0.1
├─ vary@1.1.2
├─ walker@1.0.8
├─ webidl-conversions@3.0.1
├─ whatwg-fetch@3.6.19
├─ whatwg-url@5.0.0
├─ which-module@2.0.1
├─ which@2.0.2
├─ wrap-ansi@7.0.0
├─ write-file-atomic@2.4.3
├─ xtend@4.0.2
├─ y18n@5.0.8
├─ yallist@4.0.0
├─ yaml@2.3.4
├─ yargs-parser@21.1.1
└─ yocto-queue@0.1.0
Done in 266.42s.
D:\>
非常に多くのコンポーネント？がダウンロードされてきた。Warningがけっこう出ているが、細かいところはわからないのでとりあえずよしとする。もう一つ、型情報のパッケージについてのコマンドも記載があったので、そちらも実行。
D:\>yarn add --dev --exact @types/react-native
yarn add v1.22.19
warning package.json: No license field
warning No license field
[1/4] Resolving packages...
? @types/react-native(node:18644) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > react-native@0.72.7" has unmet peer dependency "react@18.2.0".
warning "react-native > @react-native/codegen@0.72.7" has unmet peer dependency "@babel/preset-env@^7.1.6".
warning "react-native > react-shallow-renderer@16.15.0" has unmet peer dependency "react@^16.0.0 || ^17.0.0 || ^18.0.0".
warning "react-native > use-sync-external-store@1.2.0" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "react-native > @react-native/codegen > jscodeshift@0.14.0" has unmet peer dependency "@babel/preset-env@^7.1.6".
warning "react-native > @react-native-community/cli > @react-native-community/cli-plugin-metro > metro-react-native-babel-transformer@0.76.8" has unmet peer dependency "@babel/core@*".
[4/4] Building fresh packages...
success Saved lockfile.
warning No license field
success Saved 5 new dependencies.
info Direct dependencies
└─ @types/react-native@0.72.6
info All dependencies
├─ @types/prop-types@15.7.10
├─ @types/react-native@0.72.6
├─ @types/react@18.2.37
├─ @types/scheduler@0.16.6
└─ csstype@3.1.2
Done in 22.60s.
D:\>
こちらは対象が少しだった。無事にインストールできた感じ。
いよいよプロジェクト作成
参考書籍のコマンドに従い、ついにReact Nativeプロジェクトを初作成。うまくいくかな。
D:\>npx react-native init MyApp --template react-native-template-typescript@6.3.16
###### ######
### #### #### ###
## ### ### ##
## #### ##
## #### ##
## ## ## ##
## ### ### ##
## ######################## ##
###### ### ### ######
### ## ## ## ## ###
### ## ### #### ### ## ###
## #### ######## #### ##
## ### ########## ### ##
## #### ######## #### ##
### ## ### #### ### ## ###
### ## ## ## ## ###
###### ### ### ######
## ######################## ##
## ### ### ##
## ## ## ##
## #### ##
## #### ##
## ### ### ##
### #### #### ###
###### ######
Welcome to React Native!
Learn once, write anywhere
√ Downloading template
√ Copying template
√ Processing template
√ Installing dependencies
Run instructions for Android:
? Have an Android emulator running (quickest way to get started), or a device connected.
? cd "D:\MyApp" && npx react-native run-android
Run instructions for Windows:
? See https://aka.ms/ReactNativeGuideWindows for the latest up-to-date instructions.
D:\>
なんか拍子抜けするくらいあっさり作成できた。いよいよ実行に。
やっぱりそんなにうまくいかない(1)
生成コマンドの出力結果にもあったが、Android環境での実行を試してみることに。
D:\>cd MyApp
D:\MyApp>npx react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 866 file(s) to forward-jetify. Using 6 workers...
(node:16816) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
info Starting JS server...
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
info Launching emulator...
error Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`.
warn Please launch an emulator manually or connect a device. Otherwise app may fail to launch.
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)
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring project ':app'.
> SDK location not found. Define location with an ANDROID_SDK_ROOT environment variable or by setting the sdk.dir path in your project's local properties file at 'D:\MyApp\android\local.properties'.
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 7m 19s
error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring project ':app'.
> SDK location not found. Define location with an ANDROID_SDK_ROOT environment variable or by setting the sdk.dir path in your project's local properties file at 'D:\MyApp\android\local.properties'.
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 7m 19s
at checkExecSyncError (node:child_process:890:11)
at execFileSync (node:child_process:926:15)
at runOnAllDevices (D:\MyApp\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:94:39)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
D:\MyApp>
見事に失敗。メッセージはUnicodeなのか、コマンドプロンプトからの実行では文字化けして読めなかった。それでもよく読むと、出力内に以下の記述が。
error Failed to launch emulator. Reason: No emulators found as an output of emulator -list-avds.
emulatorコマンドで仮想デバイスを確認できそう。emulatorコマンドはどこにあるかな？と思ったところでとりあえずAndroid SDKインストール時に指定したAndroid SDK Locationである、C:\Users\XXXX\AppData\Local\Android\Sdkあたりを探る。そうすると、emulatorフォルダーにemulator.exeが入っていることが分かった。-list-avds指定で実行。
d:\>C:\Users\XXXX\AppData\Local\Android\Sdk\emulator\emulator.exe -list-avds
Pixel_2_API_34
d:\>
どうやら仮想デバイスはちゃんと認識されている。PATHにemulator.exeのフォルダーを追加してみることに。
なお、run-androidを実行すると、以下のようなコマンドウィンドウが自動的に表示されてきた。
あわせて、Node.js, OpenJDKについてのファイアウォールアクセス許可要求も。これもとりあえず無条件OKに。
やっぱりそんなにうまくいかない(2)
npxコマンドを打つコマンドプロンプトで、一時的にPATHを書き換えて再度実行。再び失敗したのは同じだが、エラー内容が変わった。
D:\MyApp>PATH=%PATH%;C:\Users\XXXX\AppData\Local\Android\Sdk\emulator
D:\MyApp>npx react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 866 file(s) to forward-jetify. Using 6 workers...
(node:15936) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
info JS server already running.
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
info Launching emulator...
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
'adb' ??A???R?}???h?????O???R?}???h?A
?????\??v???O?????????o?b?` ?t?@?C???????F?????????????B
error Failed to launch emulator. Reason: Could not start emulator within 30 seconds..
warn Please launch an emulator manually or connect a device. Otherwise app may fail to launch.
info Installing the app...
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring project ':app'.
> SDK location not found. Define location with an ANDROID_SDK_ROOT environment variable or by setting the sdk.dir path in your project's local properties file at 'D:\MyApp\android\local.properties'.
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 4s
error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring project ':app'.
> SDK location not found. Define location with an ANDROID_SDK_ROOT environment variable or by setting the sdk.dir path in your project's local properties file at 'D:\MyApp\android\local.properties'.
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 4s
at checkExecSyncError (node:child_process:890:11)
at execFileSync (node:child_process:926:15)
at runOnAllDevices (D:\MyApp\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:94:39)
at async Command.handleAction (D:\MyApp\node_modules\@react-native-community\cli\build\index.js:182:9)
D:\MyApp>
以下のメッセージに注目。
error Failed to launch emulator. Reason: Could not start emulator within 30 seconds..
warn Please launch an emulator manually or connect a device. Otherwise app may fail to launch.
エミュレーターを30秒以内に開始できていないというメッセージに変わっている。とりあえず仮想デバイスは見つかるようになったと思われるので、一歩前進。
なお、今度はさらに以下のコマンドプロンプトウィンドウがポップアップ表示された。
