reactnative實(shí)戰(zhàn)系列教程之完成首頁

1、react native 實(shí)戰(zhàn)系列教程之完成首頁首頁功能前面，我們已經(jīng)完成了影視信息組件的開發(fā)，接下來，我們要用該組件來完成首頁界面功能的開發(fā)，如下圖可以看到，首頁頂部一個標(biāo)題欄，下面是最新、最熱兩個選項(xiàng)卡。我們要完成的有標(biāo)題欄、選項(xiàng)卡、以及選項(xiàng)卡切換的內(nèi)容。標(biāo)題欄這里的標(biāo)題欄，我們使用的是ToolbarAndroid，看名稱我們就知道這個是Android下特有的組件view，所以就立馬想到，這個組件是iOS、android不能通用的。因此，我們定義一個TitleBarComponent，方便以后重復(fù)使用和ios適配。這里，先提一下關(guān)于組件適配的一些問題。組件平臺適配不同平臺使用不同的組件，R

2、eact Native 提供了以下四種解決方案最直接的方案就是把組件放置到不同的文件夾下：/common/components/ /android/components/ /ios/components/根據(jù)平臺不同在組件的文件命名上加以區(qū)分，如下：BigButtonIOS.jsBigButtonAndroid.js使用擴(kuò)展名BigButton.ios.jsBigButton.android.js以上三種方案，再引用的時(shí)候去掉平臺標(biāo)識，如下import BigButton from ./components/BigButton;Platform.select()import React, Co

3、mponent,Platform from react;var Component = Platform.select( ios: () = require(ComponentIOS), android: () = require(ComponentAndroid),);Platform.OS在iOS上會返回ios，而在Android設(shè)備或模擬器上則會返回android。創(chuàng)建標(biāo)題欄根據(jù)上面的方案，我們這里使用的是使用擴(kuò)展名的方案來適配平臺的。在js/component下創(chuàng)建TitleBarComponent.android.js文件。標(biāo)題欄總共有標(biāo)題、副標(biāo)題和左邊的返回按鈕icon，返回按鈕只

4、有在子頁面（二級頁面）才有，因此我們定義如下屬性/初始化propsstatic defaultProps = title:,/標(biāo)題 subtitle:,/副標(biāo)題 subScene:true,/是否是子頁面;然后，在render返回一個ToolbarAndroidrender() return( ); /返回按鈕事件 _onIconClick() 這里幾個屬性說明下title 就是標(biāo)題titleColor 設(shè)置標(biāo)題顏色subtitle 就是副標(biāo)題subtitleColor 設(shè)置副標(biāo)題顏色actions 了解android的都知道Toolbar右邊還可以設(shè)置一些動作按鈕（我們這里沒有就不設(shè)置該屬性

5、）它的格式如下,可以設(shè)置多個const actions = title:全部,show:always,icon:require(././img/icon_all.png),showWithText:true,onActionSelected 動作按鈕被觸發(fā)時(shí)的回調(diào)（我們這里沒有就不設(shè)置該屬性）onIconClicked 標(biāo)題欄左邊的圖標(biāo)被點(diǎn)擊后的回調(diào)（我們這里是返回按鈕，返回圖標(biāo)可以到github上得到）style 設(shè)置整個標(biāo)題欄的樣式，高度、背景等。TitleBarComponent的完整代碼如下import React,Component from react;import Toolbar

6、Android, DeviceEventEmitter, StyleSheet, Text, TouchableOpacity,from react-native;export default class TitleBarComponent extends Component constructor(props) super(props); /初始化props static defaultProps = title:,/標(biāo)題 subtitle:,/副標(biāo)題 subScene:true,/是否是子頁面 ; render() return( ); /返回按鈕事件 _onIconClick() con

