React Native之环境搭建

本系列文章博主将带领大家进入React Native的世界，学习React Native的知识。

一.环境搭建

开发平台：MacOS 10.11.6，所以本文将重点介绍Mac电脑的安装过程，不过Windows同学也不要灰心，最后也会给出Windows下的安装教程
1.安装Homebrew
Homebrew,Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件，打开终端，执行以下命令：

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

homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复：

sudo chown -R `whoami` /usr/local

2.Node安装

brew install node

安装完node后建议设置npm镜像以加速后面的过程(建议安装)

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

3.React Native的命令行工具（react-native-cli）安装

npm install -g yarn react-native-cli

安装完yarn后同理也要设置镜像源

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

安装软件时也可能会碰到目录不可写的权限问题，输入下面命令修复：

sudo chown -R `whoami` /usr/local

4.推荐安装的工具
Watchman
Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。

brew install watchman

Flow
Flow是一个静态的JS类型检查工具。译注：你在很多示例中看到的奇奇怪怪的冒号问号，以及方法参数中像类型一样的写法，都是属于这个flow工具的语法。这一语法并不属于ES标准，只是Facebook自家的代码规范。所以新手可以直接跳过（即不需要安装这一工具，也不建议去费力学习flow相关语法）。

brew install flow

注：安装过程中可能需要输入密码，直接输入自己的电脑密码就可以

至此已经安装完成，接下来

创建第一个项目：

1.切换到自己的项目目录(自己定义即可)：

cd  /Users/Documents/ReactNative

2.创建第一个项目MyFirstApp

react-native init AwesomeProject

创建过程中可能需要一小会，稍等，项目截图如下：

ok，第一个项目新建完成，那么我们需要运行看一下效果：

react-native run-ios 此为iOS平台，运行需安装Xcode，并打开模拟器
  react-native run-android 此为android，运行需安装Androidstudio，并打开模拟器

具体Xcode和Androidstudio安装方式，请自行安装。
运行项目时必须保证模拟器打开，或者手机连可调试
注：本人在安装时发现无论是iOS还是Android均是模拟器可以运行，手机不可以，检查发现必须ip相同才可以成功运行，这是一个坑，大家切记

运行截图如下：

目前我们已经成功运行了第一个项目，那么我们该使用什么工具来打开项目呢？这里推荐两个，WebStorm和Sublime Text，
WebStorm安装方式如下：
http://blog.csdn.net/sinat_17775997/article/details/53579414
因本人重点使用Sublime Text，故给出Sublime Text安装方式：
1.安装Sublime Text3（自行百度，http://www.sublimetext.com/3 这个 so easy）
2.重点是需要为Sublime Text3安装插件才可进行开发
安装Package Control
默认Sublime3中没有Package Control(Preference下)，需要进行用这个安装其他插件
http://www.cnblogs.com/luoshupeng/archive/2013/09/09/3310777.html
安装方式直接参考该网页，一般情况都需要手动安装，大家不要灰心，直接自己下载复制到Installed Packages／下重启即可
3. 安装完Package Control后，打开Sublime Text3，点击菜单栏”Preferences”–>”Package Control”

在打开的终端窗口，输入“install”,下方就会提示“Package Control:install package”

回车后提示该框，输入想安装的插件：

React Native开发推荐的一些插件：
ReactJS : 支持React开发，代码提示，高亮显示 ，介绍地址：点我
Emmet ：前端开发必备。
Terminal : 在sublime中打开终端并定位到当前目录，神器，mac下的快捷键为：command+shift+T

4.导入项目：点击菜单栏的“Project”–>”Add Folder to Project” ，选择项目的目录，就将项目导入进来了。

ok，接下来就可以进行开发项目了！

参考链接：http://reactnative.cn/docs/next/getting-started.html#content Windows用户可根据此文档进行安装和学习

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!