ReactNativeiOS(一)安装

来源:互联网 发布:网络ssr是什么意思 编辑:程序博客网 时间:2024/05/07 09:00

开始用到React Native for iOS,特此笔记。

如能帮助到您,我会很开心。


  1. OS X - 当前仅支持 OS X
  2. 推荐使用 Homebrew 的方式来安装 nvmwatchman flow


MacdeiMac:~ mac$ ruby -v

ruby 2.0.0p645 (2015-04-13 revision 50299) [universal.x86_64-darwin15]


MacdeiMac:~ mac$ pwd

/Users/mac

MacdeiMac:~ mac$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"


==> This script will install:

/usr/local/bin/brew

/usr/local/Library/...

/usr/local/share/man/man1/brew.1

==> The following directories will be made group writable:

/usr/local/.

/usr/local/bin

==> The following directories will have their owner set tomac:

/usr/local/.

/usr/local/bin

==> The following directories will have their group set toadmin:

/usr/local/.

/usr/local/bin


Press RETURN to continue or any other key to abort

按回车

==> /usr/bin/sudo /bin/chmod g+rwx /usr/local/. /usr/local/bin


WARNING: Improper use of the sudo command could lead to data loss

or the deletion of important system files. Please double-check your

typing when using sudo. Type "man sudo" for more information.


To proceed, enter your password, or type Ctrl-C to abort.


Password:输密码,回车

==> /usr/bin/sudo /usr/sbin/chown mac /usr/local/. /usr/local/bin

==> /usr/bin/sudo /usr/bin/chgrp admin /usr/local/. /usr/local/bin

==> /usr/bin/sudo /bin/mkdir /Library/Caches/Homebrew

==> /usr/bin/sudo /bin/chmod g+rwx /Library/Caches/Homebrew

==> /usr/bin/sudo /usr/sbin/chown mac /Library/Caches/Homebrew

==> Downloading and installing Homebrew...

remote: Counting objects: 3847, done.

remote: Compressing objects: 100% (3691/3691), done.

remote: Total 3847 (delta 39), reused 660 (delta 21), pack-reused 0

Receiving objects: 100% (3847/3847), 3.34 MiB | 215.00 KiB/s, done.

Resolving deltas: 100% (39/39), done.

From https://github.com/Homebrew/homebrew

 * [new branch]      master     -> origin/master

HEAD is now at fa338a5 notmuch: add mirror, improve emacs build

==> Installation successful!

==> Next steps

Run `brew help` to get started


输入 brew help 看看

MacdeiMac:~ mac$ brew help

Example usage:

  brew [info | home | options ] [FORMULA...]

  brew install FORMULA...

  brew uninstall FORMULA...

  brew search [foo]

  brew list [FORMULA...]

  brew update

  brew upgrade [FORMULA...]

  brew pin/unpin [FORMULA...]


Troubleshooting:

  brew doctor

  brew install -vd FORMULA

  brew [--env | config]


Brewing:

  brew create [URL [--no-fetch]]

  brew edit [FORMULA...]

  https://github.com/Homebrew/homebrew/blob/master/share/doc/homebrew/Formula-Cookbook.md


Further help:

  man brew

  brew home


安装任何东西前要运行  brew doctor看看

MacdeiMac:~ mac$ brew doctor

Your system is ready to brew.   这样说明ok


使用 Homebrew 来安装 nvm


MacdeiMac:~ mac$ brew install nvm

==> Downloading https://github.com/creationix/nvm/archive/v0.29.0.tar.gz

==> Downloading from https://codeload.github.com/creationix/nvm/tar.gz/v0.29.0

######################################################################## 100.0%

==> Caveats

Please note that upstream has asked us to make explicit managing

nvm via Homebrew is unsupported by them and you should check any

problems against the standard nvm install method prior to reporting.


You should create NVM's working directory if it doesn't exist:


  mkdir ~/.nvm


Add the following to ~/.bash_profile or your desired shell

configuration file:


  export NVM_DIR=~/.nvm

  source $(brew --prefix nvm)/nvm.sh


You can set $NVM_DIR to any location, but leaving it unchanged from

/usr/local/Cellar/nvm/0.29.0 will destroy any nvm-installed Node installations

upon upgrade/reinstall.


Type `nvm help` for further information.


Bash completion has been installed to:

  /usr/local/etc/bash_completion.d

==> Summary

��  /usr/local/Cellar/nvm/0.29.0: 6 files, 96K, built in 9 seconds


安装nvm成功,但当你输入nvm -v 

MacdeiMac:~ mac$ nvm -v

-bash: nvm: command not found

会告诉你不能调用,仔细看上面的文字,还需要做一些设置


来自:http://www.jb51.net/article/73424.htm   nvm 重启后终端 node ,npm失效的解决方案

如果你使用了上面的 brew 的安装方法

当安装成功后,请按照如下操作设置你的 shell配置文件


