【react-native】react-native Windows+Android 安装并运行起来第一个demo

如何成功运行React-native官网第一个demo（Windows + Android）

如果你跟着官网每一步走，然后发觉打包起来还是红色的界面，那么看下面的文章会对你有所帮助（楼主自己找到的正确的道路，官网少写了一步）

1

https://facebook.github.io/react-native/docs/getting-started.html

这个页面

选到Building Projects with Native Code这个tab



下面一点的开发环境选择

Window 和 Android



2

Node, Python2, JDK


如果没有安装那么推荐单独安装

Node

https://nodejs.org/en/download/


Python2（这里记得要下2.X的版本）

https://www.python.org/downloads/


JDK

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html


JDK安装完记得把路径配到环境变量中



配置环境变量

桌面上的此电脑图标->右键属性->高级系统设置->高级->环境变量->系统变量


新建

变量名填写JAVA_HOME

变量值填写JDK的安装路径（例如 C:\Program Files\Java\jdk1.8.0_20）


Path点编辑

编辑环境变量面板右侧点击新建，添加以下两项

%JAVA_HOME%\bin

%JAVA_HOME%\jre\bin





Chocolatey

官网推荐用这个来装，不要理它（上面三个单独装比用这个装简单多了）



3

安装React Native CLI

运行命令行

npm install -g react-native-cli

建议用下镜像

npm install -g react-native-cli --registry=https://registry.npm.taobao.org



4

安装Android开发环境（即Android Studio）


Android官网下载Android Studio地址：（需要翻墙）

https://developer.android.com/studio/install.html?pkg=tools



其中需要注意，必须要安装规定版本的一些内容，以下列出

打开Android Studio后

菜单栏Tools->Android->SDK Manager

左侧菜单栏Apperance & Behavior->System Settings->Android SDK


右边SDK Platforms和SDK Tools分别需要安装必须的版本（见图）

安装完以上，需要配置Android的环境变量


配置环境变量

桌面上的此电脑图标->右键属性->高级系统设置->高级->环境变量->系统变量


新建

变量名填写ANDROID_HOME

变量值填写Android Sdk的安装路径（默认路径在user下，当前用户的AppData\Local\Android\sdk）（例如 C:\Users\sh\AppData\Local\Android\sdk）


Path点编辑

编辑环境变量面板右侧点击新建，添加以下两项

%ANDROID_HOME%\platform-tools

%ANDROID_HOME%\tools



5

如果在2或者4那步配置了环境变量，需要重新打开命令行

去到需要新建项目的目录

新建项目（AwesomeProject为项目名字，名字可以自己取，这里例子用这个，下同）

react-native init AwesomeProject

新建完之后进入目录

cd AwesomeProject



6（这一步非常重要，官网就是没写这一步，搞了我好久都跑不通）

通过资源管理器进入以下目录

{root_path}\android\app\src\main

查看是否有assets文件夹


6.1 如果没有，那么新建一个assets的空文件夹


然后在命令行界面，项目根目录下运行以下命令

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

运行成功的话，assets文件夹下会多两个文件index.android.bundle和index.android.bundle.meta


6.2 如果有assets文件夹，那么看一下是否存在

index.android.bundle和index.android.bundle.meta文件

没有的话，运行6.1的那个命令，生成这两个文件



7

连接上一个安卓手机（记得打开调试功能，允许usb调试）

react-native run-android

跑完命令，看到build success说明编译成功，之后没有报错且手机上打开显示白色底的欢迎界面，就说明成功了