react native系列——环境搭建

安装步骤参考reactnative.cn,由于window环境下安装比较麻烦,下面我将进行逐步安装。
根据reactnative.cn的提示第一步安装Chocolatey工具,不知道什么原因安装失败了,如图:

Chocolatey只是一个包管理器,其安装的目的就是为了很方便的安装必备软件(python2、node),安装失败的同学,我们手动安装。

python 安装及配置

  1. 下载地址

  2. 开始安装……安装成功如下:

  3. 配置环境变量

  4. 验证

node 安装及配置

  1. 下载地址
  2. 开始安装……安装成功如下:
  3. 验证

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

1
2
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

Yarn、React Native的命令行工具(react-native-cli)

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

1
npm install -g yarn react-native-cli

安装完yarn后同理也要设置镜像源:

1
2
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

android studio安装

  1. 下载地址安装之前必须安装jdk!jdk!jdk!,具体安装步骤参照这里
  2. 安装结束,并打开会看到以下图:

  3. 下一步,如图:

  4. 检查已安装的组件,尤其是模拟器和HAXM加速驱动。
  5. 一直下一步会看到以下界面,点击完成:
  6. 安装完成后,在Android Studio的欢迎界面中选择Configure | SDK Manager
  7. 在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
  8. 在SDK Tools窗口中,选择Show Package Details,然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1(必须包含有这个版本。当然如果其他插件需要其他版本,你可以同时安装其他多个版本)。然后还要勾选最底部的Android Support Repository
  9. 开始安装以上所选内容:

ANDROID_HOME环境变量

到这里为止基本的环境就安装结束了,在这里强烈建议一下,在Android studio新建一个android项目,开发工具会检测你的android开发环境,如图:

该问题同样也会影响react native 在android端的调试,点击标记的区域安装相关环境,直到该区域没有蓝色警告,如图:

到此ardroid基本环境安装结束。

Genymotion安装

比起Android Studio自带的原装模拟器,Genymotion是一个性能更好的选择,但它只对个人用户免费。

  1. 下载和安装Genymotion(genymotion需要依赖VirtualBox虚拟机,下载选项中提供了包含VirtualBox和不包含的选项,请按需选择)。
  2. 打开Genymotion。如果你还没有安装VirtualBox,则此时会提示你安装。
  3. 创建一个新模拟器并启动。
  4. 启动React Native应用后,可以按下F1来打开开发者菜单。

在启动模拟器的时候报错了,如图:

实测之后发现,在genymotion安装过程中,会有VirtualBox的安装过程,其版本是5.0.28,
我们安装较新的版本 下载地址

哒哒哒……安装成功了,小伙伴们有木有???

测试安装

1
2
3
react-native init AwesomeProject
cd AwesomeProject
react-native run-android

运行成功图如下:

【完】

react native系列——环境搭建

http://robin.me/reactnative/getting-started/

作者

任裕斌 | robin

发布于

2017-12-19

更新于

2015-01-01

许可协议

You need to set install_url to use ShareThis. Please set it in _config.yml.
You forgot to set the business or currency_code for Paypal. Please set it in _config.yml.