本系列文章博主将带领大家进入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下),需要进行用这个安装其他插件
@L_502_2@
安装方式直接参考该网页,一般情况都需要手动安装,大家不要灰心,直接自己下载复制到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用户可根据此文档进行安装和学习