我试着建立了一个Web应用开发环境(6) – React Native(6)
上次终于成功生成了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:\>
看守人
这是参考书籍的内容。这也没问题。
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:\>
非常多的组件已经被下载下来。虽然有很多警告，但细节部分我不太清楚，所以就先算了。还有一个关于类型信息的包的命令也有说明，所以也执行了。
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)
我决定尝试在安卓环境下运行，虽然生成的命令输出结果中也有相关信息。
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消息还是从命令提示符执行，都无法读取，因为出现乱码。不过，如果仔细阅读，输出中包含以下描述。
错误：无法启动模拟器。原因：没有模拟器作为 emulator -list-avds 的输出找到。
用模拟器命令可能可以检查虚拟设备。我想知道模拟器命令在哪里？于是我先看了一下安卓SDK安装时指定的安卓SDK位置，大约是在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时，会自动显示如下命令窗口。
还是不太顺利的(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>
请注意以下信息。
错误 无法启动模拟器。原因：30秒内无法启动模拟器。
警告 请手动启动一个模拟器或连接设备。否则应用可能无法启动。
似乎已经找到了虚拟设备，但正在显示无法在30秒内启动模拟器的消息。暂且算是迈出了一步前进。
另外，这次弹出了以下命令提示窗口。
