React Native入门到怀疑人生（一）

欢迎收听React Native系列，基于Window10,偏向于Android端的React Native。从入门到怀疑人生，对！没错怀疑人生就是我现在的状态😇。文章不当之处，希望大家及时指出，多谢！

Windows版本React Native环境配置

1 安装JDk

下载jdk1.8以上版本，安装并配置相应环境变量.验证是否正确安装打开命令行，输入java -version验证.

2 安装Android Studio

android stuido,若初次下载，可选择包含Android SDK的下载版本。

3 配置SDK环境变量

找到SDK的安装目录，设置sdk环境变量,并将其加入环境变量PATH中，例如（ANDROID_HOME=> E:\Android\sdk）（PATH=> %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools）。

4 设置SDk

打开android在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.

5 安装Git

https://git-for-windows.github.io/版本控制工具，下面步骤直接可以使用git下载相应配置文件

6 安装node

React Native运行是基于node.js,所以请下载node安装完成之后，验证是否正常安装，可打开命令行输入node -v验证

7 克隆项目并安装命令行工具react-native-cli

选择需要安装的目录，新建文件夹,进入文件夹点击右键，在弹出界面中点击Git Bash Hell打开Git命令行,输入git clone https://github.com/facebook/react-native.git，等待下载

安装成功后界面文件目录如图

输入npm install -g react-native-cli 安装命令行工具

进入刚刚目录下的react-native目录下的react-native-cli目录，输入npm install -g(可以使用Git Bush Hell命令行，也可以使用CMD)全局安装脚手架工具

8 创建第一个RN项目

选择需要安装的目录，输入react-native init FirstRNProject，等待一段时间，安装成功目录如下

9 运行RN项目需要的服务

在新创建的项目根目录下，输入react-native start（可使用Git,也可使用CMD）启动成功后，可以用浏览器访问[](http://localhost:8081/index.android.bundle?platform=android)，如果可以访问表示服务器端已经可以了.

10 运行项目

前提：需要有设备连接在电脑或打开模拟器（使用genymotion的话，需要z在设置中修改SDK为android sdk）

重新打开命令行（Git或CMD）,定位到新创建的项目根目录下，输入react-native run-android
（如果报错请检查Andorid环境变量、Android SDK的设置是否按照本文上方的SDK设置，全部添加）

如果模拟器或真机出现红色报错界面，可进入Dev开发者选项（Ctrl+M或者菜单键，在弹出框中选择Dev Seting,下图中位置，在对话框中输入本地IP+服务端口号，例如：192.168.1.66：8081，ip为我本机的Ip 端口可查看react-native start命令窗口的端口号，默认为8081）