上拉刷新下拉加载

import React, { Component } from "react";
import { View, Text, Image, FlatList, TouchableHighlight } from "react-native";

export default class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      page: 1,
      tab: this.props.tab,
      refreshed: false
    };
  }
  //   https://cnodejs.org/api/v1/topics?page=1&tab=job&limit=15
  componentDidMount() {
    this.getFirst();
  }
  getFirst = () => {
    let api =
      "https://cnodejs.org/api/v1/topics?page=" +
      this.state.page +
      "&tab=job&limit=20";
    fetch(api)
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          data: responseJson.data
        });
      })
      .catch(error => {
        alert(error);
      });
  };
  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(response => response.json())
      .then(responseJson => {
        this.setState({
          data: [...this.state.data, ...responseJson.data]
        });
      })
      .catch(error => {
        alert(error);
      });
  };
  render() {
    return (
      <FlatList
        data={this.state.data}
        renderItem={({ item }) => {
          return (
            <TouchableHighlight
              onPress={() => {
                this.props.navigation.navigate("Detils", { name: item });
              }}
            >
              <View style={{ borderBottomColor: "#ddd", borderBottomWidth: 1 }}>
                <Text style={{ fontSize: 20 }}>{item.title}</Text>
              </View>
            </TouchableHighlight>
          );
        }}
        refreshing={this.state.refreshed}
        onRefresh={this.getFirst}
        onEndReached={this.getNext}
        onEndReachedThreshold={0.0001}
      />
    );
  }
}