React Native 初次使用

一、配置环境【Android + Windows】

1、安装jdk

官网地址：http://www.oracle.com/technetwork/java/javase/downloads/index.html

这里需要注意对环境变量的设置，可以根据java -version来检测一下,jdk最好是1.8。

PS：Android Studio需要Java Development Kit [JDK] 1.8（暂不支持更高版本）。

不懂怎样安装或者配置环境，可以看这里（以 jdk 1.6的安装为例），其余  跳过。

下载后，双击运行jdk-6u20-windows-i586.exe，假设选择安装到D:/Java/jdk1.6.0_20目录下（当然，安装到默认路径下也没有问题）。安装完毕后，就是配置环境变量。步骤如下：

(1)设置JAVA路径
在“我的电脑”上点右键，选“属性”，打开“系统属性”对话框，点“高级”选项卡，再点“环境变量”按钮，在打开的对话框中的“系统变量”下方，点 “新建”，然后在对话框中的“变量名”中填JAVA_HOME，在“变量值”中填D:/Java/jdk1.6.0_20，点“确定”。

(2)设置CLASS路径

再“新建”一个系统变量，在“变量名”中填CLASSPATH，在“变量值”中填.;%JAVA_HOME%/lib;%JAVA_HOME%/lib/tools.jar。
说明：最开始的.;中的.（点）表示当前路径，;（分号）是路径分隔符。接下来的%JAVA_HOME%引用的是前面刚创建的JAVA安装路径。

(3)设置PATH路径

PATH变量一般都有了，因此选中点“编辑”，然后在“变量值”后面加上;%JAVA_HOME%/bin;%JAVA_HOME%/jre/bin，注意前面的分号。

这样，JDK就安装好。“开始->运行”，输入cmd，然后在命令行提示符中输入：java -version，应该能够看到java version “1.6.0_20″信息；JDK安装成功。

2、安装 Android SDK。

不懂怎样安装或者配置环境，可以看这里（以Android SDK 1.6的安装为例），其余  跳过。

将下载到的android-sdk-windows-1.6_r1.zip解压缩到D:/android-sdk-windows-1.6_r1目录中（解压到哪个目录都没有问题）。然后，配置环境变量。步骤如下：

(1)设置Android路径

重复第一步的(1)，新建一个“系统变量”，在“变量名”中填Android_Home（大小写没有问题），在“变量值”加填D:/android-sdk-windows-1.6_r1。

(2)设置PATH路径

“编辑”PATH变量，在“变量值”后面加上;%Android_Home%/tools;%Android_Home%/platform-tools，注意前面的分号。

这样，Android SDK 1.6就安装好了。“开始->运行”，输入cmd，然后在命令行提示符中输入：android -h，应该能够看到帮助信息；Android SDK 1.6安装成功。

3、安装Android Studio 并选中版本 。

套用官方 React Native目前需要Android Studio2.0或更高版本。

Android Studio需要Java Development Kit [JDK] 1.8（暂不支持更高版本）。你可以在命令行中输入javac -version来查看你当前安装的JDK版本。如果版本不合要求，则可以到官网上下载。或是使用包管理器来安装（比如choco install jdk8或是apt-get install default-jdk）

Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。

除非特别注明，请不要改动安装过程中的选项。比如Android Studio默认安装了Android Support Repository，而这也是React Native必须的（否则在react-native run-android时会报appcompat-v7包找不到的错误）。

• 确定所有安装都勾选了，尤其是Android SDK和Android Device Emulator。

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

• 在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.

4、安装Node.js 。

node.js轻量级的Web服务器，想要是React Native跑起来需要安装node， 如果没有安装node.js，先去官网安装node.js,最好是4.1以上版本。【会自动添加到环境变量里】

下载地址：https://nodejs.org/en/

命令提示符中输入 node -v，检测是否安装成功。

安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！【在命令提示符中 粘贴一行 按 enter，再 粘贴一行在按enter】

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

我在E盘建立了一个文件夹叫  RnDev  【E:\RnDev】，如下图所示：

5、安装git

下载地址：https://gitforwindows.org/
安装： 注意选择   【会自动添加到环境变量里】

6、安装 React Native 命令行工具

下载地址：

1）GitHub 下载：https://github.com/facebook/react-native

将下载的文件夹解压，并找到 react-native-cli 的路径。

我是放在 D:\software\React_Native_ SoftWare\react-native-master\react-native-cli。

输入命令： npm install -g react-native-cli

7、创建项目

输入命令：  react-native init FirstRNProject

其中FirstRNProject为 项目名。如下图所示：

8、运行packager  进入工程目录

输入命令：  react-native start   或者 npm start

如下图所示：

我看部分课件和博客讲解的时候，会让  用浏览器访问http://localhost:8081/index.android.bundle?platform=android，如果可以访问表示服务器端已经可以了。

但是真实情况是 ：

原因是因为：创建完项目之后未生成 index.android.js 、index.ios.js。经查找，index.android.js 、index.ios.js已经合并成App.js。【用哪个连接访问地址栏，需后期知道之后在维护。】

9、准备模拟器或者真机（推荐真机）  运行Android                            

输入命令：  react-native run-android

第一次运行的时候，会下载 gradle文件。

1.用编译器打开 FirstRNProject 文件夹中的 android文件中的 gradle 下的 wrapper 找到 gradle-wrapper.properties文件，将其中的distributionUrl= https://services.gradle.org/distributions/gradle-2.4-all.zip 改为distributionUrl=file:///E:/xx/gradle-2.4-all.zip，让它本地离线下载。其中E:/xx/gradle-2.4-all.zip为你下载gradle后所保存的地址。

2、 我查看了一下 Android Studio项目中 gradle的版本，遂改成一致。（distributionUrl=https\://services.gradle.org/distributions/gradle-4.1-all.zip）

运行成功效果图：

//--------------------------------------------------------------------------------------------------------------------------------

PS：

1、打开一个命令提示符,可以查看当前连接的设备。

输入命令：adb devices

2、打开 Android--app --build.gradle

修改成本地Android Studio编译版本

3、把Android项目下的build.gradle，把gragle版本改成Android Studio版本

如果报下面这个错，请在Android项目下的build.gradle  repositories 添加 maven url。

4、如果报下面这个错

请在  Android项目下，加上 local.properties。

具体内容如下：【主要是 本地 SDK位置】

## This file is automatically generated by Android Studio.
# Do not modify this file -- YOUR CHANGES WILL BE ERASED!
#
# This file must *NOT* be checked into Version Control Systems,
# as it contains information specific to your local configuration.
#
# Location of the SDK. This is only used by Gradle.
# For customization when using a Version Control System, please read the
# header note.

#Wed Feb 28 18:11:22 CST 2018

sdk.dir=E\:\\Android_Studio\\Android\\sdk

5、如果运行的项目一片红色

请点击右键 ，在菜单选项中 选择 Dev Settings。

设置debug地址，设置电脑主机ip地址。

1）查看电脑ip地址：在命令提示符中输入 ipconfig，

请注意端口号是  8081.

 点击确定，返回到菜单选择项，选择Reload。然后就可以加载成功了。

6、如果是这个红色

 

请注意：

1）一是连网，请确定网络；

2）二是看看启动改成 npm start试试。