React Native 环境配置指南

1530 查看

安装Homebrew

Homebrew是Mac OSX上的一个软件包管理工具,能在Mac中方便的安装或者卸载软件.

在终端执行以下命令:

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

之前安装过的同学可执行以下命令检查下更新

➜  ~  brew update && brew upgrade

安装nvm

Node Version Manager:Node.js版本管理器

先确保curl已安装:

➜  ~  brew install curl

安装nvm

➜  ~  curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

打开文件/etc/profile,在末尾添加以下环境变量:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

修改好后,注意使用

➜  ~  source /etc/profile

使配置文件生效

在终端直接输入nvm --version查看是否成功

➜  ~  nvm --version
0.29.0

然后,使用nvm安装最新版本的node.js (这一步会很久....如果失败了,可以直接自行下载Node.js安装)

➜  ~  nvm install node && nvm alias default node

安装好后,测试下是否成功

➜  ~  node -v
v4.2.1
➜  ~  npm -v
2.14.7

安装watchman

watchman是Facebook 的一个用于监控文件变更并触发指定操作的工具

➜  ~  brew install watchman

安装flow

flow是一个 JavaScript 的静态类型检查器,建议安装它,以方便找出代码中可能存在的类型错误:

➜  ~  brew install flow

安装react-native

先自行翻墙,或者执行以下命令加淘宝镜像(推荐后者):

➜  ~  npm --registry https://registry.npm.taobao.org info underscore

安装react-native

➜  ~  npm install -g react-native-cli

配置Android开发环境

主要是SDK之类的配置,教程很多,此处不再赘述,这里主要提一点:
/etc/profile配置一个名为ANDROID_HOME的环境变量,指向SDK根目录,因为在build RN工程时会用到

/etc/profile加入的语句如下:

export ANDROID_HOME="/Users/fengjun/Developement/Environment/sdk/"

至此,环境搭建全部完成

创建Hello World

执行react-native init HelloWorld,这将会创建一个名为HelloWorldReact Native工程

等待下载依赖完成后(大约一两分钟),将会看到以下输出:

This will walk you through creating a new React Native project in /Users/fengjun/Developement/react-learn/HelloWorld
Installing react-native package from npm...
Setting up new React Native app in /Users/fengjun/Developement/react-learn/HelloWorld
To run your app on iOS:
   Open /Users/fengjun/Developement/react-learn/HelloWorld/ios/HelloWorld.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   Have an Android emulator running (quickest way to get started), or a device connected
   cd /Users/fengjun/Developement/react-learn/HelloWorld
   react-native run-android

工程创建成功

接下来cdHelloWorld,执行react-native run-android,就可以看到你的第一个RN工程了,Have fun !

另附:

Demo

使用React Native实现的豆瓣电影
基于React Native的动态部署实践

demo clone下来后,在工程目录下执行 npm install 安装依赖,再执行 react-native run-android 即可

其他教程

Javascript教程
Flexbox教程