Rn 网络解析上拉刷新，下拉加载

最新推荐文章于 2024-07-16 17:18:13 发布

Whoareyout

最新推荐文章于 2024-07-16 17:18:13 发布

阅读量453

点赞数

本文链接：https://blog.csdn.net/Whoareyout/article/details/82729521

版权

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

import { withNavigation } from "react-navigation";
import RefreshListView, { RefreshState } from "react-native-refresh-list-view";

class To extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tab: props.tab,
      limit: 15,
      page: 1,
      data: [],
      refreshState: RefreshState.Idle
    };
  }

  requstData() {
    return fetch(
      "https://cnodejs.org/api/v1/topics?tab=" +
        this.state.tab +
        "&page=" +
        this.page +
        "&limit=" +
        this.state.limit +
        " "
    )
      .then(response => response.json())
      .then(responseJson => {
        return responseJson.data;
      });
  }

componentDidMount() {
    this.requFirData();
  }

 requFirData = () => {
    try {
      this.setState(
        {
          refreshState: RefreshState.HeaderRefreshing,
          page: 1
        },
        async () => {
          let data = await this.requstData();
          this.setState({
            data: data,
            refreshState: RefreshState.Idle
          });
        }
      );
    } catch (error) {}
  };

footer = () => {
    try {
      this.setState(
        {
          refreshState: RefreshState.FooterRefreshing,
          page: this.state.page + 1
        },
        async () => {
          let data = await this.requstData();
          this.setState({
            data: [...this.state.data, ...data],
            refreshState:
              this.state.data.length > 30
                ? RefreshState.NoMoreData
                : RefreshState.Idle
          });
        }
      );
    } catch (error) {
      this.setState({
        refreshState: RefreshState.Failure
      });
    }
  };

 render() {
    return (
      <RefreshListView
        data={this.state.data}
        refreshState={this.state.refreshState}
        onHeaderRefresh={this.requFirData}
        onFooterRefresh={this.footer}
        renderItem={({ item, index }) => (
          <TouchableOpacity
            onPress={() =>
              this.props.navigation.navigate("Wan", {
                a: item.content,
                b: item.title,
                c: item.last_reply_at
              })
            }
          >
            <View style={style.hander}>
              <Image
                style={style.img}
                source={{ uri: item.author.avatar_url }}
              />

              <View>
                <Text>{item.title}</Text>
                <Text>{item.last_reply_at}</Text>
              </View>
            </View>
          </TouchableOpacity>
        )}
      />
    );
  }
}

const style = StyleSheet.create({
  hander: {
    flexDirection: "row"
  },
  img: {
    width: 100,
    height: 100
  }
});

export default withNavigation(To);

完整代码
import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  FlatList,
  TouchableOpacity,
  Image
} from "react-native";

import { withNavigation } from "react-navigation";
import RefreshListView, { RefreshState } from "react-native-refresh-list-view";

class To extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tab: props.tab,
      limit: 15,
      page: 1,
      data: [],
      refreshState: RefreshState.Idle
    };
  }
  requstData() {
    return fetch(
      "https://cnodejs.org/api/v1/topics?tab=" +
        this.state.tab +
        "&page=" +
        this.page +
        "&limit=" +
        this.state.limit +
        " "
    )
      .then(response => response.json())
      .then(responseJson => {
        return responseJson.data;
      });
  }
  componentDidMount() {
    this.requFirData();
  }
  requFirData = () => {
    try {
      this.setState(
        {
          refreshState: RefreshState.HeaderRefreshing,
          page: 1
        },
        async () => {
          let data = await this.requstData();
          this.setState({
            data: data,
            refreshState: RefreshState.Idle
          });
        }
      );
    } catch (error) {}
  };
  footer = () => {
    try {
      this.setState(
        {
          refreshState: RefreshState.FooterRefreshing,
          page: this.state.page + 1
        },
        async () => {
          let data = await this.requstData();
          this.setState({
            data: [...this.state.data, ...data],
            refreshState:
              this.state.data.length > 30
                ? RefreshState.NoMoreData
                : RefreshState.Idle
          });
        }
      );
    } catch (error) {
      this.setState({
        refreshState: RefreshState.Failure
      });
    }
  };
  render() {
    return (
      <RefreshListView
        data={this.state.data}
        refreshState={this.state.refreshState}
        onHeaderRefresh={this.requFirData}
        onFooterRefresh={this.footer}
        renderItem={({ item, index }) => (
          <TouchableOpacity
            onPress={() =>
              this.props.navigation.navigate("Wan", {
                a: item.content,
                b: item.title,
                c: item.last_reply_at
              })
            }
          >
            <View style={style.hander}>
              <Image
                style={style.img}
                source={{ uri: item.author.avatar_url }}
              />

              <View>
                <Text>{item.title}</Text>
                <Text>{item.last_reply_at}</Text>
              </View>
            </View>
          </TouchableOpacity>
        )}
      />
    );
  }
}
const style = StyleSheet.create({
  hander: {
    flexDirection: "row"
  },
  img: {
    width: 100,
    height: 100
  }
});

export default withNavigation(To);