我們書接上文《如何用 React Native 創(chuàng)建一個iOS APP？》肛著，繼續(xù)來講如何用 React Native 創(chuàng)建一個iOS APP圆兵。接下來，我們會涉及到很多控件枢贿。

1 AppRegistry.registerComponent(

上述是定義應用程序的入口點殉农。這也是JavaScript 代碼開始執(zhí)行的地方。 這是一個本地用戶界面反應的基本結(jié)構(gòu)局荚。我們定義的每個視圖將遵循相同的基本結(jié)構(gòu)超凳。 在本教程中愈污，我們將創(chuàng)建一個既可以瀏覽書籍又能知道書籍介紹比如作者、標題或關于書籍的簡介轮傍。你還可以通過檢索書名或作者來查找你想要的書籍暂雹。下面我要介紹這個應用程序。我們將會使用谷歌圖書 API的數(shù)據(jù)金麸。

添加一個標簽欄

該應用程序會有一個有兩項的標簽欄--- Featured 和 Search擎析。我們將首先添加它。 雖然你擁有 index.ios.js 文件中所有的代碼挥下，這是不推薦的揍魂，因為它會隨著應用程序的代碼的增加而混亂。為了更好的管理棚瘟，我們要在不同的文件中創(chuàng)建類別现斋。 創(chuàng)建兩個 JavaScript 文件在你項目的根目錄（和 index.ios.js 文件在相同的位置）。為 Search.js 文件和 Featured.js 命名偎蘸。打開 Featured.js 并添加以下代碼庄蹋。

你應該熟悉以上那個代碼；它非常類似于我們之前看到的代碼迷雪。我們設置 Strict Mode限书，加載 react-native 模塊，創(chuàng)建視圖樣式章咧，渲染UI 和渲染輸出()函數(shù)功能倦西。最后一行代碼輸出 Featured 類從而使他更方便地被其他文件所用。請注意我們所說的 class 和 function有點不同于 index.ios.js赁严。JavaScript 有不同的方式表示 class和 function扰柠。可以隨意選擇你喜歡的你風格疼约。接下來的教材中卤档，我們將使用上邊所使用的風格。 通過樣式表中的定義程剥，我們可以看出基本的 CSS 屬性劝枣。我們?yōu)橐晥D中的文本和中心內(nèi)容設置字體大小和背景顏色。但你可能不熟悉 flex:1樣式织鲸。這是 flexbox舔腾，CSS 規(guī)范的最新附加功能。flex:1 使元素標記容器占用的空間在屏幕上不被兄弟元素占用昙沦，否則它只能通過占用足夠的空間來適應它的內(nèi)容琢唾。以后我們將更加重視 flex。了解更多的Flexbox 樣式盾饮，你可以閱讀本指南采桃。 在 Search.js 添加以下程序懒熙。

上述程序除了文本組件中的文本都類似于 Featured.js 代碼。 在 index.ios.js 中剪切所有并粘貼在下邊普办。

這時我們需要從我們創(chuàng)建的文件中導出兩個模塊工扎，并將他們分配給變量。在 class 內(nèi)部衔蹲，我們指定一個構(gòu)造函數(shù)來為 class 設置一個狀態(tài)肢娘。這時我們要用組件的狀態(tài)函數(shù)。創(chuàng)建一個名為 selectedTab 的屬性舆驶，并將其值設置為 featured橱健。我們將使用 featured 來確定哪個選項卡應該是主動的。然后設置默認選項卡沙廉。

在渲染()函數(shù)中我們使用 TabBarIOS 組件創(chuàng)建一個標簽欄拘荡。記得添加組件使用解構(gòu)作業(yè)否則使用完全限定名稱，例如：React.TabBarIOS撬陵。

