export default class Demo1 extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
refreshed: false,
page: 1
};
}
componentDidMount() {
this.getFirst();
}
、、、、、第一次刷新首页
getFirst = () => {
let api =
“https://cnodejs.org/api/v1/topics?page=” +
this.state.page +
“&tab=job&limit=20”;
fetch(api)
.then(res => res.json())
.then(resJson =>
this.setState({
data: resJson.data
})
)
.catch(err => {
alert(err);
});
};
、、、、下拉加载
getNext = () => {
this.setState({
page: this.state.page + 1
});
let api =
“https://cnodejs.org/api/v1/topics?page=” +
this.state.page +
“&tab=job&limit=20”;
fetch(api)
.then(res => res.json())
.then(resJson =>
this.setState({
data: […this.state.data, …resJson.data]
})
)
.catch(err => {
alert(err);
});
};
render() {
return (
<FlatList
data={this.state.data}
renderItem={({ item }) => (
//点击跳转
<TouchableHighlight
onPress={() => {
this.props.navigation.navigate(“Detils”, { name: item });
}}
>
<View style={{ borderBottomColor: “#ddd”, borderBottomWidth: 1 }}>
<Text style={{ fontSize: 20 }}>{item.title}
)}
//上拉
refreshing={this.state.refreshed}
onRefresh={this.getFirst}
onEndReached={this.getNext}
onEndReachedThreshold={0.0001}
/>
);
}
}
、、、、、t跳转详情加载详情
import React, { Component } from “react”;
import { View, Text, ScrollView } from “react-native”;
import HTML from “react-native-render-html”;
export default class Detils extends Component {
、、、、标题
static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam(“name”).title
};
};
constructor(props) {
super(props);
this.state = {
data: this.props.navigation.getParam(“name”).content
};
}
render() {
return (
);
}
}