windows下react native 开发环境搭建
最近对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
安装项:
- 检查已安装的组件,尤其是模拟器和HAXM加速驱动。
- 安装完成后,在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
.
6、ANDROID_HOME环境变量
确保ANDROID_HOME
环境变量正确地指向了你安装的Android SDK的路径。
在系统环境变量中添加:
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