搭建React Native开发环境
搭建React Native开发环境
本文档是Mac下搭建的环境,针对的目标平台不同,以及开发 iOS 和 Android 的不同,环境搭建也有差异。
Github地址:https://github.com/facebook/react-native
官方地址:http://facebook.github.io/react-native/docs/getting-started.html
中文版的地址:https://reactnative.cn/
前提条件
Homebrew是OS X的套件(包)管理器,用于安装Node.js和一些其他必须的工具软件。
安装Homebrew,这样就可以用Homebrew方式安装Node,watchman了
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
建议定期运行以下命令来保证Homebrew的最新版本
brew update && brew upgrade
必须要安装的依赖: Node、Watchman 和 React Native 命令行工具以及 Xcode。
Node, Watchman
推荐使用Homebrew来安装 Node 和 Watchman。在命令行中执行下列命令安装:
brew install node
brew install watchman
node安装成功后npm自动也就有了,直接下载安装Node.js
Watchman是由 Facebook 提供的监视文件系统变更的工具,可以快速捕捉文件的变化从而实现实时刷新
Yarn、React Native 的命令行工具(react-native-cli)
Yarn 是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
npm install -g yarn react-native-cli
Xcode
React Native 目前需要Xcode。你可以通过 App Store 下载。这一步骤会同时安装 Xcode IDE、Xcode 的命令行工具和 iOS 模拟器。
Xcode 的命令行工具
启动 Xcode,并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode 的命令行工具中包含一些必须的工具,比如git等。
运行 React Native 应用
不管是 iOS 还是 Android,在开发调试阶段,都需要在 Mac 上启动一个 HTTP 服务,称为Debug Server,默认运行在 8081 端口,APP 通 Debug Server 加载 js。
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios
其他说明
查询react-native的npm包最新版本
npm info react-native
升级或者降级npm包的版本
npm install --save react-native@0.18
更新项目templates文件
新的npm包会包含更新在运行react-native init命令生成的一些动态文件,例如init创建项目的时候会生成iOS和Android的子项目,我们可以通过以下的命令进行获取最新的代码
react-native upgrade
WebStom设置React Native代码提示
从gitHub上下载xml插件,然后将ReactNative.xml复制到 ~/Library/Preferences/WebStorm10/templates ,然后重启 WebStrom。
git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate