react native环境配置

作者: zhaok | 来源:发表于2017-01-16 14:38 被阅读131次

    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+鼠标左键

    相关文章

      网友评论

        本文标题:react native环境配置

        本文链接:https://www.haomeiwen.com/subject/ufhpbttx.html