我們創(chuàng)建兩個標簽欄項目珊皿。我們?yōu)槊總€項目設立選中狀態(tài)并定義一個函數(shù)，當這個項目被選中時就會被命名巨税。在 Featured 選項卡中蟋定，選擇設置為 true，如果 selectTab 狀態(tài)我們前邊定義的值為 feature草添，組件 selectedTab 是否等同于「搜索」驶兜。無論哪個選項卡被設置為 true 都將是活動選項卡。我們?yōu)闃撕灆陧椖渴褂孟到y(tǒng)圖標果元。 注意我們使用我們的自定義組件標簽促王，就像任何其他組件犀盟，例如：因為我們需要相應的模塊而晒，并將其分配到一個變量，你可以使用變量引入組件文件阅畴。這導致在 render() 函數(shù)的代碼組件的類包含就像是文件的一部分倡怎。順便說一下，我為各自變量的類名使用相同名稱的變量贱枣，但不一定要這樣监署，你可以盡可能的使用你喜歡的任何名稱。 當標簽欄被選中后纽哥，onPress 組件的屬性就會被回調(diào)函數(shù)定義钠乏。selectedTab 屬性的函數(shù)集值最終確定活動選項卡。 打開模擬器并按 Command-R 重新加載應用程序春塌，你就會看到如下顯示晓避。

添加 Navigation Bar

接下來簇捍，我們將向應用程序添加一個導航欄，給這個項目添加兩個以上的文件俏拱。他們將是根視圖導航堆棧的標簽暑塑。為 BookList.js 和SearchBooks.js 文件命名。 在 BookList.js 應用程序中添加以下代碼锅必。

在 SearchBooks.js 應用程序中添加以下代碼事格。

在兩個文件中，我們已經(jīng)創(chuàng)建了一個帶有空白視圖的模塊然后輸出模塊搞隐。

修改 Featured.js 如圖：

下一個 Search,js 修改如下所示:

就像在 Featured.js驹愚，上面創(chuàng)建了一個導航控制器，設置其最初的路線并為它設置標題劣纲。

重新加載應用程序么鹤，你會看到如下所示：

獲取和顯示數(shù)據(jù)

現(xiàn)在我們要讀取數(shù)據(jù)了。首先我們要構(gòu)建有假數(shù)據(jù)的視圖味廊，然后使用來自 API 的真數(shù)據(jù)蒸甜。 在 BookList.js 文件的頂部添加如下與其他變量的聲明。

修改解構(gòu)任務直到顯示包含多個組件時我們才能使用余佛。

添加以下模版：

然后修改如圖所示的 class：

重新加載應用程序就會有如下顯示：

在以上代碼中柠新，我們創(chuàng)建了一個類似于從 API 中調(diào)用的目標 JSON，我們通過這個目標為單獨的一本書創(chuàng)建了屬性和價值辉巡。在 class 文件中恨憎，我們使用假數(shù)據(jù)只為了得到第一個元素來填充我們的觀點。我們使用圖像組件把圖像加載成視圖郊楣。需要注意的是憔恳，我們要在樣式表中設置它的寬度和高度。如果你不指定圖像在樣式表中的尺寸净蚤，它就不會出現(xiàn)在視圖中钥组。 我們指定一個 flexDirection 樣式：“行”容器。這將使帶有這種風格元素的孩子們的布局默認為水平而不是垂直今瀑。需要注意的是我們該如何包裝組件內(nèi)的其他組件程梦。在上面有帶有兩個孩子的主要容器物----一個圖像和一個視圖。這個視圖能顯示兩個屬于自己的孩子----即兩個文本組件橘荠。 首先是圖像布局屿附，然后視圖（right Container)水平放置在它旁邊。我們指定一個 flex 模版：1rightContainer哥童。這使得視圖占據(jù)了剩下的空間而不是圖像挺份。如果你想要看到 flex 樣式的影響，那就添加以下 rightContainer贮懈。

重新加載應用程序匀泊，你就會看到 rightContainer 樣式的組件占用的空間影暴。它占據(jù)整個空間而不被其他兄弟姐妹所占有。它并不拉伸屏幕探赫，因為外容器有一些填充并且圖像有邊緣設置權(quán)利型宙。

從 rightContainer 刪除 flex：1，重新加載應用程序÷追停現(xiàn)在組件只占用足夠的可以適應其內(nèi)容的空間妆兑。

如果你為 flex:2 的縮略圖和 rightContainer 設置一種風格，他們可能占據(jù)相同數(shù)量的空間毛仪，而且他們會有一個 2:2（或1:1）的寬度比搁嗓。你可以指定任何值，所有可能的比例都會考慮在內(nèi)箱靴。

上圖為2017年最新的視頻教程資料腺逛，搜索2352149755加我好友私聊我上傳視頻教程，有什么不懂的也可以來私聊問我衡怀。

不定時更新中棍矛。

如果你能明白這些視頻資料的好差，那么你也算是入行了抛杨，底層和中高層就是這一步之差够委。