React-Native 上拉重新整理下拉載入，點選跳轉詳情程式碼解析

配置路由器

import { createTabNavigator, createStackNavigator } from "react-navigation";
import New1 from "./New1";
import New2 from "./New2";
import Web from "../Web";
const Route2 = createTabNavigator({
  New1: {
    screen: New1,
    navigationOptions: {
      title: "頭條"
 

    }
  },
  New2: {
    screen: New2,
    navigationOptions: {
      title: "娛樂"
    }
  }
});
const Route1 = createStackNavigator({
  Route2: {
    screen: Route2,
    navigationOptions: {
      header: null
    }
  },
  Web: Web
});
export default Route1;

匯入這行依賴

// An highlighted block
import RefreshListView,
 
 { RefreshState } from "react-native-refresh-list-view";

設定狀態機

  constructor(props) {
    super(props);
    this.state = {
      page: 1,
      dataValue: [],
      refreshstate: RefreshState.Idle
    };
  }

進入頁面則載入資料

componentDidMount() {
    this.HeaderRefresh();
  }

  constructor(props) {
    super
 
(props);
    this.state = {
      page: 1,
      dataValue: [],
      refreshstate: RefreshState.Idle
    };
  }

上拉重新整理

   HeaderRefresh = () => {
    this.setState({
      page: 1,
      refreshstate: RefreshState.HeaderRefreshing
    });
    fetch(`https://cnodejs.org/api/v1/topics?page=1&tab=share&limit=10`)
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          dataValue: responseJson.data,
          refreshstate: RefreshState.Idle,
          page: this.state.page + 1
        });
      })
      .catch(error => {
        this.setState({
          refreshstate: RefreshState.Failure
        });
      });
  };

下拉載入

   FooterRefresh = () => {
    this.setState({
      refreshstate: RefreshState.FooterRefreshing
    });
    fetch(
      `https://cnodejs.org/api/v1/topics?page=${
        this.state.page
      }&tab=share&limit=10`
    )
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          dataValue: [...this.state.dataValue, ...responseJson.data],
          refreshstate: RefreshState.Idle,
          page: this.state.page + 1
        });
      })
      .catch(error => {
        this.setState({
          refreshstate: RefreshState.Failure
        });
      });
  };

下面View呼叫

 <RefreshListView
          style={{ flex: 1 }}
          data={this.state.dataValue}
          renderItem={({ item }) => (
            <TouchableHighlight
              onPress={() => {
                this.props.navigation.navigate("Web", {
                  content: item.content
                });
              }}
            >
              <View style={{ width: "100%" }}>
                <View style={{ flexDirection: "row", marginBottom: 10 }}>
                  <Image
                    style={{ width: 60, height: 60, borderRadius: 65 }}
                    source={{ uri: item.author.avatar_url }}
                  />
                  <View style={{ marginLeft: 10 }}>
                    <Text>{item.title}</Text>
                    <Text style={{ marginTop: 20 }}>
                      {item.author.loginname}
                    </Text>
                  </View>
                </View>
                <View
                  style={{
                    width: "100%",
                    height: 2,
                    backgroundColor: "#f6f6f6",
                    marginBottom: 10
                  }}
                />
              </View>
            </TouchableHighlight>
          )}
          refreshState={this.state.refreshstate}
          onFooterRefresh={this.FooterRefresh}
          onHeaderRefresh={this.HeaderRefresh}
        />