react-native安装使用

时间：2022-09-04 09:58:04

安装React-native 需要的几个重要的步骤：

    1. OS X - This repo only contains the iOS implementation right now, and Xcode only runs on Mac.
    2. New to Xcode? Download it from the Mac App Store.
    3. Homebrew is the recommended way to install node, watchman, and flow.
    4. brew install node. New to node or npm?
    5. brew install watchman. We recommend installing watchman, otherwise you might hit a node file watching bug.
    6. brew install flow. If you want to use flow.

第一、二步就不说了，xCode是IOS开发必备的IDE。

第三步:安装 Homebrew 这个工具是安装node watchman 的前提，首先http://brew.sh/到这个网址 按照提示 安装Homebrew工具。在命令行中输入

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

运行上面命令目前必须通过VPN才能够正确安装，这也是国内局域网的缺陷，20块钱一个月，可以买来玩一个月。不过对于一个程序员来说，VPN这个东西还是非常重要的。根据可以需要购买。

第四、五步按照提示安装即可。到目前为止环境已经搭建完成了。

之后就是验证自己安装的工具是否可用了。在命令行中输入npm start，下面是我运行的时候出现的错误以及解决方案

Watchman took too long to load 

Permission settings prevent Watchman from loading. A recent update solves this, get a HEAD install of Watchman if you are experiencing this error.

brew uninstall watchmanbrew install--HEAD watchman

Quick start 

    • npm install -g react-native-cli
    • react-native init AwesomeProject

在使用nom install -g react-native-cli 会出现说

tar.unpack untar error /Users/terrylmay/.npm/react-native-cli/0.1.3/package.tgz 即解压失败。这主要是由于npm文件夹操作是需要root权限的。所以在运行该命令之前加上sudo 即可。

最后，创建AwesomeProject 工程。命令行运行完成之后，你可以看到如下输出:

CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
react-native@0.4.1 node_modules/react-native
├── absolute-path@0.0.0
├── stacktrace-parser@0.1.1
├── react-timer-mixin@0.13.1
├── underscore@1.7.0
├── image-size@0.3.5
├── yargs@1.3.2
├── debug@2.1.3 (ms@0.7.0)
├── bluebird@2.9.25
├── optimist@0.6.1 (wordwrap@0.0.2, minimist@0.0.10)
├── rebound@0.0.12
├── source-map@0.1.31 (amdefine@0.1.0)
├── promise@7.0.1 (asap@2.0.3)
├── chalk@1.0.0 (escape-string-regexp@1.0.3, ansi-styles@2.0.1, supports-color@1.3.1, strip-ansi@2.0.1, has-ansi@1.0.3)
├── worker-farm@1.1.0 (xtend@4.0.0, errno@0.1.2)
├── jstransform@10.1.0 (base62@0.1.1, esprima-fb@13001.1001.0-dev-harmony-fb)
├── uglify-js@2.4.20 (uglify-to-browserify@1.0.2, async@0.2.10, source-map@0.1.34, yargs@3.5.4)
├── sane@1.0.3 (watch@0.10.0, fb-watchman@0.0.0, minimatch@0.2.14, walker@1.0.6)
├── module-deps@3.5.6 (inherits@2.0.1, shallow-copy@0.0.1, minimist@0.2.0, subarg@0.0.1, stream-combiner2@1.0.2, resolve@0.7.4, parents@1.0.1, browser-resolve@1.8.2, readable-stream@1.0.33, duplexer2@0.0.2, concat-stream@1.4.8, through2@0.4.2, JSONStream@0.7.4, detective@3.1.0)
├── react-tools@0.13.1 (commoner@0.10.1)
├── joi@5.1.0 (topo@1.0.2, isemail@1.1.1, hoek@2.12.0, moment@2.10.2)
├── connect@2.8.3 (methods@0.0.1, uid2@0.0.2, fresh@0.1.0, pause@0.0.1, cookie-signature@1.0.1, qs@0.6.5, bytes@0.2.0, buffer-crc32@0.2.1, cookie@0.1.0, formidable@1.0.14, send@0.1.2)
└── ws@0.4.31 (tinycolor@0.0.1, options@0.0.6, commander@0.6.1, nan@0.3.2)
Setting up new React Native app in /Users/terrylmay/Project/react-native/react-native_project/AwesomeProject

Next steps:

   Open /Users/terrylmay/Project/react-native/react-native_project/AwesomeProject/AwesomeProject.xcodeproj in Xcode
   Hit Run button
这就表示 创建工程已经成功了。打开工程所在位置,在xCode中打开工程。同时进入命令行 切换到工程所在目录即/*/*/*/*.../*/AwesomeProject 下运行npm start 命令，并且运行xCode中的工程即可看到 react-native工程运行的效果了。如果遇到说在某某目录下找不到 index.ios.js这个文件，说明你打开npm server的目录是不正确的。node server并没有监听到工程所在目录。贴一下运行效果图吧:

react-native安装使用

如果有疑问的地方可以问我，我们一同探讨。

标签：

相关文章