前兩部分型豁，《如何用 React Native 創(chuàng)建一個iOS APP僵蛛？》尚蝌，《如何用 React Native 創(chuàng)建一個iOS APP （二）？》中充尉，我們分別講了用 React Native 來創(chuàng)建 Navigation Bar飘言，Tab Bar 等這些控件，今天在第三節(jié)驼侠，我們著重講一下剩下的一些控件姿鸿。閑話少敘，我們直入主題倒源！
添加一個ListView
React Native 有一個叫做 ListView 的組件苛预，可以顯示滾動的行數(shù)據(jù)，基本上是 ios 項目上的一個術(shù)語表視圖笋熬。
首先热某，按照所顯示的修改解構(gòu)的聲明以包含多個組件，然后就可以使用胳螟。
添加以下風(fēng)格樣式表：
添加以下BookList類構(gòu)造函數(shù)：
然后添加以下功能：
在構(gòu)造函數(shù)中昔馋，我們創(chuàng)建一個列表視圖。數(shù)據(jù)源對象糖耸，并將其分配給數(shù)據(jù)源屬性秘遏。列表視圖使用的數(shù)據(jù)源是一個接口，可以確定更新了的 UI 改變所在的行嘉竟。我們提供一個函數(shù)來比較雙行的同一性邦危，它可以用來決定數(shù)據(jù)列表的改變。
當組件加載/安裝到用戶界面視圖時 componentDidMount() 便被調(diào)用周拐。當這個函數(shù)被調(diào)用時铡俐，我們可以從我們的數(shù)據(jù)對象中設(shè)置數(shù)據(jù)源屬性凰兑。
修改 render() 函數(shù)如下圖所示：
接下來添加以下書目類函數(shù)：
以上創(chuàng)建了一個在 render() 中的列表視圖組件呈現(xiàn)妥粟。這是datasource 屬性設(shè)置為數(shù)據(jù)源的值，我們前面定義的函數(shù)renderBook() 呈現(xiàn) ListView 的行吏够。
在 renderBook() 我們使用 TouchableHighlight 組件勾给。這是一個包裝器進行觀點正確的響應(yīng)觸摸。在低壓下锅知，包裝視圖的透明度降低播急，使得襯底的顏色顯示變暗或視圖著色。如果你壓在一個列表視圖售睹，你將看到突出的顏色桩警，就像我們先前選擇一個表視圖單元格一樣。添加一個空視圖組件底部的行分隔符的樣式昌妹。這種視圖將只是一個灰色水平線捶枢，就像每一行之間的一個分區(qū)握截。
重新加載應(yīng)用程序，你應(yīng)該看到只有一個細胞的表視圖烂叔。
接下來把真實的數(shù)據(jù)加載到應(yīng)用程序谨胞。
從文件中刪除FAKE—BOOK—DATA變量，添加以下數(shù)據(jù)來代替它蒜鸡。這是我們從數(shù)據(jù)中加載的 URL胯努。
修改 destructuring 聲明。
添加以下程序：
構(gòu)造函數(shù)修改如圖所示。我們將另一個屬性添加到組件的狀態(tài)對象表蝙。我們通過這個來判斷是否加載視圖硫眯。
修改 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 添加一個檢查系統(tǒng)导狡，如果它設(shè)置為 true约巷，我們就要返回被renderLoadingView() 視圖返回來的視圖。這將是一個視圖顯示一個活動指標（轉(zhuǎn)子）與文本“加載書籍…”旱捧。加載完成后独郎，你就會看到一個表中的書籍列表。
添加 Detail View
如果你點擊表中的一個細胞枚赡，細胞將突出顯示氓癌，但并不會有什么反應(yīng)。我們將添加一個可以顯示我們選擇這本書的詳細信息的細節(jié)視圖贫橙。
將文件添加到項目并命名為 BookDetail.js贪婉。把以下內(nèi)容粘貼到文件中。
我們將通過上面代碼中的大多數(shù)所以不用全部瀏覽卢肃。我們沒見過的是用道具的使用屬性來提取數(shù)據(jù)疲迂。我們將通過道具屬性設(shè)置傳遞數(shù)據(jù)到這個類。在上面莫湘，我們得到這個數(shù)據(jù)并用它來填充視圖尤蒿。
請注意我們在頂部邊距設(shè)定一個容器。如果你不這樣視圖將會從屏幕頂端開始幅垮，這很可能導(dǎo)致一些元素被導(dǎo)航欄隱藏腰池。
在 BookList.js 中添加以下程序：
修改渲染()函數(shù)中的 TouchableHightlight 書目類如下圖所示：
當行被壓縮時上述指定一個可能被命名的回調(diào)函數(shù)。把以下函數(shù)粘貼到類函數(shù)。這將推動 BookDetail 視圖到導(dǎo)航堆棧示弓，設(shè)置出現(xiàn)在導(dǎo)航欄中的標題欄演怎。它通過這本書的對象對應(yīng)于BookDetail類的特定行。
Searching
既然我們已經(jīng)完成了特色的主從復(fù)合結(jié)構(gòu)的視圖選項卡避乏，我們將在搜索選項卡操作以允許用戶查詢 API 對書籍的選擇爷耀。
打開 SearchBooks.js 并做如圖修改。
在上面我們在構(gòu)造函數(shù)中設(shè)置一些屬性：bookAuthor拍皮，bookTitle歹叮，isLoading 和errorMessage 。很快我們將看到如何使用他們铆帽。
在render()方法中咆耿，我們檢查如果 isLoading 是真的，如果確實是創(chuàng)建一個活動指標爹橱，否則萨螺，我們就創(chuàng)建了一個空的觀點。以后將會用的到愧驱。
然后我們創(chuàng)建一個用于插入查詢的搜索表單慰技。Texinput 用于輸入。我們?yōu)槊總€ Texinput 組件指定一個回調(diào)函數(shù)時组砚，當用戶鍵入一些文本時將調(diào)用該組件的值吻商。命名時，回調(diào)函數(shù) bookTileinput() 和bookAuthorinput() 將設(shè)置 bookAuthor和bookTlie 的狀態(tài)屬性和用戶輸入數(shù)據(jù)糟红。當用戶按下搜索按鈕時 searchBooks() 就被命名了艾帐。
注意 React Native 沒有一個按鈕組件。相反盆偿，我們使用TouchableHighlight 并把它補充在文本周圍柒爸，然后其造型就像是一個按鈕。搜索按鈕被按下時事扭，根據(jù)輸入的數(shù)據(jù)構(gòu)造一個 URL捎稚。用戶可以通過搜索標題或作者來檢索，或即通過標題又通過作者來檢索句旱。如果返回結(jié)果阳藻，SearchResults 將被推到導(dǎo)航堆棧否則將顯示一條錯誤消息晰奖。我們還將通過 SearchResults 類響應(yīng)數(shù)據(jù)谈撒。
創(chuàng)建一個名為 SearchResults.js 文件并把以下程序粘貼進去。
我們已經(jīng)在以上我們使用的代碼中瀏覽了很多匾南，所以我不會陷入每一個細節(jié)啃匿。上面得到的數(shù)據(jù)通過道具屬性傳遞到類并創(chuàng)建一個 ListView 視圖的數(shù)據(jù)填充。
API 中我們注意到一件事是，當你通過作者檢索時溯乒，一些結(jié)果不會記錄數(shù)據(jù)但數(shù)據(jù)在作者本身夹厌。這意味著對于一些行 book，volumelnfo裆悄，imageLinks 的描述會有未定義的值矛纹。因此我們要做一個檢查，表明一個空的圖像視圖沒有是否有圖像光稼，如果不做檢查應(yīng)用程序在加載圖片時可能會本行奔潰或南。
我們使用之前創(chuàng)建的相同的 BookDetail 組件來顯示每本書的細節(jié)。我們應(yīng)該把上面的檢查缺失的數(shù)據(jù)打包并試圖加載 BookDetail 視圖與缺失的數(shù)據(jù)艾君。打開 BookDetail.js采够，修改 render() 函數(shù)如圖所示。它用來檢查數(shù)據(jù)傳入是否有一個圖像和在檢查傳入數(shù)據(jù)之前的描繪填充視圖冰垄。如果我們試圖描繪一本沒有圖片和簡介的書蹬癌，各自的區(qū)域?qū)⑹强瞻滓黄Ｄ憧赡芟氚岩粋€錯誤的信息強加給用戶虹茶，但當它在這里時我們會不理會它逝薪。
上圖為2017年最新的視頻教程資料，搜索2352149755加我好友私聊我上傳視頻教程蝴罪，有什么不懂的也可以來私聊問我翼闽。
不定時更新中。
如果你能明白這些視頻資料的好差洲炊，那么你也算是入行了感局，底層和中高層就是這一步之差。
