实现上拉加载下拉刷新



  • import React, { Component } from "react";
    import { View, Image, Text, StyleSheet } from "react-native";
    import RefreshListView, { RefreshState } from "react-native-refresh-list-view";
    
    export default class Top11 extends Component {
      constructor(props) {
        super(props);
    
        this.state = {
          page: 1,
          dataValue: [], //数据源
          refreshState: RefreshState.Idle //静止状态
        };
      }
    
      /**
       * 生命周期加载
       */
      componentDidMount() {
        this.onHeaderRefresh();
      }
    
      /**
       * 下拉刷新
       */
      onHeaderRefresh = () => {
        //1.设置当前状态为下拉刷新
        this.setState({
          refreshState: RefreshState.HeaderRefreshing,
          page: 1
        });
        //2.加载数据
        fetch(
          `https://cnodejs.org/api/v1/topics?page=${
            this.state.page
          }&tab=good&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
            });
          });
      };
    
      /**
       * 加载更多
       */
      onFooterRefresh = () => {
        //1.设置当前状态为上拉加载更多
        this.setState({
          refreshState: RefreshState.FooterRefreshing
        });
    
        //2.加载数据
        fetch(
          `https://cnodejs.org/api/v1/topics?page=${
            this.state.page
          }&tab=good&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
            });
          });
      };
      //元素渲染
      render() {
        return (
          <View>
            <RefreshListView
              //数据源
              data={this.state.dataValue}
              //Item页面显示
              renderItem={({ item }) => (
                <View style={styles.contain}>
                  <Image
                    style={styles.img}
                    source={{ uri: item.author.avatar_url }}
                  />
                  <Text
                    style={styles.text}
                    onPress={() =>
                      this.props.navigation.navigate("Top12", { abc: item.content })
                    }
                  >
                    {item.title}
                  </Text>
                </View>
              )}
              refreshState={this.state.refreshState}
              onHeaderRefresh={this.onHeaderRefresh}
              onFooterRefresh={this.onFooterRefresh}
            />
          </View>
        );
      }
    }
    const styles = StyleSheet.create({
      contain: {
        flexDirection: "column",
        justifyContent: "space-around",
        marginTop: 50
      },
      img: {
        width: 85,
        height: 85,
        borderRadius: 60
      },
      text: {
        fontSize: 20,
        color: "black"
      }
    });