前兩部分，《如何用 React Native 創(chuàng)建一個(gè)iOS APP？》，《如何用 React Native 創(chuàng)建一個(gè)iOS APP （二）？》中，我們分別講了用 React Native 來創(chuàng)建 Navigation Bar，Tab Bar 等這些控件，今天在第三節(jié)，我們著重講一下剩下的一些控件。閑話少敘，我們直入主題！
添加一個(gè)ListView
React Native 有一個(gè)叫做 ListView 的組件，可以顯示滾動(dòng)的行數(shù)據(jù)，基本上是 ios 項(xiàng)目上的一個(gè)術(shù)語表視圖。
首先，按照所顯示的修改解構(gòu)的聲明以包含多個(gè)組件，然后就可以使用。
添加以下風(fēng)格樣式表：
添加以下BookList類構(gòu)造函數(shù)：
然后添加以下功能：
在構(gòu)造函數(shù)中，我們創(chuàng)建一個(gè)列表視圖。數(shù)據(jù)源對(duì)象，并將其分配給數(shù)據(jù)源屬性。列表視圖使用的數(shù)據(jù)源是一個(gè)接口，可以確定更新了的 UI 改變所在的行。我們提供一個(gè)函數(shù)來比較雙行的同一性，它可以用來決定數(shù)據(jù)列表的改變。
當(dāng)組件加載/安裝到用戶界面視圖時(shí) componentDidMount() 便被調(diào)用。當(dāng)這個(gè)函數(shù)被調(diào)用時(shí)，我們可以從我們的數(shù)據(jù)對(duì)象中設(shè)置數(shù)據(jù)源屬性。
修改 render() 函數(shù)如下圖所示：
接下來添加以下書目類函數(shù)：
以上創(chuàng)建了一個(gè)在 render() 中的列表視圖組件呈現(xiàn)。這是datasource 屬性設(shè)置為數(shù)據(jù)源的值，我們前面定義的函數(shù)renderBook() 呈現(xiàn) ListView 的行。
在 renderBook() 我們使用 TouchableHighlight 組件。這是一個(gè)包裝器進(jìn)行觀點(diǎn)正確的響應(yīng)觸摸。在低壓下，包裝視圖的透明度降低，使得襯底的顏色顯示變暗或視圖著色。如果你壓在一個(gè)列表視圖，你將看到突出的顏色，就像我們先前選擇一個(gè)表視圖單元格一樣。添加一個(gè)空視圖組件底部的行分隔符的樣式。這種視圖將只是一個(gè)灰色水平線，就像每一行之間的一個(gè)分區(qū)。
重新加載應(yīng)用程序，你應(yīng)該看到只有一個(gè)細(xì)胞的表視圖。
接下來把真實(shí)的數(shù)據(jù)加載到應(yīng)用程序。
從文件中刪除FAKE—BOOK—DATA變量，添加以下數(shù)據(jù)來代替它。這是我們從數(shù)據(jù)中加載的 URL。
修改 destructuring 聲明。
添加以下程序：
構(gòu)造函數(shù)修改如圖所示。我們將另一個(gè)屬性添加到組件的狀態(tài)對(duì)象。我們通過這個(gè)來判斷是否加載視圖。
修改 componetDidMount() 函數(shù)如圖所示，添加如下 fetchData() 函數(shù)。fetchData() 調(diào)用Googlebooks API 并且用從響應(yīng)得到的數(shù)據(jù)設(shè)置數(shù)據(jù)源屬性。它也把 isLoading 設(shè)置為 true。
按提示修改渲染()函數(shù)，添加如下 renderLoading 函數(shù)。我們?yōu)閕sLoading 添加一個(gè)檢查系統(tǒng)，如果它設(shè)置為 true，我們就要返回被renderLoadingView() 視圖返回來的視圖。這將是一個(gè)視圖顯示一個(gè)活動(dòng)指標(biāo)（轉(zhuǎn)子）與文本“加載書籍…”。加載完成后，你就會(huì)看到一個(gè)表中的書籍列表。
添加 Detail View
如果你點(diǎn)擊表中的一個(gè)細(xì)胞，細(xì)胞將突出顯示，但并不會(huì)有什么反應(yīng)。我們將添加一個(gè)可以顯示我們選擇這本書的詳細(xì)信息的細(xì)節(jié)視圖。
將文件添加到項(xiàng)目并命名為 BookDetail.js。把以下內(nèi)容粘貼到文件中。
我們將通過上面代碼中的大多數(shù)所以不用全部瀏覽。我們沒見過的是用道具的使用屬性來提取數(shù)據(jù)。我們將通過道具屬性設(shè)置傳遞數(shù)據(jù)到這個(gè)類。在上面，我們得到這個(gè)數(shù)據(jù)并用它來填充視圖。
請(qǐng)注意我們?cè)陧敳窟吘嘣O(shè)定一個(gè)容器。如果你不這樣視圖將會(huì)從屏幕頂端開始，這很可能導(dǎo)致一些元素被導(dǎo)航欄隱藏。
在 BookList.js 中添加以下程序：
修改渲染()函數(shù)中的 TouchableHightlight 書目類如下圖所示：
當(dāng)行被壓縮時(shí)上述指定一個(gè)可能被命名的回調(diào)函數(shù)。把以下函數(shù)粘貼到類函數(shù)。這將推動(dòng) BookDetail 視圖到導(dǎo)航堆棧，設(shè)置出現(xiàn)在導(dǎo)航欄中的標(biāo)題欄。它通過這本書的對(duì)象對(duì)應(yīng)于BookDetail類的特定行。
Searching
既然我們已經(jīng)完成了特色的主從復(fù)合結(jié)構(gòu)的視圖選項(xiàng)卡，我們將在搜索選項(xiàng)卡操作以允許用戶查詢 API 對(duì)書籍的選擇。
打開 SearchBooks.js 并做如圖修改。
在上面我們?cè)跇?gòu)造函數(shù)中設(shè)置一些屬性：bookAuthor，bookTitle，isLoading 和errorMessage 。很快我們將看到如何使用他們。
在render()方法中，我們檢查如果 isLoading 是真的，如果確實(shí)是創(chuàng)建一個(gè)活動(dòng)指標(biāo)，否則，我們就創(chuàng)建了一個(gè)空的觀點(diǎn)。以后將會(huì)用的到。
然后我們創(chuàng)建一個(gè)用于插入查詢的搜索表單。Texinput 用于輸入。我們?yōu)槊總€(gè) Texinput 組件指定一個(gè)回調(diào)函數(shù)時(shí)，當(dāng)用戶鍵入一些文本時(shí)將調(diào)用該組件的值。命名時(shí)，回調(diào)函數(shù) bookTileinput() 和bookAuthorinput() 將設(shè)置 bookAuthor和bookTlie 的狀態(tài)屬性和用戶輸入數(shù)據(jù)。當(dāng)用戶按下搜索按鈕時(shí) searchBooks() 就被命名了。
注意 React Native 沒有一個(gè)按鈕組件。相反，我們使用TouchableHighlight 并把它補(bǔ)充在文本周圍，然后其造型就像是一個(gè)按鈕。搜索按鈕被按下時(shí)，根據(jù)輸入的數(shù)據(jù)構(gòu)造一個(gè) URL。用戶可以通過搜索標(biāo)題或作者來檢索，或即通過標(biāo)題又通過作者來檢索。如果返回結(jié)果，SearchResults 將被推到導(dǎo)航堆棧否則將顯示一條錯(cuò)誤消息。我們還將通過 SearchResults 類響應(yīng)數(shù)據(jù)。
創(chuàng)建一個(gè)名為 SearchResults.js 文件并把以下程序粘貼進(jìn)去。
我們已經(jīng)在以上我們使用的代碼中瀏覽了很多，所以我不會(huì)陷入每一個(gè)細(xì)節(jié)。上面得到的數(shù)據(jù)通過道具屬性傳遞到類并創(chuàng)建一個(gè) ListView 視圖的數(shù)據(jù)填充。
API 中我們注意到一件事是，當(dāng)你通過作者檢索時(shí)，一些結(jié)果不會(huì)記錄數(shù)據(jù)但數(shù)據(jù)在作者本身。這意味著對(duì)于一些行 book，volumelnfo，imageLinks 的描述會(huì)有未定義的值。因此我們要做一個(gè)檢查，表明一個(gè)空的圖像視圖沒有是否有圖像，如果不做檢查應(yīng)用程序在加載圖片時(shí)可能會(huì)本行奔潰。
我們使用之前創(chuàng)建的相同的 BookDetail 組件來顯示每本書的細(xì)節(jié)。我們應(yīng)該把上面的檢查缺失的數(shù)據(jù)打包并試圖加載 BookDetail 視圖與缺失的數(shù)據(jù)。打開 BookDetail.js，修改 render() 函數(shù)如圖所示。它用來檢查數(shù)據(jù)傳入是否有一個(gè)圖像和在檢查傳入數(shù)據(jù)之前的描繪填充視圖。如果我們?cè)噲D描繪一本沒有圖片和簡(jiǎn)介的書，各自的區(qū)域?qū)⑹强瞻滓黄Ｄ憧赡芟氚岩粋€(gè)錯(cuò)誤的信息強(qiáng)加給用戶，但當(dāng)它在這里時(shí)我們會(huì)不理會(huì)它。
上圖為2017年最新的視頻教程資料，搜索2352149755加我好友私聊我上傳視頻教程，有什么不懂的也可以來私聊問我。
不定時(shí)更新中。
如果你能明白這些視頻資料的好差，那么你也算是入行了，底層和中高層就是這一步之差。
