list获取网络数据加Item布局管理

最新推荐文章于 2022-03-11 13:52:08 发布

qq_42981847

最新推荐文章于 2022-03-11 13:52:08 发布

阅读量231

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42981847/article/details/82727555

本文详细介绍了使用React Native实现带有头部和尾部刷新功能的列表视图，包括状态管理、数据请求、组件渲染及导航跳转等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React, { Component } from "react";
import { withNavigation } from "react-navigation";
import { TouchableOpacity, Text } from "react-native";
import RefreshListView, { RefreshState } from "react-native-refresh-list-view";
import { getData } from "../comm/feach";
import Item from "../pages/Item";

class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      refreshState: RefreshState.Idle, //默认刷新隐藏
      tab: this.props.tab, //显示页面
      page: 1,
      limit: 10
    };
  }
  requestData = async () => {
    let obj = {
      page: this.state.page,
      tab: this.state.tab,
      limit: this.state.limit
    };
    let data = await getData("/topics", obj);
    // console.error(JSON.stringify(data));
    return data.data;
  };
  requestFirstData = () => {
    // console.error(111);
    try {
      this.setState(
        {
          refreshState: RefreshState.HeaderRefreshing,
          page: 1
        },
        async () => {
          let data = await this.requestData();
          //console.error(JSON.stringify(data));
          this.setState({
            data: data,
            refreshState: RefreshState.Idle
          });
        }
      );
    } catch (err) {
      this.setState({
        refreshState: RefreshState.Failure
      });
      //console.error(12121);
    }
  };
  requestNextData = () => {
    try {
      this.setState(
        {
          refreshState: RefreshState.FooterRefreshing,
          page: this.state.page + 1
        },
        async () => {
          let data = await this.requestData();
          //console.error(JSON.stringify(data));
          this.setState({
            refreshState:
              this.state.data.length > 30
                ? RefreshState.NoMoreData
                : RefreshState.Idle,
            data: [...this.state.data, ...data]
          });
        }
      );
    } catch (err) {
      this.setState({
        refreshState: RefreshState.Failure //请求失败组件
      });
    }
  };

  componentDidMount() {
    this.requestFirstData();
  }
  headerRefresh = () => {
    this.requestFirstData();
  };
  footerRefresh = () => {
    this.requestNextData();
  };

  renderItem = rowData => {
    //渲染一项列表
    return (
      <TouchableOpacity
        onPress={() =>
          this.props.navigation.navigate("Detail", {
            //跳转到详情页 传递id和标题过去
            id: rowData.item.id,
            title: rowData.item.title
          })
        }
      >
        {/* {console.error(rowData.item.title)} */}
        <Item item={rowData.item} />
      </TouchableOpacity>
    );
  };

  render() {
    return (
      <RefreshListView
        data={this.state.data}
        KsyExtractor={item => item.id}
        renderItem={this.renderItem}
        refreshState={this.state.refreshState}
        onHeaderRefresh={this.headerRefresh}
        onFooterRefresh={this.footerRefresh}
      />
    );
  }
}
export default withNavigation(List);

import React, { Component } from "react";
import { Text, View, Image, StyleSheet } from "react-native";
import timeago from "timeago.js";

export default class Item extends Component {
  render() {
    const timeagoInstance = timeago();

    return (
      <View style={style.box}>
        <Text>{this.props.item.title}</Text>
        <View style={style.container}>
          <View style={style.left}>
            <Image
              style={style.img}
              source={{ uri: this.props.item.author.avatar_url }}
            />
            <View>
              <Text>{this.props.item.author.loginname}</Text>
              <Text>
                {timeagoInstance.format(this.props.item.create_at, "zh_CN")}
              </Text>
            </View>
          </View>
        </View>
      </View>
    );
  }
}
const style = StyleSheet.create({
  box: {
    padding: 10,
    borderBottomWidth: 1,
    borderColor: "#ddd"
  },
  container: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginTop: 5
  },
  left: {
    flexDirection: "row",
    alignItems: "center"
  },
  img: {
    width: 60,
    height: 60,
    borderRadius: 30,
    marginRight: 10
  }
});