我們書接上文《如何用 react native 建立一個ios app？》，繼續來講如何用 react native 建立一個ios app。接下來，我們會涉及到很多控件。
1 appregistry.registercomponent(
上述是定義應用程式的入口點。這也是 javascript 代碼開始執行的地方。
這是一個本地使用者界面反應的基本結構。我們定義的每個視圖将遵循相同的基本結構。
在本教程中，我們将建立一個既可以浏覽書籍又能知道書籍介紹比如作者、标題或關于書籍的簡介。你還可以通過檢索書名或作者來查找你想要的書籍。下面我要介紹這個應用程式。我們将會使用谷歌圖書 api的資料。
該應用程式會有一個有兩項的标簽欄--- featured 和 search。我們将首先添加它。
雖然你擁有 index.ios.js 檔案中所有的代碼，這是不推薦的，因為它會随着應用程式的代碼的增加而混亂。為了更好的管理，我們要在不同的檔案中建立類别。
建立兩個 javascript 檔案在你項目的根目錄（和 index.ios.js 檔案在相同的位置）。為 search.js 檔案和 featured.js 命名。打開 featured.js 并添加以下代碼。
你應該熟悉以上那個代碼；它非常類似于我們之前看到的代碼。我們設定 strict mode，加載 react-native 子產品，建立視圖樣式，渲染ui 和渲染輸出()函數功能。最後一行代碼輸出 featured 類進而使他更友善地被其他檔案所用。請注意我們所說的 class 和 function有點不同于 index.ios.js。javascript 有不同的方式表示 class和 function。可以随意選擇你喜歡的你風格。接下來的教材中，我們将使用上邊所使用的風格。
通過樣式表中的定義，我們可以看出基本的 css 屬性。我們為視圖中的文本和中心内容設定字型大小和背景顔色。但你可能不熟悉 flex:1樣式。這是 flexbox，css 規範的最新附加功能。flex:1 使元素标記容器占用的空間在螢幕上不被兄弟元素占用，否則它隻能通過占用足夠的空間來适應它的内容。以後我們将更加重視 flex。了解更多的flexbox 樣式，你可以閱讀本指南。
在 search.js 添加以下程式。
上述程式除了文本元件中的文本都類似于 featured.js 代碼。
在 index.ios.js 中剪切所有并粘貼在下邊。
這時我們需要從我們建立的檔案中導出兩個子產品，并将他們配置設定給變量。在 class 内部，我們指定一個構造函數來為 class 設定一個狀态。這時我們要用元件的狀态函數。建立一個名為 selectedtab 的屬性，并将其值設定為 featured。我們将使用 featured 來确定哪個頁籤應該是主動的。然後設定預設頁籤。
在渲染()函數中我們使用 tabbarios 元件建立一個标簽欄。記得添加元件使用解構作業否則使用完全限定名稱，例如：react.tabbarios。
我們建立兩個标簽欄項目。我們為每個項目設立選中狀态并定義一個函數，當這個項目被選中時就會被命名。在 featured 頁籤中，選擇設定為 true，如果 selecttab 狀态我們前邊定義的值為 feature，元件 selectedtab 是否等同于「搜尋」。無論哪個頁籤被設定為 true 都将是活動頁籤。我們為标簽欄項目使用系統圖示。
注意我們使用我們的自定義元件标簽，就像任何其他元件，例如：因為我們需要相應的子產品，并将其配置設定到一個變量，你可以使用變量引入元件檔案。這導緻在 render() 函數的代碼元件的類包含就像是檔案的一部分。順便說一下，我為各自變量的類名使用相同名稱的變量，但不一定要這樣，你可以盡可能的使用你喜歡的任何名稱。
當标簽欄被選中後，onpress 元件的屬性就會被回調函數定義。selectedtab 屬性的函數集值最終确定活動頁籤。
打開模拟器并按 command-r 重新加載應用程式，你就會看到如下顯示。
接下來，我們将向應用程式添加一個導航欄，給這個項目添加兩個以上的檔案。他們将是根視圖導航堆棧的标簽。為 booklist.js 和searchbooks.js 檔案命名。
在 booklist.js 應用程式中添加以下代碼。
在 searchbooks.js 應用程式中添加以下代碼。
在兩個檔案中，我們已經建立了一個帶有空白視圖的子產品然後輸出子產品。
修改 featured.js 如圖：
下一個 search,js 修改如下所示:
就像在 featured.js，上面建立了一個導航控制器，設定其最初的路線并為它設定标題。
重新加載應用程式，你會看到如下所示：
現在我們要讀取資料了。首先我們要建構有假資料的視圖，然後使用來自 api 的真資料。
在 booklist.js 檔案的頂部添加如下與其他變量的聲明。
修改解構任務直到顯示包含多個元件時我們才能使用。
添加以下模版：
然後修改如圖所示的 class：
重新加載應用程式就會有如下顯示：
在以上代碼中，我們建立了一個類似于從 api 中調用的目标 json，我們通過這個目标為單獨的一本書建立了屬性和價值。在 class 檔案中，我們使用假資料隻為了得到第一個元素來填充我們的觀點。我們使用圖像元件把圖像加載成視圖。需要注意的是，我們要在樣式表中設定它的寬度和高度。如果你不指定圖像在樣式表中的尺寸，它就不會出現在視圖中。
我們指定一個 flexdirection 樣式：“行”容器。這将使帶有這種風格元素的孩子們的布局預設為水準而不是垂直。需要注意的是我們該如何包裝元件内的其他元件。在上面有帶有兩個孩子的主要容器物----一個圖像和一個視圖。這個視圖能顯示兩個屬于自己的孩子----即兩個文本元件。
首先是圖像布局，然後視圖（right container)水準放置在它旁邊。我們指定一個 flex 模版：1rightcontainer。這使得視圖占據了剩下的空間而不是圖像。如果你想要看到 flex 樣式的影響，那就添加以下 rightcontainer。
重新加載應用程式，你就會看到 rightcontainer 樣式的元件占用的空間。它占據整個空間而不被其他兄弟姐妹所占有。它并不拉伸螢幕，因為外容器有一些填充并且圖像有邊緣設定權利。
從 rightcontainer 删除 flex：1，重新加載應用程式。現在元件隻占用足夠的可以适應其内容的空間。
如果你為 flex:2 的縮略圖和 rightcontainer 設定一種風格，他們可能占據相同數量的空間，而且他們會有一個 2:2（或1:1）的寬度比。你可以指定任何值，所有可能的比例都會考慮在内。
你也可以嘗試不同的比率得到你喜歡的樣式。對于本教程，我們将從為rightcontainer 添加一個紅色的背景這一步繼續深入。
oneapm mobile insight 以真實使用者體驗為度量标準進行 crash 分析，監控網絡請求及網絡錯誤，提升使用者留存。通路 oneapm 官方網站感受更多應用性能優化體驗，想閱讀更多技術文章，請通路 oneapm 官方技術部落格。
本文轉自 oneapm 官方部落格