ReactNative开发环境搭建总结(windows mac)

最新推荐文章于 2025-06-09 17:58:20 发布

翻译最新推荐文章于 2025-06-09 17:58:20 发布 · 631 阅读

=====================================windows====================================ReactNative 开发环境搭建：http://reactnative.cn/docs/0.28/getting-started.html#content

ReactNative 视频教程：https://ke.qq.com/course/197101

1.安装jdk1.8

参考：https://jingyan.baidu.com/article/6dad5075d1dc40a123e36ea3.html

2.安装android studio

打开Android SDK Manager。

选中以下项目，以下的是必需安装：

Android SDK Build-tools version 23.0.1
Android Support Repository
Android 6.0 (API 23)

3.配置sdk路径

添加环境变量ANDROID_HOME ：android sdk根路径
修改path路径:%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

以上1-3步骤是搭建android开发环境, 因为ReactNative的开发环境是依赖Android开发环境

4.安装Python2

将python加入环境变量，然后可以通过 python 的命令来测试python是否安装成功

参考：https://jingyan.baidu.com/article/c910274be14d64cd361d2dd8.html

5.安装node

ReactNative是基于js的，Node.js轻量级的Web服务器，想要是React Native跑起来需要安装node， 如果没有安装node.js，先去官网安装node.js,最好是4.1以上版本

可以通过node -v的命令来测试NodeJS是否安装成功

//安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

6.安装git(可选)


安装React-native可能需要用到Git，如果没有配置git，需要先下载对应的客户端，
然后将git加入path环境变量

7.安装yarn 和 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

第二种：


git配置完成后可以clone React-native-cli了，建议大家到将react-native-cli克隆到某个盘，不要在c盘直接clone

1)在命令行中进入你希望RN安装的目录

2)输入git clone https://github.com/facebook/react-native.git，等待下载

3)clone成功后,找到react-native-cli目录，输入npm install -g

4)安装好之后，可以命令行下就有react-native命令了

参考：http://blog.youkuaiyun.com/u012987546/article/details/52210530
=====================================mac====================================

1.ReactNative MAC开发环境搭建

ReactNative 中文官网：http://reactnative.cn/docs/0.45/getting-started.html

mac下的安装的视频教程：https://ke.qq.com/course/197101

1.Homebrew

Homebrew, Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。

#把下面这个命令考到终端下执行
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

译注：在Max OS X 10.11（El Capitan)版本中，homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复：


#把下面这个命令考到终端下执行
sudo chown -R `whoami` /usr/local

2.Node

使用Homebrew来安装Node.js.

React Native目前需要NodeJS 5.0或更高版本。本文发布时Homebrew默认安装的是最新版本，一般都满足要求。


#把下面这个命令考到终端下执行
brew install node

安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！


#把下面这个命令考到终端下执行
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

3.Yarn、React Native的命令行工具（react-native-cli）

Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。


#把下面这个命令考到终端下执行
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

如果你看到EACCES: permission denied这样的权限报错，那么请参照上文的homebrew译注，修复/usr/local目录的所有权：


#把下面这个命令考到终端下执行
sudo chown -R `whoami` /usr/local

4.Xcode

React Native目前需要Xcode 8.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode IDE和Xcode的命令行工具。

虽然一般来说命令行工具都是默认安装了，但你最好还是启动Xcode，并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode的命令行工具中也包含一些必须的工具，比如git等。

5.Android Studio

React Native目前需要Android Studio2.0或更高版本。

Android Studio需要Java Development Kit [JDK] 1.8或更高版本。你可以在命令行中输入 javac -version来查看你当前安装的JDK版本。如果版本不合要求，则可以到官网上下载。

JDK安装教程：http://blog.youkuaiyun.com/qw963895582/article/details/49299433

Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。

除非特别注明，请不要改动安装过程中的选项。比如Android Studio默认安装了 Android Support Repository，而这也是React Native必须的（否则在react-native run-android时会报appcompat-v7包找不到的错误）。

安装过程中有一些需要改动的选项：

选择Custom选项：

勾选Performance和Android Virtual Device

安装完成后，在Android Studio的启动欢迎界面中选择Configure | SDK Manager。

在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。

在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（必须是这个版本）。然后还要勾选最底部的Android Support Repository.

ANDROID_HOME环境变量

确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。具体的做法是把下面的命令加入到~/.bash_profile文件中：(译注：~表示用户目录，即/Users/你的用户名/，而小数点开头的文件在Finder中是隐藏的，并且这个文件有可能并不存在。请在终端下使用vi ~/.bash_profile命令创建或编辑。如不熟悉vi操作，请点击这里学习）


# 如果你不是通过Android Studio安装的sdk，则其路径可能不同，请自行确定清楚。
export ANDROID_HOME=~/Library/Android/sdk

然后使用下列命令使其立即生效（否则重启后才生效）：


source ~/.bash_profile

可以使用echo $ANDROID_HOME检查此变量是否已正确设置。

6.Watchman （推荐安装的工具）

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。


#把下面这个命令考到终端下执行
brew install watchman

7.测试安装（建议先启动模拟器）

# run android 把下面这个命令考到终端下执行
react-native init AwesomeProject
cd AwesomeProject
react-native run-android

# run ios 把下面这个命令考到终端下执
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios