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

1 AppRegistry.registerComponent(

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

添加一個標(biāo)簽欄

該應(yīng)用程序會有一個有兩項(xiàng)的標(biāo)簽欄--- Featured 和 Search。我們將首先添加它。
雖然你擁有 index.ios.js 文件中所有的代碼，這是不推薦的，因?yàn)樗鼤S著應(yīng)用程序的代碼的增加而混亂。為了更好的管理，我們要在不同的文件中創(chuàng)建類別。
創(chuàng)建兩個 JavaScript 文件在你項(xiàng)目的根目錄（和 index.ios.js 文件在相同的位置）。為 Search.js 文件和 Featured.js 命名。打開 Featured.js 并添加以下代碼。

'use strict';var React = require('react-native');var {StyleSheet,View,Text,Component} = React;var styles = StyleSheet.create({description: {fontSize: 20,backgroundColor: 'white'},container: {flex: 1,justifyContent: 'center',alignItems: 'center'} });class Featured extends Component {render() {return (<View style={styles.container}><Text style={styles.description}>Featured Tab</Text></View>);} }module.exports = Featured;

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

'use strict';var React = require('react-native');var {StyleSheet,View,Text,Component} = React;var styles = StyleSheet.create({description: {fontSize: 20,backgroundColor: 'white'},container: {flex: 1,justifyContent: 'center',alignItems: 'center'} });class Search extends Component {render() {return (<View style={styles.container}><Text style={styles.description}>Search Tab</Text></View>);} }module.exports = Search;

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

'use strict';var React = require('react-native'); var Featured = require('./Featured'); var Search = require('./Search');var {AppRegistry,TabBarIOS,Component} = React;class BookSearch extends Component {constructor(props) {super(props);this.state = {selectedTab: 'featured'};}render() {return (<TabBarIOS selectedTab={this.state.selectedTab}><TabBarIOS.Itemselected={this.state.selectedTab === 'featured'}icon={{uri:'featured'}}onPress={() => {this.setState({selectedTab: 'featured'});}}><Featured/></TabBarIOS.Item><TabBarIOS.Itemselected={this.state.selectedTab === 'search'}icon={{uri:'search'}}onPress={() => {this.setState({selectedTab: 'search'});}}><Search/></TabBarIOS.Item></TabBarIOS>);} }AppRegistry.registerComponent('BookSearch', () => BookSearch);

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

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

我們創(chuàng)建兩個標(biāo)簽欄項(xiàng)目。我們?yōu)槊總€項(xiàng)目設(shè)立選中狀態(tài)并定義一個函數(shù)，當(dāng)這個項(xiàng)目被選中時就會被命名。在 Featured 選項(xiàng)卡中，選擇設(shè)置為 true，如果 selectTab 狀態(tài)我們前邊定義的值為 feature，組件 selectedTab 是否等同于「搜索」。無論哪個選項(xiàng)卡被設(shè)置為 true 都將是活動選項(xiàng)卡。我們?yōu)闃?biāo)簽欄項(xiàng)目使用系統(tǒng)圖標(biāo)。
注意我們使用我們的自定義組件標(biāo)簽，就像任何其他組件，例如：因?yàn)槲覀冃枰鄳?yīng)的模塊，并將其分配到一個變量，你可以使用變量引入組件文件。這導(dǎo)致在 render() 函數(shù)的代碼組件的類包含就像是文件的一部分。順便說一下，我為各自變量的類名使用相同名稱的變量，但不一定要這樣，你可以盡可能的使用你喜歡的任何名稱。
當(dāng)標(biāo)簽欄被選中后，onPress 組件的屬性就會被回調(diào)函數(shù)定義。selectedTab 屬性的函數(shù)集值最終確定活動選項(xiàng)卡。
打開模擬器并按 Command-R 重新加載應(yīng)用程序，你就會看到如下顯示。

添加 Navigation Bar

接下來，我們將向應(yīng)用程序添加一個導(dǎo)航欄，給這個項(xiàng)目添加兩個以上的文件。他們將是根視圖導(dǎo)航堆棧的標(biāo)簽。為 BookList.js 和SearchBooks.js 文件命名。
在 BookList.js 應(yīng)用程序中添加以下代碼。

