需要加载yarn add react-native-refresh-list-view命令
//点击子条目跳转到详情页面
import React, { Component } from "react";
import { Image, Text, View, TouchableHighlight } from "react-native";
import RefreshListView, { RefreshState } from "react-native-refresh-list-view";
import { createStackNavigator } from "react-navigation";
import Mon from "./Mon";
class Itm extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<View
style={{
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
margin: 5
}}
>
<Image
source={{ uri: this.props.img }}
style={{ width: 100, height: 100, margin: 5 }}
/>
<Text>{this.props.tt}</Text>
</View>
);
}
}
class News extends Component {
constructor(props) {
super(props);
this.state = {
value: [],
refreshState: RefreshState.Idle
};
}
componentDidMount() {
this.onHead();
}
onHead = () => {
fetch("http://c.m.163.com/nc/article/list/T1348649079062/0-20.html")
.then(response => response.json())
.then(responseJson => {
this.setState({
value: responseJson.T1348649079062
});
});
};
onHeaderRefresh = () => {
this.setState({
refreshState: RefreshState.HeaderRefreshing
});
this.onHead();
};
onFooterRefresh = () => {
this.setState({
refreshState: RefreshState.FooterRefreshing
});
fetch("http://c.m.163.com/nc/article/list/T1348649079062/0-20.html")
.then(response => response.json())
.then(responseJson => {
this.setState({
value: [...this.state.value, ...responseJson.T1348649079062],
refreshState:
this.state.value.length > 30
? RefreshState.NoMoreData
: RefreshState.Idle
});
});
};
render() {
return (
<RefreshListView
keyExtractor={index => {
return index;
}}
data={this.state.value}
renderItem={({ item }) => (
<TouchableHighlight
onPress={() => {
this.props.navigation.navigate("Mon", {
url: item.url,
title: item.title
});
}}
>
<View>
<Itm img={item.imgsrc} tt={item.title} />
</View>
</TouchableHighlight>
)}
//下拉 上拉 状态刷新
refreshState={this.state.refreshState}
onHeaderRefresh={this.onHeaderRefresh}
onFooterRefresh={this.onFooterRefresh}
// 可选
footerRefreshingText="玩命加载中 "
footerFailureText="我擦嘞，居然失败了 "
footerNoMoreDataText="-我是有底线的-"
footerEmptyDataText="-好像什么东西都没有-"
/>
);
}
}
const MM = createStackNavigator({
News: {
screen: News
},
Mon: Mon
});
export default MM;
