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 SDKAndroid 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 APIsAndroid SDK Platform 23Intel x86 Atom System ImageIntel 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

 

posted @ 2017-04-14 14:56  吞佛童子  阅读(151)  评论(0编辑  收藏  举报