Windows下启动React Native项目

安装依赖

必须安装的依赖有：Node、React Native 命令行工具、Python2.X 以及 JDK 1.8

sdk：Soft Development Kit （软件开发包），比如Android SDK
jdk：Java Development Kit (Java 软件开发工具包)，Java SDK。普通用户并不需要安装JDK来运行Java程序，而只需要安装JRE（Java Runtime Environment）。而程序开发者必须安装JDK来编译、调试程序。

1. 安装React Native 命令行工具

npm install -g react-native-cli

2. 安装Android SDK（安卓机器的操作系统）

1.配置JDK
安装Android SDK时要依赖Java JDK 1.8。JDK下载
配置环境变量：将JDK_HOME添加到Path，如：

JAVA_HOME
D:\GreenSoft\Java
CLASSPATH
.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar;
Path
;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

2.配置Android SDK
方式一： 安装Android Studio

image.png

image.png

安装完成后启动

image.png

image.png

image.png

打开SDK Manager (或在Appearance & Behavior → System Settings → Android SDK)

image.png

image.png

image.png

方式二：直接安装Android SDK

image.png

image.png

image.png

image.png

image.png

3.配置ANDROID_HOME的环境变量

• 新建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录（SDK 默认是安装在下面的目录：c:\Users\你的用户名\AppData\Local\Android\Sdk）：

  
  
  

  image.png
• 把 platform-tools 目录添加到环境变量 Path 中（默认路径是：c:\Users\你的用户名\AppData\Local\Android\Sdk\platform-tools），也可以添加tools，也可以两个都添加

image.png

如果环境变量中添加的是tools，直接在命令行执行 android就能调出Android SDK Manager窗口，选择上面提到的必须安装的一些包进行安装；如果环境变量中添加的platform-tools，则需要在安装目录中找到 SDK Manager.exe运行，调出窗口。

tools：针对pc平台下使用的工具：比如模拟器，.9patch工具，性能追踪可视化工具traceview。
该目录下存放大量Android开发工具，例如SDK Manager、androidavd、emulator、ddms等等。
platform-tools：针对pc端和移动端进行交互的一些工具：比如adb工具（通过该工具pc端获取移动端log信息），sqlite3工具（通过该工具查询移动端数据库信息）。随着SDK更新版本，这里的工具会有相应更新变化，但是一般都是向后兼容

ReactNative项目创建及结构分析

1.创建新项目

执行命令：

react-native init 项目名称

1. 你可以使用--version参数（注意是两个杠）创建指定版本的项目。例如react-native init HelloRN --version 0.30.5。注意版本号必须精确到两个小数点。
2. Windows系统下，请不要在某些权限敏感的目录例如 System32 目录中 init 项目，会有各种权限限制导致不能运行！

下载ReactNative的源码和依赖包，然后再去当前目录下创建ios和Android的项目工程和其他的一些文件。持续的时间可能比较长，创建完成时可以看到以下界面

image.png

初始化的过程中可能会报错，一般的可以通过配置npm镜像或者使用翻墙工具解决（注意：不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！）

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

2. 启动项目

真机：
USB连接手机，打开开发者模式，在开发人员选项中打开USB调试，然后
执行命令，检查你的设备是否能正确连接到 ADB（真机或者模拟器，注意：调试的时候应当连接仅仅一个设备）

adb devices

image.png

在右边那列看到device说明你的设备已经被正确连接了

连接成功之后就可以启动项目了。
切换到项目根目录，执行下面命令来在设备上安装并启动应用

react-native run-android

启动的时候可能咬等待一段时间，不要关掉命令运行窗口。运行成功之后可以看到下面的界面

image.png

可以通过摇晃设备或者输入adb shell input keyevent 82打开开发者菜单

image.png

目前Windows下无法自动打开chrome进行调试，可点击开发者菜单的Debug JS Remotely可手动打开chrome，或者访问如下地址：http://localhost:8081/debugger-ui
在development模式下，js部分的错误和警告会直接分别以红色背景和黄色背景的形式将详细信息打印在手机或模拟器屏幕上，也可以通过console.error()和console.warn()手动触发Errors和Warnings。(可以通过设置console.disableYellowBox=true禁用掉警告信息或者console.ignoredYellowBox=['Warning: ……']忽略相应的警告信息。在release环境下 Errors和Warnings功能是不可用的）
Reload：重新加载js
Debug JS Remotely：打开React Native 的一个debug模式
Enable Live Reload：实时加载
Enable Hot Reload：在当前页面实时加载

adb：Android Debug Bridge，安卓平台调试桥，是连接Android手机与PC端的桥梁，通过adb可以管理、操作模拟器和设备，如安装软件、查看设备软硬件参数、系统升级、运行shell命令等。主要功能有：运行设备的shell(命令行)；管理模拟器或设备的端口映射 ；计算机和设备之间上传/下载文件；将本地apk软件安装至模拟器或android设备

可能遇到的问题：

image.png

解决方法：1. 手机设备授权：允许USB调试；2.重启adbadb kill-server adb start-server