手把手教你搭建React Native开发环境-图文结合
2017-02-12 本文已影响402人
少少少少少少少
首先感谢React Native中文网的作者们,是他们提供的阶梯.鉴于我第一次按操作步骤搭建开发环境时遇到的问题问题示例,这次再次安装时我详细的把每一个步骤都有图片记录下,为有兴趣学习React Native的童鞋们提供方便.
操作步骤与React Native中文网介绍步骤一致
1.安装Homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)
![
![
![4.png](http://upload-images.jianshu.io/upload_images/1154596-f0ce43d220ed04a2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://upload-images.jianshu.io/upload_images/1154596-c13107ce95e80c6b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://upload-images.jianshu.io/upload_images/1154596-5fba2a64201b28b7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
5.png
2.在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:
sudo chown -R `whoami` /usr/local
6.png
3.使用Homebrew来安装Node.js.
brew install node
7.png
4.设置国内镜像
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
8.png
5.Yarn、React Native的命令行工具(react-native-cli)
Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
npm install -g yarn react-native-cli
9.png
6.Watchman
Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)
brew install watchman
10.png
7.测试安装
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios
11.png
8.进入项目目录下
12.png ![16.png](http://upload-images.jianshu.io/upload_images/1154596-46af02be9d200f92.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)书山有路勤为径
学海无涯苦作舟