育知同创-中国HTML5培训、Java培训高品质教育品牌

加入收藏 关于我们 咨询电话:010-82583705
北京
其他分校: 北京校区 深圳校区

▶ 您现在的位置:首页 > 行业动态 > [技术文章]一步一步搭建RN开发环境

[技术文章]一步一步搭建RN开发环境

时间:2016-08-17 17:31:21  来源:育知同创  作者:育知

  • 1、环境搭建

    工欲善其事,必先利其器。首先,我们需要搭建开发环境(我们以后的文章和视频均是以Mac OS X系统为基础)。React Native主要依赖以下环境。

    Mac OS X操作系统。推荐使用Xcode 7.3.0或者更高版本。安装Node.js v6.2.1或者最新版本。利用Homebrew安装watchman和flow。安装React Native安装NVM创建第一个HelloWorld程序下面我们一步步来安装开发环境。

     

    1.1 安装Xcode

    打开Mac电脑,打开App Store,在App Store中搜索Xcode,双击Xcode,输入apple id下载安装即可。

     

    1.jpg

     

    1.2 安装Node.js

    Node.js官网:https://nodejs.org

     

    打开Node.js官网:

     

    2.jpg

     

    下载v6.2.1版本,下载完成以后双击node-v6.2.1.pkg包进行安装。

     

    3.jpg

     

    从上图中中This package will install Node.js v6.2.1 and nam v3.9.3 into /usr/local/.这句话表明我们将会安装Node.js v6.2.1和npm 3.9.3版本.

     

    4.jpg

    5.jpg

    6.jpg

    7.jpg

    8.jpg

    9.jpg

     

    上图表示Node.js和npm都是安装在/usr/local/bin/路径下面。

     

    1.3 利用Homebrew安装watchman和flow

     

    10.jpg

     

    打开终端,按照如下操作即可.

     

    11.jpg

    12.jpg

     

    接下来通过brew安装watchman和flow.

     

    13.jpg

    现在万事具备,只欠东风。我们通过npm安装react-native-cli的命令行工具。在mac终端中输入如下命令,其中-g表示全局安装。

    14.jpg

     

    1.4 NVM安装

    bogon:Desktop lucien$ git clone https://github.com/creationix/nvm

     

    Cloning into ‘nvm’…

     

    remote: Counting objects: 4718, done.

     

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

     

    remote: Total 4718 (delta 1), reused 0 (delta 0), pack-reused 4712

     

    Receiving objects: 100% (4718/4718), 1.26 MiB | 85.00 KiB/s, done.

     

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

     

    Checking connectivity… done.

     

    bogon:Desktop lucien$ cd nvm/

     

    bogon:nvm lucien$ ls

     

    CONTRIBUTING.md README.markdown nvm-exec test

     

    LICENSE.md bash_completion nvm.sh update_test_mocks.sh

     

    Makefile install.sh package.json

     

    bogon:nvm lucien$ source nvm.sh

     

    bogon:nvm lucien$ nvm

     

    Node Version Manager

     

    Note: <version>refers to any version-like string nvm understands. This includes:

     

    – full or partial version numbers, starting with an optional “v” (0.10, v0.1.2, v1)

     

    – default (built-in) aliases: node, stable, unstable, iojs, system

     

    – custom aliases you define with `nvm alias foo`

     

    Usage:

     

    nvm –help           Show this message

     

    nvm –version           Print out the latest released version of nvm

     

    nvm install [-s]           Download and install a , [-s] from source. Uses .nvmrc if available

     

    –reinstall-packages-from=<version>           When installing, reinstall packages installed in<node|iojs|node version number>

     

    nvm uninstall <version>           Uninstall a version

     

    nvm use [–silent] <version>          Modify PATH to use <version> . Uses .nvmrc if available

     

    nvm exec [–silent] <version> [<command>] Run <command> on <version> . Uses .nvmrc if available

     

    nvm run [–silent] <version> [<args>]           Run `node` on <version>  with <args> as arguments. Uses .nvmrc if available

     

    nvm current           Display currently activated version

     

    nvm ls           List installed versions

     

    nvm ls <version>           List versions matching a given description

     

    nvm ls-remote <version>            List remote versions available for install

     

    nvm ls-remote <version>           List remote versions available for install, matching a given <version>

     

    nvm version <version>           Resolve the given description to a single local version

     

    nvm version-remote <version>           Resolve the given description to a single remote version

     

    nvm deactivate           Undo effects of `nvm` on current shell

     

    nvm alias [<pattern>]           Show all aliases beginning with <pattern>

     

    nvm alias <name> <version>          Set an alias named pointing to<version>

     

    nvm unalias <name>           Deletes the alias named <name> 

     

    nvm reinstall-packages <version>           Reinstall global `npm` packages contained in <version> to current version

     

    nvm unload           Unload `nvm` from shell

     

    nvm which [<version>]           Display path to installed node version. Uses .nvmrc if available

     

    Example:

     

    nvm install v0.10.32           Install a specific version number

     

    nvm use 0.10           Use the latest available 0.10.x release

     

    nvm run 0.10.32 app.js           Run app.js using node v0.10.32

     

    nvm exec 0.10.32 node app.js           Run `node app.js` with the PATH pointing to node v0.10.32

     

    nvm alias default 0.10.32           Set default node version on a shell

     

    Note:

     

    to remove, delete, or uninstall nvm – just remove the `$NVM_DIR` folder (usually `~/.nvm`)

     

    bogon:nvm lucien$ nvm ls -remote

     

          N/A

     

    bogon:nvm lucien$ nvm ls

     

    -> v6.2.1

     

    system

     

    default -> node (-> v6.2.1)

     

    node -> stable (-> v6.2.1) (default)

     

    stable -> 6.2 (-> v6.2.1) (default)

     

    iojs -> N/A (default)

     

    bogon:nvm lucien$

     

    1.5 创建项目

    搭建好RN环境以后,我们来创建一个HelloWorld项目。见终端。

     

    15.jpg

    16.jpg

     

    1.6 运行项目

    17.jpg

     

    Command + R运行

    接下来关闭Xcode,注意:不要关闭终端和模拟器,用Sublime打开index.ios.js,编辑,保存,选中模拟器,重新按Command+R运行即可,无需重新打开Xcode运行。

     

    18.jpg

    19.jpg

    20.jpg





上一篇:Android开发需求加速,如何增加就业竞争力?

下一篇:Oculus在美国VR方面知名度最高?错了!


开班信息

Copyright 2016 北京育知同创科技有限公司 京ICP备16004053号