1

brew info nvm

你会看到下面的输出帮助信息


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

nvm: stable 0.26.1 (bottled), HEAD

Manage multiple Node.js versions

https://github.com/creationix/nvm

/usr/local/Cellar/nvm/0.26.1 (3173 files, 56M) *

 Poured from bottle

From: https://github.com/Homebrew/homebrew/blob/master/Library/Formula/nvm.rb

==> Caveats

Add NVM's working directory to your $HOME path (if it doesn't exist):

 

 mkdir ~/.nvm

 

Copy nvm-exec to NVM's working directory

 

 cp $(brew --prefix nvm)/nvm-exec ~/.nvm/

 

Add the following to $HOME/.bashrc, $HOME/.zshrc, or your shell's

equivalent configuration file:

 

 export NVM_DIR=~/.nvm

 source $(brew --prefix nvm)/nvm.sh

 

Type `nvm help` for further information.

 

Bash completion has been installed to:

 /usr/local/etc/bash_completion.d

我们需要按照上面提供的方法,首先在用户更目录下创建 .nvm 文件


1

mkdir ~/.nvm

然后把 nvm-exec 文件拷贝到你刚才新建的 .nvm目录下


1

cp $(brew --prefix nvm)/nvm-exec ~/.nvm/

然后去编辑你的 bash 配置文件 $HOME/.bashrc ,如果你 使用 zsh 那么编辑 $HOME/.zshrc 配置文件


1

nano ~/.bashrc


1

nano ~/.zshrc

把下面的内容粘贴进去


1

2

export NVM_DIR=~/.nvm

source $(brew --prefix nvm)/nvm.sh

最后让你的 shell 配置及时生效


1

source ~/.bashrc


1

