搭建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

相关文章