react native 学习笔记2

安装

• node.js
• react native
• npm install -g react-native-cli
• nuclide
• watchman
•  

如果提示权限错误无法安装，加上sudo

• sudo npm install -g react-native-cli

提示安装成功

/usr/local/bin/react-native -> /usr/local/lib/node_modules/react-native-cli/index.js
+ react-native-cli@2.0.1
removed 399 packages and updated 72 packages in 17.801s

查看react-native 帮助：react-native -h

Usage: react-native [command] [options]

  Commands:

    init <ProjectName> [options]  generates a new project and installs its dependencies

  Options:

    -h, --help    output usage information
    -v, --version output the version number

• nuclide安装

下载git clone https://github.com/facebook/nuclide.git

# Clone the source $ git clone https://github.com/facebook/nuclide.git

$ cd nuclide # Install dependencies

$ yarn --pure-lockfile

# Link the 'nuclide' package to Atom's package directory

# You could also use apm link --dev ... see Development Mode below.

$ apm link

• 安装watchman

brew install watchman

安装进度

• brew install watchman

Updating Homebrew...
==> Installing dependencies for watchman: openssl@1.1, pcre, gdbm, readline, sqlite, xz and python
==> Installing watchman dependency: openssl@1.1
==> Downloading https://homebrew.bintray.com/bottles/[e-mail]
==> Downloading from https://akamai.bintray.com/d7/d7f992ebfd78f80828051f6dc6a1a
#######################################################                   77.3%

 

创建项目ch02

react-native init ch02 自动创建

