React Native开发经验集React Native开发

react native环境配置

2017-01-16  本文已影响131人  zhaok

Mac上react native环境配置

1.安装Homebrew

Homebrew是OS X上的包管理器

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

介绍一些Homebrew常用的命令以git为例

$ brew install git      //安装软件
$ brew uninstall git    //卸载软件
$ brew search git       //搜索软件
$ brew upgrade git      //更新软件
$ brew cleanup git      //删除软件
$ brew outdated         //查看哪些软件需要更新
$ brew upgrade          //把所有的Formula目录更新
$ brew list             //显示已经安装的软件列表
2.安装Watchman

watchman是 facebook 的一个开源项目,它开源用来监视文件并且记录文件的改动情况,当文件变更它可以触发一些操作,例如执行一些命令等等。

$ brew install watchman
3.安装Flow

Flow使用flow来为js代码加上类型检查(不是一定要安装)

$ brew install Flow
4.安装Node.js

Node.js一定要安装版本大于4.0

$ brew install Node

这边算一个遇到的坑
Node.js安装好之后可以查看下版本

$ node -v

我当时查看出来的版本是v0.12.4
也就导致了后面生成ReactNativeProject文件出现

You are currently running Node v0.12.4 but React Native requires >=4. Please use a supported version of Node.
See https://facebook.github.io/react-native/docs/getting-started.html
/Users/zhaok/ReactNativeProject/node_modules/react-native/local-cli/cli.js:123
class CreateSuppressingTerminalAdapter extends TerminalAdapter {
^^^^^
SyntaxError: Unexpected reserved word
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Module._extensions..js (module.js:478:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/zhaok/ReactNativeProject/node_modules/react-native/node_modules/babel-register/lib/node.js:166:7)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/zhaok/ReactNativeProject/node_modules/react-native/cli.js:15:18)
    at Module._compile (module.js:460:26)

如果Node.js版本大于v4忽略一块

由于node版本过低后面生成文件会有问题
安装node版本控制工具Node Version Manager

$ brew install nvm

其次需要在shell的配置文件(~/.bashrc, ~/.profile, or ~/.zshrc)中添加如下内容:

$ echo "source $(brew --prefix nvm)/nvm.sh" >> .bash_profile
$ . ~/.bash_profile

这样就可以在shell里面输入nvm命令啦~
先用$ nvm ls-remote指令看一下有哪些版本可以安裝
我安装的是v6.0.0

$ nvm install v6.0.0

安装好之后默认会切换到安装的版本<br />
可以用$ nvm ls查看下一共安装哪些Node.js的版本

5.依赖软件安装完毕,就可以创建React Native工程啦
1.$ npm install -g react-native-cli     //安装做react-native的命令
2.$ react-native init ReactNativeProject    //初始化一个工程、下载React Native的所有源代码和依赖包(项目名称自己取哦)
3.react-native命令行从npm官方源拖代码时会遇上麻烦(国情你懂的哈哈哈哈)。
先将npm仓库源替换为国内镜像:
$ npm config set registry https://registry.npm.taobao.org
$ npm config set disturl https://npm.taobao.org/dist

生成的ReactNativeProject项目路径在user里哦!

6.开发工具Atom

Atom推荐点插件:

1.Nuclide(代码补全)

2.docblockr(注释插件)
/** + tab or enter

3.hyperclick和js-hyperclick(通过引用跳转到需要类和方法.)
command+鼠标左键

上一篇 下一篇

猜你喜欢

热点阅读