在之前的章节，我们完成微信精选列表。在本章我们将一起完成详情的界面，并且为列表增加下拉刷新，上拉加载等功能。
微信精选详情
在编写详情界面之前，我们需要给应用增加一个导航控制器，就可以通过push的方式由列表跳转到详情。
class ReactNativeLearn extends Component {
render() {
return (
<NavigatorIOS
style = {styles.container}
initialRoute = {{
component: NewsMain,
title: '列表',
barTintColor: '#28CD70',
titleTextColor: '#4C4C4C'
}}
/>
);
}
}
然后需要创建一个名为newsDetails的js文件，这就是详情的组件。用户点击列表的单个cell，跳转到详情。详情通过webview组件加载web界面。newsDetails代码如下：
class NewsDetails extends Component {
render() {
return (
<WebView
style = {styles.container}
source={{uri: this.props.newsData.url}}
/>
)
}
}
还需要为newsCell添加touch组件，使newsCell能够接收用户点击。
<TouchableHighlight onPress={this.props.didCellSelected}></TouchableHighlight>
最后在newsMain的renderRow增加点击newsCell的回调函数。
renderRow(rowData) {
return (
<NewsCell didCellSelected={() => {
this.props.navigator.push({
title: '详情',
component: NewsDetails,
passProps: {newsData:rowData}
});
}} newsData={rowData}/>
);
}
到此我们已经完成微信精选应用的开发，最终实现的效果如图：
细节处理
下面给微信精选列表增加下拉刷新和上拉加载的功能。
下拉刷新
给ListView的refreshControl属性设置RefreshControl组件，即可实现下拉刷新。关于RefreshControl的详细内容看这里。
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>
);
}
上拉加载
现在我们再来实现上拉加载更多的功能。上拉加载更多功能需要给ListView设置onEndReachedThreshold属性和onEndReached回调函数。onEndReached当ListView滑动到距离底部不足某个像素值时被调用。onEndReachedThreshold接受Number类型的值，表示调用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函数实现加载更多数据的网络请求。
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();
}
最后我们给列表增加一个加载动画，用户进入应用先展示加载动画，等列表数据请求完毕再展示列表数据。需要用到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>
);
}
最终的效果：
到此，我们已经完成微信精选列表的全部开发工作。相信大家对React Native Apps的开发已经有一定的了解。
项目完整源码
项目的完整源码下载地址。
祝大家玩得愉快！