`source ~/.zshrc'

最后你就不会再出现关闭终端重启,或者重启机器发现 node ,npm等系统环境变量失效的问题了.


MacdeiMac:~ mac$ nvm list

            N/A

node -> stable (-> N/A) (default)

iojs -> N/A (default)

MacdeiMac:~ mac$ 

MacdeiMac:~ mac$ nvm ls-remote

MacdeiMac:~ mac$ iojs-v3.3.1

         v4.0.0

         v4.1.0

         v4.1.1

         v4.1.2

         v4.2.0

         v4.2.1

         v4.2.2

         v5.0.0

         v5.1.0


接着运行nvm install node && nvm alias default node

MacdeiMac:~ mac$ nvm install node && nvm alias default node

Downloading https://nodejs.org/dist/v5.1.0/node-v5.1.0-darwin-x64.tar.gz...

######################################################################## 100.0%

WARNING: checksums are currently disabled for node.js v4.0 and later

Now using node v5.1.0 (npm v3.3.12)

default -> node (-> v5.1.0)


接着安装watchman

MacdeiMac:~ mac$ brew search watchman

watchman

MacdeiMac:~ mac$ brew info watchman

watchman: stable 4.1.0 (bottled), HEAD

Watch files and take action when they change

https://github.com/facebook/watchman

/usr/local/Cellar/watchman/4.1.0 (20 files, 316K) *

  Poured from bottle

From: https://github.com/Homebrew/homebrew/blob/master/Library/Formula/watchman.rb

==> Dependencies

Build: autoconf , automake

Required: pcre


MacdeiMac:~ mac$ brew install watchman

==> Installing dependencies for watchman:pcre

==> Installing watchman dependency:pcre

==> Downloading https://homebrew.bintray.com/bottles/pcre-8.37.el_capitan.bottle

######################################################################## 100.0%

==> Pouring pcre-8.37.el_capitan.bottle.tar.gz

��  /usr/local/Cellar/pcre/8.37: 146 files, 5.9M

==> Installing watchman

==> Downloading https://homebrew.bintray.com/bottles/watchman-4.1.0.el_capitan.b

######################################################################## 100.0%

==> Pouring watchman-4.1.0.el_capitan.bottle.tar.gz

��  /usr/local/Cellar/watchman/4.1.0: 20 files, 316K

MacdeiMac:~ mac$ watchman -v

4.1.0



接着安装flow

MacdeiMac:~ mac$ brew info flow

flow: stable 0.18.1 (bottled), HEAD

Static type checker for JavaScript

http://flowtype.org/

Not installed

From: https://github.com/Homebrew/homebrew/blob/master/Library/Formula/flow.rb

==> Dependencies

Build: ocaml

MacdeiMac:~ mac$ brew install flow

==> Downloading https://homebrew.bintray.com/bottles/flow-0.18.1.el_capitan.bott

######################################################################## 100.0%

==> Pouring flow-0.18.1.el_capitan.bottle.tar.gz

==> Caveats

Bash completion has been installed to:

  /usr/local/etc/bash_completion.d


zsh completion has been installed to:

  /usr/local/share/zsh/site-functions

==> Summary

��  /usr/local/Cellar/flow/0.18.1: 6 files, 5.8M



我们建议定期运行brew update && brew upgrade来使您的应用程序保持最新状态。



快速开始

$ npm install -g react-native-cli

$ react-native init AwesomeProject

$ cd AwesomeProject/

运行 iOS应用程序:

  • Xcode 中打开ios/AwesomeProject.xcodeproj并且点击运行。
  • 在选定的文本编辑器中打开index.ios.js并且编辑代码。
  • 点击 iOS模拟器中的 -R来重新加载应用程序并且观察发生的变化!



MacdeiMac:~ mac$ npm -v

3.3.12

MacdeiMac:~ mac$ npm install -g react-native-cli

/Users/mac/.nvm/versions/node/v5.1.0/bin/react-native -> /Users/mac/.nvm/versions/node/v5.1.0/lib/node_modules/react-native-cli/index.js

/Users/mac/.nvm/versions/node/v5.1.0/lib

└─┬ react-native-cli@0.1.7 

  ├─┬ chalk@1.1.1 

  │ ├── ansi-styles@2.1.0 

  │ ├── escape-string-regexp@1.0.3 

  │ ├─┬ has-ansi@2.0.0 

  │ │ └── ansi-regex@2.0.0 

  │ ├── strip-ansi@3.0.0 

  │ └── supports-color@2.0.0 

  ├─┬ prompt@0.2.14 

  │ ├── pkginfo@0.3.1 

  │ ├─┬ read@1.0.7 

  │ │ └── mute-stream@0.0.5 

  │ ├── revalidator@0.1.8 

  │ ├─┬ utile@0.2.1 

  │ │ ├── async@0.2.10 

  │ │ ├── deep-equal@1.0.1 

  │ │ ├── i@0.3.3 

  │ │ ├─┬ mkdirp@0.5.1 

  │ │ │ └── minimist@0.0.8 

  │ │ ├── ncp@0.4.2 

  │ │ └─┬ rimraf@2.4.4 

  │ │   └─┬ glob@5.0.15 

  │ │     ├─┬ inflight@1.0.4 

  │ │     │ └── wrappy@1.0.1 

  │ │     ├── inherits@2.0.1 

  │ │     ├─┬ minimatch@3.0.0 

  │ │     │ └─┬ brace-expansion@1.1.1 

  │ │     │   ├── balanced-match@0.2.1 

  │ │     │   └── concat-map@0.0.1 

  │ │     ├── once@1.3.3 

  │ │     └── path-is-absolute@1.0.0 

  │ └─┬ winston@0.8.3 

  │   ├── colors@0.6.2 

  │   ├── cycle@1.0.3 

  │   ├── eyes@0.1.8 

  │   ├── isstream@0.1.2 

  │   └── stack-trace@0.0.9 

  └── semver@5.1.0 


问题一:

再重启,nvm就无效了,说command not found

结果发现是  source ~/.bashrc 就有效了

我还傻傻旳去 brew update & brewupgrade

查看命令的命令是  which react-native 

查看环境变量的命令是 echo $PATH

查找文件夹的命令是  ls -a | grep .nvm

所以每次都要让shell及时生效的命令是1

source ~/.bashrc


问题二:

安装 atom,在setting界面搜索nuclide-installer,点击 install会出错无效,以为是网络问题,尝试多次无果,使用终端命令安装成功nam install nuclide-installer

但启动atom后出现红色问题:

cannot find module 'lodash/lang/isFunction'

google一番,尝试了安装jscs, lodash,

nam install -g jscs,

nam install -g lodash

atom错误改为 cannot find module ./context

而且在home目录下多了node_modules 这个目录,无奈之下

nam remove jscs,

nam remove lodash

rm -r node_modules


查看npm所有组件

nam ls -g


不管那么多了,直接尝试react-native

react-native init PropertyFinder

出错,用了代理翻墙也不行,

没办法,google之后决定使用淘宝的npm镜像

MacdeiMac:TestProj mac$ npm install -g cnpm --registry=https://registry.npm.taobao.org

/Users/mac/.nvm/versions/node/v5.1.0/bin/cnpm -> /Users/mac/.nvm/versions/node/v5.1.0/lib/node_modules/cnpm/bin/cnpm

/Users/mac/.nvm/versions/node/v5.1.0/bin/cnpm-sync -> /Users/mac/.nvm/versions/node/v5.1.0/lib/node_modules/cnpm/bin/cnpm-sync

/Users/mac/.nvm/versions/node/v5.1.0/bin/cnpm-web -> /Users/mac/.nvm/versions/node/v5.1.0/lib/node_modules/cnpm/bin/cnpm-web

/Users/mac/.nvm/versions/node/v5.1.0/bin/cnpm-check -> /Users/mac/.nvm/versions/node/v5.1.0/lib/node_modules/cnpm/bin/cnpm-check

/Users/mac/.nvm/versions/node/v5.1.0/bin/cnpm-user -> /Users/mac/.nvm/versions/node/v5.1.0/lib/node_modules/cnpm/bin/cnpm-user

/Users/mac/.nvm/versions/node/v5.1.0/bin/cnpm-doc -> /Users/mac/.nvm/versions/node/v5.1.0/lib/node_modules/cnpm/bin/cnpm-doc

/Users/mac/.nvm/versions/node/v5.1.0/bin/cnpm-search -> /Users/mac/.nvm/versions/node/v5.1.0/lib/node_modules/cnpm/bin/cnpm-search

/Users/mac/.nvm/versions/node/v5.1.0/lib

└─┬ cnpm@3.4.0 

  ├── auto-correct@1.0.0 

  ├── bagpipe@0.3.5 

  ├── colors@1.0.3 

  ├─┬ commander@2.7.1 

  │ └── graceful-readlink@1.0.1 

  ├─┬ cross-spawn@0.2.9 

  │ └── lru-cache@2.7.2 

  ├─┬ debug@2.2.0 

  │ └── ms@0.7.1 

  ├── giturl@1.0.0 

  ├─┬ node-gyp@3.0.3 

  │ ├─┬ fstream@1.0.8 

  │ │ └── inherits@2.0.1 

  │ ├─┬ glob@4.5.3 

  │ │ ├─┬ inflight@1.0.4 

  │ │ │ └── wrappy@1.0.1 

  │ │ ├─┬ minimatch@2.0.10 

  │ │ │ └─┬ brace-expansion@1.1.1 

  │ │ │   ├── balanced-match@0.2.1 

  │ │ │   └── concat-map@0.0.1 

  │ │ └── once@1.3.3 

  │ ├── graceful-fs@4.1.2 

  │ ├─┬ minimatch@1.0.0 

  │ │ └── sigmund@1.0.1 

  │ ├─┬ mkdirp@0.5.1 

  │ │ └── minimist@0.0.8 

  │ ├─┬ nopt@3.0.6 

  │ │ └── abbrev@1.0.7 

  │ ├─┬ npmlog@1.2.1 

  │ │ ├── ansi@0.3.0 

  │ │ ├─┬ are-we-there-yet@1.0.4 

  │ │ │ ├── delegates@0.1.0 

  │ │ │ └─┬ readable-stream@1.1.13 

  │ │ │   ├── core-util-is@1.0.2 

  │ │ │   ├── isarray@0.0.1 

  │ │ │   └── string_decoder@0.10.31 

  │ │ └─┬ gauge@1.2.2 

  │ │   ├── has-unicode@1.0.1 

  │ │   ├─┬ lodash.pad@3.1.1 

  │ │   │ ├── lodash._basetostring@3.0.1 

  │ │   │ └─┬ lodash._createpadding@3.6.1 

  │ │   │   └── lodash.repeat@3.0.1 

  │ │   ├── lodash.padleft@3.1.1 

  │ │   └── lodash.padright@3.1.1 

  │ ├─┬ osenv@0.1.3 

  │ │ ├── os-homedir@1.0.1 

  │ │ └── os-tmpdir@1.0.1 

  │ ├─┬ path-array@1.0.0 

  │ │ └── array-index@0.1.1 

  │ ├─┬ request@2.67.0 

  │ │ ├── aws-sign2@0.6.0 

  │ │ ├─┬ bl@1.0.0 

  │ │ │ └─┬ readable-stream@2.0.4 

  │ │ │   ├── process-nextick-args@1.0.3 

  │ │ │   └── util-deprecate@1.0.2 

  │ │ ├── caseless@0.11.0 

  │ │ ├─┬ combined-stream@1.0.5 

  │ │ │ └── delayed-stream@1.0.0 

  │ │ ├── extend@3.0.0 

  │ │ ├── forever-agent@0.6.1 

  │ │ ├─┬ form-data@1.0.0-rc3 

  │ │ │ └── async@1.5.0 

  │ │ ├─┬ har-validator@2.0.3 

  │ │ │ ├─┬ chalk@1.1.1 

  │ │ │ │ ├── ansi-styles@2.1.0 

  │ │ │ │ ├── escape-string-regexp@1.0.3 

  │ │ │ │ ├─┬ has-ansi@2.0.0 

  │ │ │ │ │ └── ansi-regex@2.0.0 

  │ │ │ │ ├── strip-ansi@3.0.0 

  │ │ │ │ └── supports-color@2.0.0 

  │ │ │ ├── commander@2.9.0 

  │ │ │ ├─┬ is-my-json-valid@2.12.3 

  │ │ │ │ ├── generate-function@2.0.0 

  │ │ │ │ ├─┬ generate-object-property@1.2.0 

  │ │ │ │ │ └── is-property@1.0.2 

  │ │ │ │ ├── jsonpointer@2.0.0 

  │ │ │ │ └── xtend@4.0.1 

  │ │ │ └─┬ pinkie-promise@2.0.0 

  │ │ │   └── pinkie@2.0.1 

  │ │ ├─┬ hawk@3.1.2 

  │ │ │ ├── boom@2.10.1 

  │ │ │ ├── cryptiles@2.0.5 

  │ │ │ ├── hoek@2.16.3 

  │ │ │ └── sntp@1.0.9 

  │ │ ├─┬ http-signature@1.1.0 

  │ │ │ ├── assert-plus@0.1.5 

  │ │ │ ├─┬ jsprim@1.2.2 

  │ │ │ │ ├── extsprintf@1.0.2 

  │ │ │ │ ├── json-schema@0.2.2 

  │ │ │ │ └── verror@1.3.6 

  │ │ │ └─┬ sshpk@1.7.0 

  │ │ │   ├── asn1@0.2.3 

  │ │ │   ├── assert-plus@0.2.0 

  │ │ │   ├── dashdash@1.10.1 

  │ │ │   ├── ecc-jsbn@0.1.1 

  │ │ │   ├── jodid25519@1.0.2 

  │ │ │   ├── jsbn@0.1.0 

  │ │ │   └── tweetnacl@0.13.2 

  │ │ ├── is-typedarray@1.0.0 

  │ │ ├── isstream@0.1.2 

  │ │ ├── json-stringify-safe@5.0.1 

  │ │ ├─┬ mime-types@2.1.7 

  │ │ │ └── mime-db@1.19.0 

  │ │ ├── node-uuid@1.4.7 

  │ │ ├── oauth-sign@0.8.0 

  │ │ ├── qs@5.2.0 

  │ │ ├── stringstream@0.0.5 

  │ │ ├── tough-cookie@2.2.1 

  │ │ └── tunnel-agent@0.4.1 

  │ ├─┬ rimraf@2.4.4 

  │ │ └─┬ glob@5.0.15 

  │ │   ├── minimatch@3.0.0 

  │ │   └── path-is-absolute@1.0.0 

  │ ├── semver@5.1.0 

  │ ├─┬ tar@1.0.3 

  │ │ └── block-stream@0.0.8 

  │ └─┬ which@1.2.0 

  │   └─┬ is-absolute@0.1.7 

  │     └── is-relative@0.1.3 

  ├─┬ npm@2.14.12 

  │ ├── abbrev@1.0.7 

  │ ├── ansi@0.3.0 

  │ ├── ansi-regex@2.0.0 

  │ ├── block-stream@0.0.8 

  │ ├── fstream@1.0.8 

  │ ├─┬ glob@5.0.15 

  │ │ └── path-is-absolute@1.0.0 

  │ ├── graceful-fs@4.1.2 

  │ ├── inflight@1.0.4 

  │ ├── inherits@2.0.1 

  │ ├─┬ minimatch@3.0.0 

  │ │ └─┬ brace-expansion@1.1.1 

  │ │   ├── balanced-match@0.2.1 

  │ │   └── concat-map@0.0.1 

  │ ├─┬ mkdirp@0.5.1 

  │ │ └── minimist@0.0.8 

  │ ├─┬ node-gyp@3.0.3 

  │ │ ├─┬ glob@4.5.3 

  │ │ │ └─┬ minimatch@2.0.10 

  │ │ │   └─┬ brace-expansion@1.1.1 

  │ │ │     ├── balanced-match@0.2.1 

  │ │ │     └── concat-map@0.0.1 

  │ │ ├─┬ minimatch@1.0.0 

  │ │ │ └── sigmund@1.0.1 

  │ │ ├─┬ npmlog@1.2.1 

  │ │ │ ├─┬ are-we-there-yet@1.0.4 

  │ │ │ │ └── delegates@0.1.0 

  │ │ │ └─┬ gauge@1.2.2 

  │ │ │   ├── has-unicode@1.0.1 

  │ │ │   ├─┬ lodash.pad@3.1.1 

  │ │ │   │ ├── lodash._basetostring@3.0.1 

  │ │ │   │ └─┬ lodash._createpadding@3.6.1 

  │ │ │   │   └── lodash.repeat@3.0.1 

  │ │ │   ├─┬ lodash.padleft@3.1.1 

  │ │ │   │ ├── lodash._basetostring@3.0.1 

  │ │ │   │ └─┬ lodash._createpadding@3.6.1 

  │ │ │   │   └── lodash.repeat@3.0.1 

  │ │ │   └─┬ lodash.padright@3.1.1 

  │ │ │     ├── lodash._basetostring@3.0.1 

  │ │ │     └─┬ lodash._createpadding@3.6.1 

  │ │ │       └── lodash.repeat@3.0.1 

  │ │ ├─┬ path-array@1.0.0 

  │ │ │ └─┬ array-index@0.1.1 

  │ │ │   └─┬ debug@2.2.0 

  │ │ │     └── ms@0.7.1 

  │ │ └── tar@1.0.3 

  │ ├── nopt@3.0.6 

  │ ├─┬ npm-install-checks@1.0.6

  │ │ └─┬ npmlog@1.2.1 

  │ │   ├─┬ are-we-there-yet@1.0.4 

  │ │   │ └── delegates@0.1.0 

  │ │   └─┬ gauge@1.2.2 

  │ │     ├── has-unicode@1.0.1 

  │ │     ├─┬ lodash.pad@3.1.1 

  │ │     │ ├── lodash._basetostring@3.0.1 

  │ │     │ └─┬ lodash._createpadding@3.6.1 

  │ │     │   └── lodash.repeat@3.0.1 

  │ │     ├─┬ lodash.padleft@3.1.1 

  │ │     │ ├── lodash._basetostring@3.0.1 

  │ │     │ └─┬ lodash._createpadding@3.6.1 

  │ │     │   └── lodash.repeat@3.0.1 

  │ │     └─┬ lodash.padright@3.1.1 

  │ │       ├── lodash._basetostring@3.0.1 

  │ │       └─┬ lodash._createpadding@3.6.1 

  │ │         └── lodash.repeat@3.0.1 

  │ ├─┬ npm-registry-client@7.0.8

  │ │ └─┬ concat-stream@1.5.1

  │ │   └─┬ readable-stream@2.0.4 

  │ │     ├── isarray@0.0.1 

  │ │     ├── process-nextick-args@1.0.3 

  │ │     ├── string_decoder@0.10.31 

  │ │     └── util-deprecate@1.0.2 

  │ ├─┬ npmlog@2.0.0

  │ │ ├─┬ are-we-there-yet@1.0.4 

  │ │ │ └── delegates@0.1.0 

  │ │ └─┬ gauge@1.2.2 

  │ │   ├── has-unicode@1.0.1 

  │ │   ├─┬ lodash.pad@3.1.1 

  │ │   │ ├── lodash._basetostring@3.0.1 

  │ │   │ └─┬ lodash._createpadding@3.6.1 

  │ │   │   └── lodash.repeat@3.0.1 

  │ │   ├─┬ lodash.padleft@3.1.1 

  │ │   │ ├── lodash._basetostring@3.0.1 

  │ │   │ └─┬ lodash._createpadding@3.6.1 

  │ │   │   └── lodash.repeat@3.0.1 

  │ │   └─┬ lodash.padright@3.1.1 

  │ │     ├── lodash._basetostring@3.0.1 

  │ │     └─┬ lodash._createpadding@3.6.1 

  │ │       └── lodash.repeat@3.0.1 

  │ ├─┬ osenv@0.1.3 

  │ │ └── os-tmpdir@1.0.1 

  │ ├─┬ readable-stream@1.1.13 

  │ │ ├── isarray@0.0.1 

  │ │ └── string_decoder@0.10.31 

  │ ├─┬ request@2.65.0

  │ │ ├── aws-sign2@0.6.0 

  │ │ ├─┬ bl@1.0.0 

  │ │ │ └─┬ readable-stream@2.0.3

  │ │ │   ├── isarray@0.0.1 

  │ │ │   ├── process-nextick-args@1.0.3 

  │ │ │   ├── string_decoder@0.10.31 

  │ │ │   └── util-deprecate@1.0.2 

  │ │ ├── caseless@0.11.0 

  │ │ ├─┬ combined-stream@1.0.5 

  │ │ │ └── delayed-stream@1.0.0 

  │ │ ├── extend@3.0.0 

  │ │ ├── forever-agent@0.6.1 

  │ │ ├─┬ form-data@1.0.0-rc3 

  │ │ │ └── async@1.5.0 

  │ │ ├─┬ har-validator@2.0.2

  │ │ │ ├─┬ chalk@1.1.1 

  │ │ │ │ ├── ansi-styles@2.1.0 

  │ │ │ │ ├── escape-string-regexp@1.0.3 

  │ │ │ │ ├── has-ansi@2.0.0 

  │ │ │ │ └── supports-color@2.0.0 

  │ │ │ ├─┬ commander@2.9.0 

  │ │ │ │ └── graceful-readlink@1.0.1 

  │ │ │ └─┬ is-my-json-valid@2.12.2

  │ │ │   ├── generate-function@2.0.0 

  │ │ │   ├─┬ generate-object-property@1.2.0 

  │ │ │   │ └── is-property@1.0.2 

  │ │ │   └── jsonpointer@2.0.0 

  │ │ ├─┬ hawk@3.1.0

  │ │ │ ├── cryptiles@2.0.5 

  │ │ │ ├── hoek@2.16.3 

  │ │ │ └── sntp@1.0.9 

  │ │ ├─┬ http-signature@0.11.0

  │ │ │ └── assert-plus@0.1.5 

  │ │ ├── isstream@0.1.2 

  │ │ ├── json-stringify-safe@5.0.1 

  │ │ ├─┬ mime-types@2.1.7 

  │ │ │ └── mime-db@1.19.0 

  │ │ ├── oauth-sign@0.8.0 

  │ │ ├── qs@5.2.0 

  │ │ ├── stringstream@0.0.5 

  │ │ └── tunnel-agent@0.4.1 

  │ ├─┬ sha@2.0.1

  │ │ └─┬ readable-stream@2.0.2

  │ │   ├── isarray@0.0.1 

  │ │   ├── process-nextick-args@1.0.3 

  │ │   └── string_decoder@0.10.31 

  │ ├── strip-ansi@3.0.0 

  │ ├─┬ which@1.2.0 

  │ │ └─┬ is-absolute@0.1.7 

  │ │   └── is-relative@0.1.3 

  │ └── wrappy@1.0.1 

  ├─┬ npm-request@0.0.4 

  │ └─┬ urllib@0.5.11 

  │   └── debug@0.7.4 

  ├── open@0.0.5 

  └─┬ urllib@2.5.0 

    ├── default-user-agent@0.0.1 

    ├─┬ digest-header@0.0.1 

    │ └─┬ utility@0.1.11 

    │   └── address@1.0.0 

    ├─┬ humanize-ms@1.0.1 

    │ └── ms@0.6.2 

    ├── iconv-lite@0.4.13 

    ├── media-typer@0.3.0 

    ├── native-or-bluebird@1.2.0 

    └── statuses@1.2.1 


再跑初始化项目也是不行,等很久,我ctrl c了

MacdeiMac:TestProj mac$ npm cache clean

记得清除缓存


试试这个http://tianweishu.com/2015/10/08/problems-when-config-react-native-env/

替换npm镜像


npm官方的源不稳定,我们可以使用国内淘宝的源http://registry.npm.taobao.org/ ;执行下面的命令即可:

npm config set registry=http://registry.npm.taobao.org/

MacdeiMac:TestProj mac$ npm config set registry=http://registry.npm.taobao.org/


再跑初始化项目也是等很久,好吧,我错怪 cnmp 了,等呗,

折腾了半天,还是不行,我把前面的git 的http_proxy 给删除了

把nam 的 服务器设置为淘宝的也删除了。

花钱买了个vpn,花了1个钟头下载完毕。。。嗯嗯,,,泪奔


MacdeiMac:~ mac$ cd Documents/DevOps/TestProj/

MacdeiMac:TestProj mac$ react-native init PropertyFinder

This will walk you through creating a new React Native project in /Users/mac/Documents/DevOps/TestProj/PropertyFinder

Installing react-native package from npm...

这里花了一个钟头,说好的十分钟呢

MacdeiMac:TestProj mac$ react-native init PropertyFinder

prompt: Directory PropertyFinder already exist. Continue?:  (no) y

This will walk you through creating a new React Native project in /Users/mac/Documents/DevOps/TestProj/PropertyFinder

Installing react-native package from npm...

^[[A^[[BSetting up new React Native app in /Users/mac/Documents/DevOps/TestProj/PropertyFinder

To run your app on iOS:

   Open /Users/mac/Documents/DevOps/TestProj/PropertyFinder/ios/PropertyFinder.xcodeproj in Xcode

   Hit the Run button

To run your app on Android:

   Have an Android emulator running (quickest way to get started), or a device connected

   cd /Users/mac/Documents/DevOps/TestProj/PropertyFinder

   react-native run-android


好吧,千辛万苦滴,以为守得云开啦,

兴高采烈滴进去项目里打开xcode project 文件,编译运行,果然编译通过,可是运行出错,

一片红色,说要运行npm start,保证 http://localhost:8081 ……

我跑到home目录下运行,各种错,搞得我又进入以为出错了,,,惊慌失措一番

后来无意中跑道项目文件里,运行 npm start,貌似可以运行,原来npm start命令所在的文件夹需要有package.json文件来执行,先运行npm install看看有没有漏安装的,再运行 npm start


执行后提示有错和解决方法

MacdeiMac:~ mac$ cd Documents/DevOps/TestProj/PropertyFinder/

MacdeiMac:PropertyFinder mac$ ls

android index.ios.jsnode_modules

index.android.js iospackage.json

MacdeiMac:PropertyFinder mac$ npm install

MacdeiMac:PropertyFinder mac$ npm start


> PropertyFinder@0.0.1 start /Users/mac/Documents/DevOps/TestProj/PropertyFinder

> react-native start


Looks like you installed react-native globally, maybe you meant react-native-cli?

To fix the issue, run:

npm uninstall -g react-native

npm install -g react-native-cli


好吧,照做吧

MacdeiMac:PropertyFinder mac$ npm uninstall -g react-native

MacdeiMac:PropertyFinder mac$ which react-native

/Users/mac/.nvm/versions/node/v5.1.0/bin/react-native

MacdeiMac:PropertyFinder mac$ npm install -g react-native-cli

/Users/mac/.nvm/versions/node/v5.1.0/bin/react-native -> /Users/mac/.nvm/versions/node/v5.1.0/lib/node_modules/react-native-cli/index.js

/Users/mac/.nvm/versions/node/v5.1.0/lib

└── react-native-cli@0.1.7 


再跑nam start仍然是一样的错误

MacdeiMac:PropertyFinder mac$ npm start


> PropertyFinder@0.0.1 start /Users/mac/Documents/DevOps/TestProj/PropertyFinder

> react-native start


Looks like you installed react-native globally, maybe you meant react-native-cli?

To fix the issue, run:

npm uninstall -g react-native

npm install -g react-native-cli


绝望了,随手打了命令,了不起让react-native 自己运行

MacdeiMac:PropertyFinder mac$ react-native start

 ┌────────────────────────────────────────────────────────────────────────────┐ 

 │  Running packager on port 8081.                                            │ 

 │                                                                            │ 

 │  Keep this packager running while developing on any JS projects. Feel      │ 

 │  free to close this tab and run your own packager instance if you          │ 

 │  prefer.                                                                   │ 

 │                                                                            │ 

 │  https://github.com/facebook/react-native                                  │ 

 │                                                                            │ 

 └────────────────────────────────────────────────────────────────────────────┘ 

Looking for JS files in

   /Users/mac/Documents/DevOps/TestProj/PropertyFinder 


[18:31:24] <START> Building Dependency Graph

[18:31:24] <START> Crawling File System

[18:31:24] <START> Loading bundles layout

[18:31:24] <END>   Loading bundles layout (0ms)


React packager ready.


/Users/mac/Library/LaunchAgents/com.github.facebook.watchman.plist: Could not find specified service


/Users/mac/Library/LaunchAgents/com.github.facebook.watchman.plist: service already loaded


[18:31:25] <END>   Crawling File System (1463ms)

[18:31:25] <START> Building in-memory fs for JavaScript

[18:31:26] <END>   Building in-memory fs for JavaScript (404ms)

[18:31:26] <START> Building in-memory fs for Assets

[18:31:26] <END>   Building in-memory fs for Assets (351ms)

[18:31:26] <START> Building Haste Map

[18:31:27] <START> Building (deprecated) Asset Map

[18:31:27] <END>   Building (deprecated) Asset Map (72ms)

[18:31:27] <END>   Building Haste Map (626ms)

[18:31:27] <END>   Building Dependency Graph (2851ms)

[18:31:54] <START> request:/index.ios.bundle?platform=ios&dev=true

[18:31:54] <START> find dependencies

[18:31:55] <END>   find dependencies (215ms)


竟然成功了,哇哈哈,用浏览器浏览模拟器提示的网址:http://localhost:8081/index.ios.bundle?platform=ios&dev=true,竟然有返回,终端反馈如下

[18:31:55] <START> transform

transforming [========================================] 100% 330/330

[18:31:58] <END>   transform (3504ms)

[18:31:58] <END>   request:/index.ios.bundle?platform=ios&dev=true (3743ms)

::ffff:127.0.0.1 - - [25/Nov/2015:10:31:58 +0000] "GET /favicon.ico HTTP/1.1" 404 24 "http://localhost:8081/index.ios.bundle?platform=ios&dev=true" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/601.2.7 (KHTML, like Gecko) Version/9.0.1 Safari/601.2.7"

[18:32:30] <START> request:/index.ios.bundle?platform=ios&dev=true

[18:32:30] <END>   request:/index.ios.bundle?platform=ios&dev=true (20ms)

::1 - - [25/Nov/2015:10:32:30 +0000] "GET /flow/ HTTP/1.1" 404 18 "-" "PropertyFinder/1 CFNetwork/758.1.6 Darwin/15.0.0"

[18:32:48] <START> request:/index.ios.bundle?platform=ios&dev=true

[18:32:48] <END>   request:/index.ios.bundle?platform=ios&dev=true (15ms)

::1 - - [25/Nov/2015:10:32:48 +0000] "GET /flow/ HTTP/1.1" 404 18 "-" "PropertyFinder/1 CFNetwork/758.1.6 Darwin/15.0.0"

[18:38:34] <START> request:/index.ios.bundle?platform=ios&dev=true

[18:38:34] <END>   request:/index.ios.bundle?platform=ios&dev=true (14ms)

::1 - - [25/Nov/2015:10:38:34 +0000] "GET /flow/ HTTP/1.1" 404 18 "-" "PropertyFinder/1 CFNetwork/758.1.6 Darwin/15.0.0"


泪奔。。。比电视剧还峰回路转,折磨人啊

重新xcode运行app,模拟器终于看到人家网页上的文字了,非人的安装过程啊。




我们建议定期运行brew update && brew upgrade来使您的应用程序保持最新状态。


0 0