搭建React Native开发环境

时间:2022-01-07 23:18:14
搭建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