请选择 进入手机版 | 继续访问电脑版

技术控

    今日:3| 主题:54646
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] 一步一步搭建ReactNative开发环境

[复制链接]
沧桑 发表于 2016-9-30 11:47:26
355 4

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
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下载安装即可。
   

一步一步搭建ReactNative开发环境

一步一步搭建ReactNative开发环境-1-技术控-package,apple,操作系统,local,下载安装

  1.2  安装Node.js

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

一步一步搭建ReactNative开发环境

一步一步搭建ReactNative开发环境-2-技术控-package,apple,操作系统,local,下载安装

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

一步一步搭建ReactNative开发环境

一步一步搭建ReactNative开发环境-3-技术控-package,apple,操作系统,local,下载安装

  从上图中中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版本.
   

一步一步搭建ReactNative开发环境

一步一步搭建ReactNative开发环境-4-技术控-package,apple,操作系统,local,下载安装

一步一步搭建ReactNative开发环境

一步一步搭建ReactNative开发环境-5-技术控-package,apple,操作系统,local,下载安装

一步一步搭建ReactNative开发环境

一步一步搭建ReactNative开发环境-6-技术控-package,apple,操作系统,local,下载安装

一步一步搭建ReactNative开发环境

一步一步搭建ReactNative开发环境-7-技术控-package,apple,操作系统,local,下载安装

一步一步搭建ReactNative开发环境

一步一步搭建ReactNative开发环境-8-技术控-package,apple,操作系统,local,下载安装

   

一步一步搭建ReactNative开发环境

一步一步搭建ReactNative开发环境-9-技术控-package,apple,操作系统,local,下载安装

  上图表示Node.js和npm都是安装在/usr/local/bin/路径下面。
  1.3 利用Homebrew安装watchman和flow

   

一步一步搭建ReactNative开发环境

一步一步搭建ReactNative开发环境-10-技术控-package,apple,操作系统,local,下载安装

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

一步一步搭建ReactNative开发环境

一步一步搭建ReactNative开发环境-11-技术控-package,apple,操作系统,local,下载安装

   

一步一步搭建ReactNative开发环境

一步一步搭建ReactNative开发环境-12-技术控-package,apple,操作系统,local,下载安装

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

一步一步搭建ReactNative开发环境

一步一步搭建ReactNative开发环境-13-技术控-package,apple,操作系统,local,下载安装

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

一步一步搭建ReactNative开发环境

一步一步搭建ReactNative开发环境-14-技术控-package,apple,操作系统,local,下载安装

  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] <version>                Download and install a <version>, [-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                             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 <name> 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项目。见终端。
   

一步一步搭建ReactNative开发环境

一步一步搭建ReactNative开发环境-15-技术控-package,apple,操作系统,local,下载安装

一步一步搭建ReactNative开发环境

一步一步搭建ReactNative开发环境-16-技术控-package,apple,操作系统,local,下载安装

  1.6 运行项目

   

一步一步搭建ReactNative开发环境

一步一步搭建ReactNative开发环境-17-技术控-package,apple,操作系统,local,下载安装

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

一步一步搭建ReactNative开发环境

一步一步搭建ReactNative开发环境-18-技术控-package,apple,操作系统,local,下载安装

一步一步搭建ReactNative开发环境

一步一步搭建ReactNative开发环境-19-技术控-package,apple,操作系统,local,下载安装

一步一步搭建ReactNative开发环境

一步一步搭建ReactNative开发环境-20-技术控-package,apple,操作系统,local,下载安装



上一篇:Fundamental tensions in code smells
下一篇:What I’ve Learned After Three Months of Coding (Almost) Daily
liting 发表于 2016-9-30 12:41:50
为毛老子总也抢不到沙发?!!
回复 支持 反对

使用道具 举报

代真 发表于 2016-10-1 19:26:46
泥泞路上的奔驰,永远跑不过高速路上的夏利。说明:”平台很重要!”
回复 支持 反对

使用道具 举报

敷衍式℡活下去 发表于 2016-10-6 20:39:51
我竟然看完了,谢谢
回复 支持 反对

使用道具 举报

萌面超人 发表于 2016-11-4 15:25:35
垃圾内容,路过为证。
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

© 2001-2017 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表