一、准备软件

1.安装Node.js

官网下载：http://nodejs.cn/download/，之后安装，新版本不用配置环境变量。

查看版本

nodejs.png

如图所示即为安装成功。

2.安装Java SE

官网下载：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

配置环境变量：

a.计算机 → 属性 → 高级系统设置 → 高级 → 环境变量

b.系统变量 → 新建 JAVA_HOME 变量 ,变量值填写 jdk 的安装目录。

c.系统变量 → path → 变量值输入 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin; ，注意末尾的分号。

d.系统变量 → 新建 CLASSPATH 变量。变量值填写.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar（注意最前面有一点）

查看版本

java se.png

如图所示即为安装成功。

3.安装React-Native Cli

打开cmd,输入

 npm install -g react-native

查看版本,cmd下输入

 npm info react-native

react-native cli.png

如图所示即为安装成功。

ps: npm淘宝镜像

第一步，找到nodejs的安装目录 例如 C:\Program Files\nodejs\node_modules\npm，并找到 npmrc 文件

第二步，打开npmrc文件，添加

registry=https://registry.npm.taobao.org

效果如下：

prefix=${APPDATA}\npm
registry=https://registry.npm.taobao.org

4.安装Android Stdio

下载地址：http://www.android-studio.org/index.php/download/hisversion

2.0以上的版本都支持react-native

a.软件设置

sdk.png

b.环境变量设置

1)新建ANDROID_HOME, 变量值为Android SDK的路径。

2)path变量值添加
%ANDROID_HOME%\platforms;%ANDROID_HOME%\platformtools;%ANDROID_HOME%\tools;\

二、创建react-native 项目

1.新建一个文件夹 ，例如reactDemo

2.初始化，进入项目目录后，输入

react-native init reactDemo

init.png

成功后：

file.png

3.运行package

cmd输入

react-native start

Paste_Image.png

报错，制定端口运行，成功

react-native start --port=8082

port.png

4,打开模拟器

推荐1：bluestacks 下载地址：http://www.bluestacks.cn/
推荐2：Genymotion 下载地址：链接：http://pan.baidu.com/s/1dEDqdo9 密码：93y8

5.模拟器安装之后，运行项目

react-native run-android

三、运行的各种错误的解决方案

错误1. unable to load script form assets

解决方案：

a. 先手动在main下建立一个assets文件夹(路径：react项目名\android\app\src\main)

b. cmd到项目下输入：

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

错误2. Command run-android unrecognized. Make sure that you have run npm install and that you are inside a react-native project.

解决方案：

在cmd中运行下面的命令

npm add react-native-cli

错误3

500.png

...未完待续...