The Complete React Native and Redux Course - Albums

The Complete React Native and Redux Course - Albums

講師：Stephen Grider

開發環境

Macbook pro 13'

IDE: ATOM 1.13.1

OSX安裝環境

1. 首先到Apple store安裝Xcode，或是更新到最新。
2. 安裝Homebrew。
3. 安裝Node.js，到terminal輸入brew install node，安裝完畢後，可輸入node -v確認是否安裝成功。
4. 安裝Watchman，輸入brew install watchman，Watchman是來自Facebook的檔案監控工具。React Native用來偵測程式碼的變化，以便重新建構。
5. 最後安裝React Native CLI工具，輸入npm install -g react-native-cli。npm是Node Package Manager(Node套件管理員)，是能夠讓你輕易地下載並管理專案所需的任合相依套件。
6. 建立React Native專案，輸入react-native init albums。
7. 輸入react-native run-ios，就會執行跑模擬器來顯示所開發的專案。

Atom安裝

Atom是一個強大的文字編輯器，擁有大量的插件可以使用，且大部分插件都有在持續更新，以下就是推薦必安裝的插件：

• Linter-ESlint: 是一個可以幫你『即時』除錯的好工具。
• file-icons: 美化IDE，會在檔案前面多一個小icon，可以直覺辨別那是什麼檔案。
• 
  

ESLint安裝

開啟Atom，點選左上角的Atom >> Preferences >> Install，搜尋Linter-ESlint，找到之後，就直接點選Install，也要安裝linter。然後回到terminal輸入npm install --save-dev eslint-config-rallycoding，再回到Atom的albums專案，在左邊欄位的專案樹狀圖，右鍵點選albums資料夾，選擇add file來新增檔案，檔名輸入.eslintrc，在該檔案內容裡輸入下段程式：

輸入完後，儲存.eslintrc，再關閉.eslintrc分頁，也關閉index.ios.js分頁，再打開index.ios.js，嘗試把一個分號刪除掉，就可以看到即時的錯誤訊息出現如下圖。

作者其實有分別針對三個文字編譯器(Atom, Sublime Text 3, VScode)說明如何加上ESlint的套件，但是我個人覺得Atom比較好用，Sublime Text 3要錢，所以就不講其他兩個文字編譯器。

練習

先把index.ios.js跟index.android.js兩個檔案裡的程式碼都全部刪除，由於我是使用macbook，所以我就只針對index.ios.js開發。之後，匯入兩個套件，分別是React跟ReactNative，程式碼如下：

React套件是已知一個元件應該要有怎樣的行為，且也已知如何把一群元件，讓他們可以一起工作。React Native套件是知道如何把一個元件輸出，且顯示元件在裝置上的位置。提供預設核心的元件，像是(image, text)。

延續上一個程式碼，建立一個Text component，程式碼如下：

建立一個標題物件，並且使用style來設定標題的格式，程式碼如下：


在ios模擬器上的示意圖如下：

更改標題底色，首先要先建立一個View的母物件，讓TextView被包含在裡面，僅修改header.js程式，程式碼如下：


在ios模擬器上的示意圖如下：

更改標題的位置、高度、使TextView置中、以及增加陰影，僅修改header.js，程式碼如下：



在ios模擬器上的示意圖如下：

為了重複使用header.js，因此header.js裡的TextView的內容不能寫死，直接看程式碼如下：

在ios模擬器上的示意圖如下：

新增Body物件，因為這個例子的主題是專輯清單，所以會顯示很多專輯。一步一步來，先新增Body基底，程式碼如下：

在ios模擬器上的示意圖如下：

延續上述所說，要顯示很多專輯，所以會夠過截取API的方式，來獲取專輯內容。在那之前先說明functional component跟class component的不同，請看下表：

因此，把AlbumList.js裡的程式碼做修改，請看程式碼：

其結果應該要跟上一個示意圖一樣。

為了獲取API，這邊使用的是third party: axios，因此要在albums目錄底下輸入npm install --save axios，如下圖:

接著匯入第三方套件，並且使用它來獲取API資料，程式碼如下：



這邊先插入一個教學，就是如何看log的方法。
因為我是使用Macbook，所以這邊就先以Macbook為主，對著模擬器按下command + D，會顯示menu選單，如下圖：

用滑鼠按下Start Remote JS Debugging，這邊因為我已經正在Debugging狀態，所以顯示是Stop Remote JS Debugging。 之後，會跳出瀏覽器，如下圖：

然後按下鍵盤command + option + J，就會顯示log資訊如下圖：

點擊object展開，可以看到status: 200，代表資料獲取成功，如下圖：

點擊data: Array[5]展開，可以看到五筆資料，如下圖：

state可以用來動態地被用來儲存資料，以下是它的定義規則：

• 一個普通的JavaScript對象通常被用來記錄和回應使用者的觸發事件。
• 當我要更新正在顯示的物件的內容時，要呼叫this.setState。
• 要改變state的值，要使用this.state，而不能直接改變state的值。

以下是state的例子：

對模擬器按下command + R，其結果顯示如下圖：

以前若要顯示陣列的所有值，會使用迴圈的方式來實現。但在React Native是使用map的方式，把植給迭代出來，程式碼如下：

其結果如下圖：

為了要顯示Album的更多資訊，所以新建了一個AlbumDetail.js，並且從父組件傳遞資料過來，因此有使用props來接收傳遞過來的資料，其程式碼如下：

其結果如下圖，基本上是跟上面的結果是一樣的：

若要自定義View的樣式，就新增Card.js，內容如下程式碼，並且匯入到AlbumDetail.js：

其結果如下圖：

更美觀優化，一樣也是自定義，新增CardSection.js，並且匯入到AlbumDetail.js，程式碼如下：

其結果如下圖：

開始佈局專輯標頭資訊，分別有專輯封面、專輯名稱和歌手名稱。因此程式碼排版如下：

因為還沒有載入封面圖像，因此先只有文字排版，模擬器結果如下：

載入專輯縮圖，程式碼如下：

模擬器結果如下：

載入專輯封面，程式碼如下

模擬器結果如下：