react native windows安装

安装 node.js

从官网下载安装。安装完成后设置npm镜像(设置后使用npm安装下载更快)：

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

安装 React native 命令行工具

npm install -g react-native-cli

React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

安装python2

从官网下载安装 python 2.X版本。3.X版本不支持

安装JDK

从官网下载安装1.8或更高版本。安装完成后需设置环境变量：

1
2
3
JAVA_HOME：C:\Program Files\Java\jdk1.7.0(此处是你的jdk安装目录)
CLASSPATH :  .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
PATH：在最后加上  ;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

安装Android Studio

React Native目前需要Android Studio2.0或更高版本。
Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。
除非特别注明，请不要改动安装过程中的选项。比如Android Studio默认安装了
Android Support Repository，而这也是React Native必须的
（否则在react-native run-android时会报appcompat-v7包找不到的错误）。

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

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

图片
安装完成后，在Android Studio的欢迎界面中选择Configure | SDK Manager
图片
在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、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_HOME环境变量设置
    确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。
    打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建

模拟器选择项：genymotion

比起Android Studio自带的原装模拟器，Genymotion是一个性能更好的选择，但它只对个人用户免费。(也可以选择使用原装模拟器，则不跳过这部分的说明)
需要进行注册。
下载包含virtualbox的版本安装。
安装后启动，需要使用之前注册的账户进行登录，登录后才会看到可选择的设备列表。
使用genymotion时会遇到的问题：

  1. 创建设备时模拟器下载速度过慢
    可以选择手动下载模拟器：
  • 找到以下路径：C:\Users\Administrator\AppData\Local\Genymobile，打开当前路径下 genymotion.log 文件。（AppData 文件夹默认是隐藏的，如果没有找到这个文件夹的朋友需要设置”显示已隐藏文件和文件夹”）
  • 拖到最下面，也就是最新的日志更新内容。找到下载地址：

图片
将地址复制，使用迅雷下载，很快。

  • 将下载好的文件丢到 C:\Users\Administrator\AppData\Local\Genymobile\Genymotion\ova目录下

图片

  • 打开 Genymotion，新建下载的虚拟设备。我们发现并没有刚才下载的模拟器
    是因为并不是通过genymotion自动下载的。
    只需要选择你下载的设备进行创建，genymotion会自动识别ova目录下已有的文件。
  1. React native程序提示找不到设备
    是由于genymotion默认使用自己的adb。

图片
在设置中将adb选择为custom Android SDK tools, 并且设置为android stutio里安装的SDK的目录

创建react native项目

找一个空目录执行：

react-native init helloworld

这个过程会持续一段时间，需要下载依赖文件。

运行项目

1
2
cd helloworld
react-native run-android

首次运行需要等待数分钟并从网上下载gradle依赖

运行完毕后可以在模拟器或真机上看到应用自动启动了。

如果app红屏，我们还需要让app能够正确访问pc端的packager服务。

摇晃设备或按Menu键或按(CTRL+M)，可以打开调试菜单，点击Dev Settings，选Debug server host for device，输入你的正在运行packager的那台电脑的局域网IP加:8081（同时要保证手机和电脑在同一网段，且没有防火墙阻拦），再按back键返回，再按Menu键，在调试菜单中选择Reload JS，就应该可以看到运行的结果了。

本文地址： http://gehaiqing.com/2016/10/31/react-native-setup/