7、st styles = StyleSheet.create( toolbar: height:56, backgroundColor:#ff5722, ,);這樣我們就完成了標(biāo)題欄的設(shè)計(jì)。創(chuàng)建首頁Scene添加標(biāo)題接下來我們需要創(chuàng)建一個首頁Scene,來展示首頁功能。在js文件夾新建HomeScene.js文件，并為首頁添加一個標(biāo)題欄。import React,Component from react;import View, Text, StyleSheet, TouchableOpacity from react-native;import TitleBar from ./componen

8、t/TitleBarComponentexport default class HomeScene extends Component constructor(props) super(props); render() return( ); ;然后將index.android.js使用HomeSceneimport HomeScene from ./js/HomeScene;class XiFan extends Component render() return( ); AppRegistry.registerComponent(XiFan, () = XiFan);添加選項(xiàng)卡這樣首頁的標(biāo)題

9、有了，我們接下來要添加最新、最熱兩個選項(xiàng)卡在HomeScene內(nèi)添加如下代碼state增加一個tabIndex屬性，標(biāo)識當(dāng)前選中的tab項(xiàng)constructor(props) super(props); this.state = tabIndex:0, ;接著就是繪制Tab了/tab切換_onTabPress(index) this.setState( tabIndex:index, );render() return( 最新 最熱 );該段代碼的核心主要是根據(jù)tabIndex是否被選中項(xiàng)，動態(tài)修改View的樣式var styles = StyleSheet.create( TabSelect

10、: flex:1, textAlign:center, color:white, , TabUnderlineSelect: backgroundColor:white, height:2, , TabUnSelect: flex:1, textAlign:center, color:#d5d5d5, , TabUnderlineUnSelect: height:0, ,);添加選項(xiàng)卡內(nèi)容應(yīng)用的功能就是像在堆積木一樣，一點(diǎn)一點(diǎn)疊起來?，F(xiàn)在給選項(xiàng)卡下方添加對應(yīng)的內(nèi)容。選項(xiàng)卡切換時(shí)，底下切換到對應(yīng)的內(nèi)容，我們這里使用的是ViewPagerAndroid。/ViewPager 頁面發(fā)生切換時(shí)調(diào)用，修

11、改tabIndex_onPageSelected(event) const position = event.nativeEvent.position; this.setState( tabIndex:position, );_onPageScrollStateChanged(status) /idle 空閑，意味著當(dāng)前沒有交互。 /dragging 拖動中，意味著當(dāng)前頁面正在被拖動。 /settling 處理中，意味著當(dāng)前頁面發(fā)生過交互，且正在結(jié)束開頭或收尾的動畫。render() return( ./省略其它代碼 this.viewPager = viewPager );主要說幾個屬性in

12、itialPage 初始顯示哪個頁面onPageSelected頁面選中時(shí)的回調(diào)函數(shù)onPageScrollStateChanged 滾動狀態(tài)發(fā)生變化時(shí)調(diào)用（目前沒用到）ref 定義該組件的實(shí)例對象，這里我們將ViewPagerAndroid實(shí)例對象聲明為viewPager，然后我們就可以在這個頁面內(nèi)使用該對象，比如，前面的_onTabPress方法，在tab切換時(shí)需要下面的內(nèi)容也切換到對應(yīng)的內(nèi)容，所以我們對_onTabPress方法添加如下代碼：/tab切換_onTabPress(index) this.viewPager.setPage(index); this.setState( tab

13、Index:index, );調(diào)用了viewPager對象setPage方法，進(jìn)行頁面切換。還有另一種定義ref方式，如下： ./省略其它代碼然后使用對象時(shí)/tab切換_onTabPress(index) this.refs.viewPage.setPage(index); this.setState( tabIndex:index, );再看下上面的代碼，我們在ViewPagerAndroid內(nèi)部塞了兩個View，這兩個View實(shí)際上就是要顯示的內(nèi)容了，它們就是我們之前自定義的DramaComponent，傳入了不同的url，一個是最新的地址，一個是最熱的人氣，這樣解析顯示出來就是對應(yīng)的數(shù)據(jù)

14、了。關(guān)于ViewPagerAndroid更多信息，可以查看ViewPagerAndroid最后上一下本節(jié)的完成的成果效果圖：HomeScene.js的所有代碼import React,Component from react;import View, Text, StyleSheet, TouchableOpacity, ViewPagerAndroid from react-native;import TitleBar from ./component/TitleBarComponentimport DramaComponent from ./component/DramaComponent

15、;export default class HomeScene extends Component constructor(props) super(props); this.state = tabIndex:0, ; /tab切換 _onTabPress(index) this.viewPager.setPage(index); this.setState( tabIndex:index, ); /ViewPager 頁面發(fā)生切換時(shí)調(diào)用 _onPageSelected(event) const position = event.nativeEvent.position; this.setSt

16、ate( tabIndex:position, ); _onPageScrollStateChanged(status) /idle 空閑，意味著當(dāng)前沒有交互。 /dragging 拖動中，意味著當(dāng)前頁面正在被拖動。 /settling 處理中，意味著當(dāng)前頁面發(fā)生過交互，且正在結(jié)束開頭或收尾的動畫。 render() return( 最新 最熱 this.viewPager = viewPager ); ;var styles = StyleSheet.create( TabSelect: flex:1, textAlign:center, color:white, , TabUnderlineSelect: backgroundColor