在之前的章節(jié)撞羽，我們完成微信精選列表认罩。在本章我們將一起完成詳情的界面，并且為列表增加下拉刷新掰担，上拉加載等功能汇陆。
微信精選詳情
在編寫詳情界面之前，我們需要給應(yīng)用增加一個(gè)導(dǎo)航控制器恩敌，就可以通過push的方式由列表跳轉(zhuǎn)到詳情瞬测。
class ReactNativeLearn extends Component {
render() {
return (
<NavigatorIOS
style = {styles.container}
initialRoute = {{
component: NewsMain,
title: '列表',
barTintColor: '#28CD70',
titleTextColor: '#4C4C4C'
}}
/>
);
}
}
然后需要?jiǎng)?chuàng)建一個(gè)名為newsDetails的js文件横媚，這就是詳情的組件纠炮。用戶點(diǎn)擊列表的單個(gè)cell月趟，跳轉(zhuǎn)到詳情。詳情通過webview組件加載web界面恢口。newsDetails代碼如下：
class NewsDetails extends Component {
render() {
return (
<WebView
style = {styles.container}
source={{uri: this.props.newsData.url}}
/>
)
}
}
還需要為newsCell添加touch組件孝宗，使newsCell能夠接收用戶點(diǎn)擊。
<TouchableHighlight onPress={this.props.didCellSelected}></TouchableHighlight>
最后在newsMain的renderRow增加點(diǎn)擊newsCell的回調(diào)函數(shù)耕肩。
renderRow(rowData) {
return (
<NewsCell didCellSelected={() => {
this.props.navigator.push({
title: '詳情',
component: NewsDetails,
passProps: {newsData:rowData}
});
}} newsData={rowData}/>
);
}
到此我們已經(jīng)完成微信精選應(yīng)用的開發(fā)因妇，最終實(shí)現(xiàn)的效果如圖：
細(xì)節(jié)處理
下面給微信精選列表增加下拉刷新和上拉加載的功能。
下拉刷新
給ListView的refreshControl屬性設(shè)置RefreshControl組件猿诸，即可實(shí)現(xiàn)下拉刷新婚被。關(guān)于RefreshControl的詳細(xì)內(nèi)容看這里。
onRefresh() {
this.fetchNewsData();
}
render() {
return (
<View style={styles.container}>
<ListView
style = {styles.listContainer}
dataSource = {this.state.dataSource}
renderRow = {this.renderRow}
renderSeparator = {this.renderSeparator}
enableEmptySections={true}
refreshControl = {
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={this.onRefresh}
tintColor="#ff0000"
title="Loading..."
/>
}
/>
</View>
);
}
上拉加載
現(xiàn)在我們?cè)賮韺?shí)現(xiàn)上拉加載更多的功能梳虽。上拉加載更多功能需要給ListView設(shè)置onEndReachedThreshold屬性和onEndReached回調(diào)函數(shù)址芯。onEndReached當(dāng)ListView滑動(dòng)到距離底部不足某個(gè)像素值時(shí)被調(diào)用。onEndReachedThreshold接受Number類型的值窜觉，表示調(diào)用onEndReached需要的距離底部的像素值谷炸。
render() {
return (
<View style={styles.container}>
<ListView
style = {styles.listContainer}
dataSource = {this.state.dataSource}
renderRow = {this.renderRow}
renderSeparator = {this.renderSeparator}
enableEmptySections={true}
refreshControl = {
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={this.onRefresh}
tintColor="#ff0000"
title="Loading..."
/>
}
onEndReached = {this.onEndReached}
onEndReachedThreshold = {20}
/>
</View>
);
}
然后在onEndReached函數(shù)實(shí)現(xiàn)加載更多數(shù)據(jù)的網(wǎng)絡(luò)請(qǐng)求。
onEndReached() {
let pagenum = 20;
page ++;
let newsULR = 'http://apis.baidu.com/txapi/weixin/wxhot?num='+ pagenum +'&page='+ page;
fetch(newsULR,{
headers: {
"apikey": "f589f2834aeab120eef2e750e4fb1dfb"
}
}).then((response) => response.json())
.catch((error) => {
console.error('error request!');
})
.then((responseData) => {
newsDataList = newsDataList.concat(responseData.newslist);
this.setState({
dataSource: this.state.dataSource.cloneWithRows(newsDataList)
});
})
.done();
}
最后我們給列表增加一個(gè)加載動(dòng)畫禀挫，用戶進(jìn)入應(yīng)用先展示加載動(dòng)畫旬陡，等列表數(shù)據(jù)請(qǐng)求完畢再展示列表數(shù)據(jù)。需要用到ActivityIndicatorIOS組件语婴。
render() {
if (this.state.activityIndicator) {
return (
<View style={styles.container}>
<ActivityIndicatorIOS
animating = {this.state.animating}
style = {styles.activityIndicator}
size = 'large'
color = 'rgb(230, 145, 0)'
/>
</View>
);
}
return (
<View style={styles.container}>
<ListView
style = {styles.listContainer}
dataSource = {this.state.dataSource}
renderRow = {this.renderRow}
renderSeparator = {this.renderSeparator}
enableEmptySections={true}
refreshControl = {
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={this.onRefresh}
tintColor="#ff0000"
title="Loading..."
/>
}
onEndReached = {this.onEndReached}
onEndReachedThreshold = {20}
/>
</View>
);
}
最終的效果：
到此描孟，我們已經(jīng)完成微信精選列表的全部開發(fā)工作。相信大家對(duì)React Native Apps的開發(fā)已經(jīng)有一定的了解腻格。
項(xiàng)目完整源碼
項(xiàng)目的完整源碼下載地址画拾。
祝大家玩得愉快！
