windows下react native 开发环境搭建

最新推荐文章于 2025-09-10 14:51:55 发布

转载最新推荐文章于 2025-09-10 14:51:55 发布 · 65 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cookcocck/p/6708907.html

文章标签：

#移动开发 #操作系统 #运维

本文详细介绍ReactNative开发环境的搭建流程，包括必备软件安装、环境变量配置等关键步骤，并提供常见问题解决方案。

最近对react native挺感兴趣，于是准备玩一玩，开发环境的搭建虽然简单，但是如果不够仔细，还是非常容易出错的，因此随笔一篇，记录自己在搭建中所遇到的问题.

安装步骤

注意: 以下的命令行命令，最好在管理员模式的命令行下执行，否则会造成某些权限不够的问题。

必需的软件

1、Chocolatey

Chocolatey是一个Windows上的包管理器，类似于linux上的yum和 apt-get。直接在命令行输入：

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

2、Python 2

choco install python2

3、NodeJS

choco install nodejs.install

4、Yarn（React Native的命令行工具（react-native-cli）类似于vue的vue-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

5、Android Studio（需要Java Development Kit [JDK] 1.8或更高版本）

注意: 在有关android Studio 的任何安装路径中都不要出现中文目录

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

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

尽量不要改动安装过程中的选项

确定所有安装都勾选了，尤其是Android SDK和Android Device Emulator。
在初步安装完成后，选择Custom安装项：

custom installation

检查已安装的组件，尤其是模拟器和HAXM加速驱动。

verify installs

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

configure sdk

在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。

platforms

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

build tools

6、ANDROID_HOME环境变量

确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。

在系统环境变量中添加：

env variable

7、Android SDK的Tools目录添加到`PATH`变量中

把Android SDK的tools和platform-tools目录添加到PATH变量中

8、Genymotion

当使用Genymotion模拟器时,需要如下配置

Settings --> ADB --> Use custom AndroidSDK tools (设置为本地的已安装的SDK路径)

测试安装

注意：init项目所在的路径中也不能存在中文，否则在最后一步的bulid过程中会报错

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

最终运行结果：

参考链接: http://reactnative.cn/docs/0.43/getting-started.html

转载于:https://www.cnblogs.com/cookcocck/p/6708907.html