React-native学习（一）：构建第一个Android项目

注：本文使用的是Ubuntu系统进行构建，记录了从开始到成功构建的一些坑，Mac OS还请参见其他文章。

1. 安装React-native

教程说使用如下命令安装

命令1 npm install -g react-native-cli

紧接着出现了如下问题：

问题1 npm未安装

The program ‘npm’ is currently not installed. You can install it by typing:
命令2 sudo apt install npm

按照指引使用sudo apt install npm，紧接着又出现了如下问题

问题1.1 依赖包未安装

The following packages have unmet dependencies:
npm : Depends: node-gyp (>= 0.10.9) but it is not going to be installed
E: Unable to correct problems, you have held broken packages.

之后使用如下命令想一并把依赖包装上

sudo apt-get -f install

结果好像并不奏效，出现了如下提示

Reading package lists… Done
Building dependency tree
Reading state information… Done
0 upgraded, 0 newly installed, 0 to remove and 218 not upgraded.

经过一番查找，尝试了如下命令后再次尝试安装，提示和一开始一样，依然是依赖包的版本不符

sudo apt-get update
sudo apt-get upgrade

后又经一番查找，发现之前我修改过apt的源以求更快的下载，该apt的源有问题。使用如下命令编辑source.list文件，修改文件中的源，改为使用阿里云的镜像。

sudo gedit /etc/apt/sources.list

将文件中的源修改为如下内容：

deb http://mirrors.aliyun.com/ubuntu/ xenial main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ xenial-security main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ xenial-updates main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ xenial-backports main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ xenial-proposed main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ xenial main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-security main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-updates main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-backports main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-proposed main restricted universe multiverse
deb http://archive.canonical.com/ubuntu/ xenial partner
deb http://extras.ubuntu.com/ubuntu/ xenial main

之后再使用命令2 sudo apt install npm便可以安装npm了，之后执行命令1安装react-native

2. 创建一个react-native项目

使用如下命令在当前目录下创建一个react-native项目

react-native init 项目名

命令执行完成后会出现一个与项目同名的文件夹，进入这个文件夹后执行如下命令即可在当前adb连接的设备上安装这个项目。

react-native run-android

执行完命令后，设备上出现了如下界面

执行了一会后，突然弹出一个要晃瞎人眼的界面

界面上显示出了如下提示

Unable to load script from assets ‘index.android.bundle’. Make sure your bundle is packaged correctly or you’re running a package server.

问题2 缺少bundle文件

参考这篇文章
React-Native系列Android——Javascript文件加载过程分析
得知react-native是将整合和优化的JS文件，存放到assets资源文件目录中，就是index.android.bundle文件，而加载过程中找不到这个文件，所以我们需要进行以下操作
1.在项目的main文件夹中创建assets文件夹

mkdir android/app/src/main/assets  // 当前处于当前项目根目录

2.执行react-native bundle命令创建JS整合文件

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/

--entry-file： 应用入口文件，默认为项目根目录下的index.js（之前版本的react有区分android,ios，之后整合成了一个）
--platform：系统平台，android或者ios选其一
--transformer： babel转换器，默认使用\node_modules\react-native\packager\transformer.js
--dev：是否开发模式，默认开启，此时不会进行JS混淆和压缩优化，方便开发者调试。
--bundle-output： 最终整合的输出文件名，一般是index.android.bundle或index.ios.bundle
--bundle-encoding：整合文件的编码格式，默认utf-8
--assets-dest：整合资源文件存储目录，android打包时会定义为项目的assets资源编译临时目录。

3.重新运行项目
使用react-native run-android重新运行安装，之后就出现了如下界面，第一个项目构建完成！

本文记录了在配置过程及在配置过程中遇到的一些问题，由于我也是初学react，并且对JS也不是很熟悉，所以之后仍需要多加探索，还没有实现一些可观的效果～