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也不是很熟悉，所以之後仍需要多加探索，還沒有實現一些可觀的效果～