nfo Adding required dependencies
yarn add v1.21.1
[1/4]   Resolving packages...
[2/4]   Fetching packages...
[3/4]   Linking dependencies...
warning "@react-native-community/eslint-config > eslint-plugin-react@7.12.4" has incorrect peer dependency "eslint@^3.0.0 || ^4.0.0 || ^5.0.0".
warning "@react-native-community/eslint-config > @typescript-eslint/eslint-plugin@1.13.0" has incorrect peer dependency "eslint@^5.0.0".
warning "@react-native-community/eslint-config > eslint-plugin-react-native@3.6.0" has incorrect peer dependency "eslint@^3.17.0 || ^4 || ^5".
warning "@react-native-community/eslint-config > @typescript-eslint/parser@1.13.0" has incorrect peer dependency "eslint@^5.0.0".
warning "@react-native-community/eslint-config > @typescript-eslint/eslint-plugin > tsutils@3.17.1" 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".
[4/4]   Building fresh packages...
success Saved lockfile.
success Saved 179 new dependencies.
info Direct dependencies
├─ @react-native-community/eslint-config@0.0.5
├─ eslint@6.8.0
├─ jest@24.9.0
├─ react-test-renderer@16.9.0
└─ react@16.9.0
info All dependencies
├─ @jest/core@24.9.0
├─ @jest/reporters@24.9.0
├─ @jest/test-sequencer@24.9.0
├─ @react-native-community/eslint-config@0.0.5
├─ @types/babel__core@7.1.3
├─ @types/babel__generator@7.6.1
├─ @types/babel__template@7.0.2
├─ @types/babel__traverse@7.0.8
├─ @types/eslint-visitor-keys@1.0.0
├─ @types/json-schema@7.0.4
├─ @typescript-eslint/eslint-plugin@1.13.0
├─ @typescript-eslint/parser@1.13.0
├─ acorn-globals@4.3.4
├─ acorn-jsx@5.1.0
├─ acorn-walk@6.2.0
├─ acorn@7.1.0
├─ ajv@6.10.2
├─ array-equal@1.0.0
├─ asn1@0.2.4
├─ asynckit@0.4.0
├─ aws-sign2@0.7.0
├─ aws4@1.9.0
├─ babel-eslint@10.0.1
├─ babel-plugin-jest-hoist@24.9.0
├─ babel-preset-jest@24.9.0
├─ bcrypt-pbkdf@1.0.2
├─ browser-process-hrtime@0.1.3
├─ browser-resolve@1.11.3
├─ caseless@0.12.0
├─ chardet@0.7.0
├─ cliui@5.0.0
├─ co@4.6.0
├─ combined-stream@1.0.8
├─ cssom@0.3.8
├─ cssstyle@1.4.0
├─ dashdash@1.14.1
├─ data-urls@1.1.0
├─ deep-is@0.1.3
├─ delayed-stream@1.0.0
├─ detect-newline@2.1.0
├─ diff-sequences@24.9.0
├─ doctrine@3.0.0
├─ domexception@1.0.1
├─ ecc-jsbn@0.1.2
├─ emoji-regex@7.0.3
├─ es-to-primitive@1.2.1
├─ escodegen@1.12.0
├─ eslint-plugin-eslint-comments@3.1.2
├─ eslint-plugin-flowtype@2.50.3
├─ eslint-plugin-jest@22.4.1
├─ eslint-plugin-prettier@2.6.2
├─ eslint-plugin-react-hooks@1.7.0
├─ eslint-plugin-react-native-globals@0.1.2
├─ eslint-plugin-react-native@3.6.0
├─ eslint-plugin-react@7.12.4
├─ eslint-scope@5.0.0
├─ eslint-utils@1.4.3
├─ eslint@6.8.0
├─ espree@6.1.2
├─ esquery@1.0.1
├─ estraverse@4.3.0
├─ extend@3.0.2
├─ external-editor@3.1.0
├─ extsprintf@1.3.0
├─ fast-deep-equal@2.0.1
├─ fast-diff@1.2.0
├─ fast-levenshtein@2.0.6
├─ figures@3.1.0
├─ file-entry-cache@5.0.1
├─ flat-cache@2.0.1
├─ flatted@2.0.1
├─ forever-agent@0.6.1
├─ form-data@2.3.3
├─ getpass@0.1.7
├─ glob-parent@5.1.0
├─ handlebars@4.5.3
├─ har-schema@2.0.0
├─ har-validator@5.1.3
├─ html-encoding-sniffer@1.0.2
├─ http-signature@1.2.0
├─ ignore@4.0.6
├─ import-fresh@3.2.1
├─ inquirer@7.0.1
├─ is-callable@1.1.5
├─ is-date-object@1.0.2
├─ is-extglob@2.1.1
├─ is-generator-fn@2.1.0
├─ is-glob@4.0.1
├─ is-regex@1.0.5
├─ is-string@1.0.5
├─ is-symbol@1.0.3
├─ is-typedarray@1.0.0
├─ isstream@0.1.2
├─ istanbul-lib-instrument@3.3.0
├─ istanbul-lib-report@2.0.8
├─ istanbul-lib-source-maps@3.0.6
├─ istanbul-reports@2.2.6
├─ jest-changed-files@24.9.0
├─ jest-cli@24.9.0
├─ jest-docblock@21.2.0
├─ jest-each@24.9.0
├─ jest-environment-jsdom@24.9.0
├─ jest-environment-node@24.9.0
├─ jest-leak-detector@24.9.0
├─ jest-pnp-resolver@1.2.1
├─ jest-resolve-dependencies@24.9.0
├─ jest-watcher@24.9.0
├─ jest@24.9.0
├─ jsdom@11.12.0
├─ json-schema-traverse@0.4.1
├─ json-schema@0.2.3
├─ json-stable-stringify-without-jsonify@1.0.1
├─ json-stringify-safe@5.0.1
├─ jsprim@1.4.1
├─ jsx-ast-utils@2.2.3
├─ kleur@3.0.3
├─ left-pad@1.3.0
├─ levn@0.3.0
├─ load-json-file@4.0.0
├─ lodash.unescape@4.0.1
├─ mute-stream@0.0.8
├─ neo-async@2.6.1
├─ nwsapi@2.2.0
├─ oauth-sign@0.9.0
├─ object-inspect@1.7.0
├─ object.fromentries@2.0.2
├─ object.getownpropertydescriptors@2.1.0
├─ optimist@0.6.1
├─ optionator@0.8.3
├─ p-each-series@1.0.0
├─ p-reduce@1.0.0
├─ parent-module@1.0.1
├─ parse5@4.0.0
├─ path-type@3.0.0
├─ performance-now@2.1.0
├─ pn@1.1.0
├─ prettier@1.16.4
├─ progress@2.0.3
├─ prompts@2.3.0
├─ psl@1.6.0
├─ qs@6.5.2
├─ react-test-renderer@16.9.0
├─ react@16.9.0
├─ read-pkg-up@4.0.0
├─ read-pkg@3.0.0
├─ request-promise-core@1.1.3
├─ request-promise-native@1.0.8
├─ request@2.88.0
├─ resolve-cwd@2.0.0
├─ rxjs@6.5.3
├─ sisteransi@1.0.4
├─ sshpk@1.16.1
├─ stealthy-require@1.1.1
├─ string.prototype.trimleft@2.1.1
├─ string.prototype.trimright@2.1.1
├─ strip-json-comments@3.0.1
├─ symbol-tree@3.2.4
├─ table@5.4.6
├─ test-exclude@5.2.3
├─ text-table@0.2.0
├─ tough-cookie@2.5.0
├─ tslib@1.10.0
├─ tsutils@3.17.1
├─ tunnel-agent@0.6.0
├─ tweetnacl@0.14.5
├─ uglify-js@3.7.3
├─ uri-js@4.2.2
├─ util.promisify@1.0.0
├─ v8-compile-cache@2.1.0
├─ verror@1.10.0
├─ w3c-hr-time@1.0.1
├─ whatwg-encoding@1.0.5
├─ whatwg-mimetype@2.3.0
├─ whatwg-url@6.5.0
├─ word-wrap@1.2.3
├─ write-file-atomic@2.4.1
├─ write@1.0.3
├─ xml-name-validator@3.0.0
└─ yargs-parser@13.1.1
✨  Done in 39.84s.
info Adding required dev dependencies
yarn add v1.21.1
[1/4]   Resolving packages...
[2/4]   Fetching packages...
warning Pattern ["@babel/core@^7.7.7"] is trying to unpack in the same destination "/Users/apple/Library/Caches/Yarn/v6/npm-@babel-core-7.7.7-ee155d2e12300bcc0cff6a8ad46f2af5063803e9-integrity/node_modules/@babel/core" as pattern ["@babel/core@^7.0.0","@babel/core@^7.0.0","@babel/core@^7.0.0","@babel/core@^7.0.0","@babel/core@^7.0.0","@babel/core@^7.1.0","@babel/core@^7.1.0"]. This could result in non-deterministic behavior, skipping.
warning Pattern ["@babel/runtime@^7.7.7"] is trying to unpack in the same destination "/Users/apple/Library/Caches/Yarn/v6/npm-@babel-runtime-7.7.7-194769ca8d6d7790ec23605af9ee3e42a0aa79cf-integrity/node_modules/@babel/runtime" as pattern ["@babel/runtime@^7.0.0"]. This could result in non-deterministic behavior, skipping.
[3/4]   Linking dependencies...
warning "@react-native-community/eslint-config > @typescript-eslint/eslint-plugin@1.13.0" has incorrect peer dependency "eslint@^5.0.0".
warning "@react-native-community/eslint-config > @typescript-eslint/parser@1.13.0" has incorrect peer dependency "eslint@^5.0.0".
warning "@react-native-community/eslint-config > eslint-plugin-react@7.12.4" has incorrect peer dependency "eslint@^3.0.0 || ^4.0.0 || ^5.0.0".
warning "@react-native-community/eslint-config > eslint-plugin-react-native@3.6.0" has incorrect peer dependency "eslint@^3.17.0 || ^4 || ^5".
warning "@react-native-community/eslint-config > @typescript-eslint/eslint-plugin > tsutils@3.17.1" 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".
[4/4]   Building fresh packages...
success Saved lockfile.
success Saved 7 new dependencies.
info Direct dependencies
├─ @babel/core@7.7.7
├─ @babel/runtime@7.7.7
├─ @react-native-community/eslint-config@0.0.5
├─ babel-jest@24.9.0
├─ eslint@6.8.0
├─ jest@24.9.0
└─ metro-react-native-babel-preset@0.57.0
info All dependencies
├─ @babel/core@7.7.7
├─ @babel/runtime@7.7.7
├─ @react-native-community/eslint-config@0.0.5
├─ babel-jest@24.9.0
├─ eslint@6.8.0
├─ jest@24.9.0
└─ metro-react-native-babel-preset@0.57.0
✨  Done in 4.89s.

 

