需要加载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 (
style={{ flexDirection: "row", justifyContent: "center", alignItems: "center", margin: 5 }} > source={{ uri: this.props.img }} style={{ width: 100, height: 100, margin: 5 }} />
);
}
}
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 (
keyExtractor={index => { return index; }} data={this.state.value} renderItem={({ item }) => ( onPress={() => { this.props.navigation.navigate("Mon", { url: item.url, title: item.title }); }} > )} //下拉 上拉 状态刷新 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;