'use strict';var React = require('react-native');var {StyleSheet,View,Component} = React;var styles = StyleSheet.create({});class BookList extends Component {render() {return (<View></View> );} }module.exports = BookList;

在 SearchBooks.js 應(yīng)用程序中添加以下代碼。

'use strict';var React = require('react-native');var {StyleSheet,View,Component} = React;var styles = StyleSheet.create({});class SearchBooks extends Component {render() {return (<View></View> );} }module.exports = SearchBooks;

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

修改 Featured.js 如圖：

'use strict';var React = require('react-native'); var BookList = require('./BookList');var {StyleSheet,NavigatorIOS,Component} = React;var styles = StyleSheet.create({container: {flex: 1} });class Featured extends Component {render() {return (<NavigatorIOSstyle={styles.container}initialRoute={{title: 'Featured Books',component: BookList}}/> );} }module.exports = Featured;

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

'use strict';var React = require('react-native'); var SearchBooks = require('./SearchBooks');var {StyleSheet,NavigatorIOS,Component} = React;var styles = StyleSheet.create({container: {flex: 1} });class Search extends Component {render() {return (<NavigatorIOSstyle={styles.container}initialRoute={{title: 'Search Books',component: SearchBooks}}/> );} }module.exports = Search;

就像在 Featured.js，上面創(chuàng)建了一個導(dǎo)航控制器，設(shè)置其最初的路線并為它設(shè)置標(biāo)題。

重新加載應(yīng)用程序，你會看到如下所示：

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

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

var FAKE_BOOK_DATA = [{volumeInfo: {title: 'The Catcher in the Rye', authors: "J. D. Salinger", imageLinks: {thumbnail: 'http://books.google.com/books/content?id=PCDengEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api'}}} ];

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

var {Image,StyleSheet,Text,View,Component,} = React;

添加以下模版：

var styles = StyleSheet.create({container: {flex: 1,flexDirection: 'row',justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',padding: 10},thumbnail: {width: 53,height: 81,marginRight: 10},rightContainer: {flex: 1},title: {fontSize: 20,marginBottom: 8},author: {color: '#656565'} });

然后修改如圖所示的 class：

class BookList extends Component {render() {var book = FAKE_BOOK_DATA[0];return (<View style={styles.container}><Image source={{uri: book.volumeInfo.imageLinks.thumbnail}}style={styles.thumbnail} /><View style={styles.rightContainer}><Text style={styles.title}>{book.volumeInfo.title}</Text><Text style={styles.author}>{book.volumeInfo.authors}</Text></View></View>);} }

重新加載應(yīng)用程序就會有如下顯示：

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

backgroundColor: 'red'

重新加載應(yīng)用程序，你就會看到 rightContainer 樣式的組件占用的空間。它占據(jù)整個空間而不被其他兄弟姐妹所占有。它并不拉伸屏幕，因?yàn)橥馊萜饔幸恍┨畛洳⑶覉D像有邊緣設(shè)置權(quán)利。

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

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

你也可以嘗試不同的比率得到你喜歡的樣式。對于本教程，我們將從為rightContainer 添加一個紅色的背景這一步繼續(xù)深入。

未完待續(xù)

OneAPM Mobile Insight以真實(shí)用戶體驗(yàn)為度量標(biāo)準(zhǔn)進(jìn)行 Crash 分析，監(jiān)控網(wǎng)絡(luò)請求及網(wǎng)絡(luò)錯誤，提升用戶留存。訪問 OneAPM 官方網(wǎng)站感受更多應(yīng)用性能優(yōu)化體驗(yàn)，想技術(shù)文章，請訪問 OneAPM 官方技術(shù)博客。

本文轉(zhuǎn)自 OneAPM 官方博客

轉(zhuǎn)載于:https://www.cnblogs.com/oneapm/p/5125083.html

總結(jié)

以上是生活随笔為你收集整理的如何用 React Native 创建一个iOS APP？（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。