错误提示：

xcrun: error: unable to find utility "simctl", not a developer tool or in PATH

 

/Users/Keny/Library/Android/sdk

 

下载完成后，新建文件夹 .rncache，将下载的四个文件移入到目录下

mkdir ~/.rncache

再次运行安装脚本，因为使用本地下载文件，所有运行起来很快。

node_modules/react-native/scripts/ios-install-third-party.sh

运行项目就可以跑起来了，首次启动会有点慢，耐心等会就行。

react-native run-ios

提示错误。

pod install
-bash: /usr/local/bin/pod: /System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/bin/ruby: bad interpreter: No such file or directory

用命令：brew link --overwrite cocoapods 

编译的时候，提示

⠋ [7/10] Installing tweetnacl@^0.14.3[npminstall:get] retry GET https://registry.npm.taobao.org/react-native/download/react-native-0.61.5.tgz after 100ms, retry left 4, error: Error [ResponseTimeoutError]: Response timeout for 60000ms, GET https://cdn.npm.taobao.org/react-native/-/react-native-0.61.5.tgz 200 (connected: true, keepalive socket: false, agent status: {"createSocketCount":33,"createSocketErrorCount":0,"closeSocketCount":32,"errorSocketCount":0,"timeoutSocketCount":29,"requestCount":1755,"freeSockets":{"cdn.npm.taobao.org:443::::::::true::::::::::":1},"sockets":{},"requests":{}}, socketHandledRequests: 1, socketHandledResponses: 1)
headers: {"server":"Tengine","content-type":"application/octet-stream","content-length":"14692785","connection":"keep-alive","date":"Mon, 23 Dec 2019 07:27:33 GMT","x-oss-request-id":"5E006C65B9D1323137B86FA0","accept-ranges":"bytes","etag":"\"584DF604DE2F978D0C6CED3092D3645A\"","last-modified":"Sat, 23 Nov 2019 15:03:50 GMT","x-oss-object-type":"Normal","x-oss-hash-crc64ecma":"7242122203670813564","x-oss-storage-class":"Standard","cache-control":"max-age=0, s-maxage=86400","x-oss-server-time":"21","age":"329372","ali-swift-global-savetime":"1577086053","x-cache":"HIT TCP_HIT dirn:3:16357447 mlen:0","x-swift-savetime":"Mon, 23 Dec 2019 07:27:33 GMT","x-swift-cachetime":"360493","via":"vcache10.cn43[0,206-0,H], vcache17.cn43[14,0]","timing-allow-origin":"*","eagleid":"751b8cd915774154256368717e"}
    at Timeout._onTimeout (/usr/local/lib/node_modules/cnpm/node_modules/urllib/lib/urllib.js:940:15)
    at listOnTimeout (internal/timers.js:537:17)
    at processTimers (internal/timers.js:481:7) {
  name: 'ResponseTimeoutError',
  requestId: 31,
  data: null,
  path: '/react-native/-/react-native-0.61.5.tgz',
  status: 200,
  headers: [Object],
  res: [Object]
}, status: 200, headers: {"server":"Tengine","content-type":"application/octet-stream","content-length":"14692785","connection":"keep-alive","date":"Mon, 23 Dec 2019 07:27:33 GMT","x-oss-request-id":"5E006C65B9D1323137B86FA0","accept-ranges":"bytes","etag":"\"584DF604DE2F978D0C6CED3092D3645A\"","last-modified":"Sat, 23 Nov 2019 15:03:50 GMT","x-oss-object-type":"Normal","x-oss-hash-crc64ecma":"7242122203670813564","x-oss-storage-class":"Standard","cache-control":"max-age=0, s-maxage=86400","x-oss-server-time":"21","age":"329372","ali-swift-global-savetime":"1577086053","x-cache":"HIT TCP_HIT dirn:3:16357447 mlen:0","x-swift-savetime":"Mon, 23 Dec 2019 07:27:33 GMT","x-swift-cachetime":"360493","via":"vcache10.cn43[0,206-0,H], vcache17.cn43[14,0]","timing-allow-origin":"*","eagleid":"751b8cd915774154256368717e"},
stack: ResponseTimeoutError: Response timeout for 60000ms, GET https://cdn.npm.taobao.org/react-native/-/react-native-0.61.5.tgz 200 (connected: true, keepalive socket: false, agent status: {"createSocketCount":33,"createSocketErrorCount":0,"closeSocketCount":32,"errorSocketCount":0,"timeoutSocketCount":29,"requestCount":1755,"freeSockets":{"cdn.npm.taobao.org:443::::::::true::::::::::":1},"sockets":{},"requests":{}}, socketHandledRequests: 1, socketHandledResponses: 1)
headers: {"server":"Tengine","content-type":"application/octet-stream","content-length":"14692785","connection":"keep-alive","date":"Mon, 23 Dec 2019 07:27:33 GMT","x-oss-request-id":"5E006C65B9D1323137B86FA0","accept-ranges":"bytes","etag":"\"584DF604DE2F978D0C6CED3092D3645A\"","last-modified":"Sat, 23 Nov 2019 15:03:50 GMT","x-oss-object-type":"Normal","x-oss-hash-crc64ecma":"7242122203670813564","x-oss-storage-class":"Standard","cache-control":"max-age=0, s-maxage=86400","x-oss-server-time":"21","age":"329372","ali-swift-global-savetime":"1577086053","x-cache":"HIT TCP_HIT dirn:3:16357447 mlen:0","x-swift-savetime":"Mon, 23 Dec 2019 07:27:33 GMT","x-swift-cachetime":"360493","via":"vcache10.cn43[0,206-0,H], vcache17.cn43[14,0]","timing-allow-origin":"*","eagleid":"751b8cd915774154256368717e"}
    at Timeout._onTimeout (/usr/local/lib/node_modules/cnpm/node_modules/urllib/lib/urllib.js:940:15)
    at listOnTimeout (internal/timers.js:537:17)
    at processTimers (internal/timers.js:481:7)
⠸ [7/10] Installing tweetnacl@^0.14.3[npminstall:get] retry GET https://registry.npm.taobao.org/react-native/download/react-native-0.61.5.tgz after 200ms, retry left 3, error: Error [ERR_STREAM_DESTROYED]: Cannot call write after a stream was destroyed (writeStream "error") (writeStream "error") (writeStream "error") (writeStream "error"), GET https://cdn.npm.taobao.org/react-native/-/react-native-0.61.5.tgz 200 (connected: true, keepalive socket: false, agent status: {"createSocketCount":35,"createSocketErrorCount":0,"closeSocketCount":33,"errorSocketCount":0,"timeoutSocketCount":30,"requestCount":1756,"freeSockets":{"registry.npm.taobao.org:443::::::::true::::::::::":1},"sockets":{"cdn.npm.taobao.org:443::::::::true::::::::::":1},"requests":{}}, socketHandledRequests: 1, socketHandledResponses: 1)
headers: {"server":"Tengine","content-type":"application/octet-stream","content-length":"14692785","connection":"keep-alive","date":"Thu, 26 Dec 2019 14:07:50 GMT","x-oss-request-id":"5E04BEB6F1BF4B3039D2CDD9","accept-ranges":"bytes","etag":"\"584DF604DE2F978D0C6CED3092D3645A\"","last-modified":"Sat, 23 Nov 2019 15:03:50 GMT","x-oss-object-type":"Normal","x-oss-hash-crc64ecma":"7242122203670813564","x-oss-storage-class":"Standard","cache-control":"max-age=0, s-maxage=86400","x-oss-server-time":"23","age":"46216","ali-swift-global-savetime":"1577369270","x-cache":"HIT TCP_HIT dirn:11:770471827 mlen:0","x-swift-savetime":"Thu, 26 Dec 2019 14:07:50 GMT","x-swift-cachetime":"86400","via":"vcache20.cn2159[0,206-0,H], vcache25.cn2159[1,0]","timing-allow-origin":"*","eagleid":"751be22d15774154865724244e"}, status: 200, headers: {"server":"Tengine","content-type":"application/octet-stream","content-length":"14692785","connection":"keep-alive","date":"Thu, 26 Dec 2019 14:07:50 GMT","x-oss-request-id":"5E04BEB6F1BF4B3039D2CDD9","accept-ranges":"bytes","etag":"\"584DF604DE2F978D0C6CED3092D3645A\"","last-modified":"Sat, 23 Nov 2019 15:03:50 GMT","x-oss-object-type":"Normal","x-oss-hash-crc64ecma":"7242122203670813564","x-oss-storage-class":"Standard","cache-control":"max-age=0, s-maxage=86400","x-oss-server-time":"23","age":"46216","ali-swift-global-savetime":"1577369270","x-cache":"HIT TCP_HIT dirn:11:770471827 mlen:0","x-swift-savetime":"Thu, 26 Dec 2019 14:07:50 GMT","x-swift-cachetime":"86400","via":"vcache20.cn2159[0,206-0,H], vcache25.cn2159[1,0]","timing-allow-origin":"*","eagleid":"751be22d15774154865724244e"},
stack: Error [ERR_STREAM_DESTROYED]: Cannot call write after a stream was destroyed
    at WriteStream.Writable.write (_stream_writable.js:321:17)
    at IncomingMessage.ondata (_stream_readable.js:762:22)
    at IncomingMessage.emit (events.js:305:20)
    at addChunk (_stream_readable.js:341:12)
    at readableAddChunk (_stream_readable.js:316:11)
    at IncomingMessage.Readable.push (_stream_readable.js:250:10)
    at HTTPParser.parserOnBody (_http_common.js:129:24)
    at TLSSocket.socketOnData (_http_client.js:470:22)
    at TLSSocket.emit (events.js:305:20)
    at addChunk (_stream_readable.js:341:12)

 

尝试用原始的命令npm

npm fund
ch02@0.0.1
├─┬ @babel/core@7.7.7
│ ├── type: opencollective
│ └── url: https://opencollective.com/babel
├─┬ eslint@6.8.0
│ └── url: https://opencollective.com/eslint
├─┬ array-includes@3.1.1, resolve@1.14.1, is-date-object@1.0.2, is-symbol@1.0.3, es-to-primitive@1.2.1, has-symbols@1.0.1, is-callable@1.1.5, is-regex@1.0.5, object-inspect@1.7.0, string.prototype.trimleft@2.1.1, string.prototype.trimright@2.1.1, es-abstract@1.17.0, is-string@1.0.5, object.fromentries@2.0.2, object.getownpropertydescriptors@2.1.0
│ └── url: https://github.com/sponsors/ljharb
└─┬ glob@7.1.6
  └── url: https://github.com/sponsors/isaacs