react native ts 接口返回列表渲染

最新推荐文章于 2024-06-24 22:04:08 发布

百事可乐☆

最新推荐文章于 2024-06-24 22:04:08 发布

阅读量496

点赞数 9

文章标签： react native react.js typescript

本文链接：https://blog.csdn.net/m0_61672533/article/details/136896506

版权

本文介绍了如何在ReactNative应用中使用TypeScript和FlatList组件实现数据列表的加载、渲染、下拉刷新和触底加载功能，同时展示了如何处理API请求和状态管理。

摘要由CSDN通过智能技术生成

目前知道有两种方法可以实现，一种就是map，不过这个在rn中性能没有另一种好

引入一些需要的组件

import React, {useEffect, useState} from 'react';

import { StyleSheet, Text, View, FlatList, TouchableOpacity, SafeAreaView,} from

'react-native';

我门用的ts，所以会有一些类型规范

// 声明一个空数组
const [dataList, setDataList] = useState<Array<TypeDataList>>([]);
const [isListFresh, setIsListFresh] = useState<boolean>(false);
const [pageNo, setPageNo] = useState<number>(1);

// 在 useEffect  中发送请求
  useEffect(() => {
    getList();
  }, []);

const getList = () => {
     var params:TypeParams = {
      offset: pageNo,
      limit: 10,
    };
    // 这个地方就根据你们自己的请求方式来写
    getIndexList(params).then(res => {
      setDataList([...dataList, ...res.list]);
    });
}

接下来就是渲染页面

// 使用 FlatList 组件进行 渲染数组
<FlatList
        // 要循环的数组
        data={dataList}
        // 这个地方就相当与 key
        keyExtractor={(_: any, index: number) => String(index)}
        // renderItem里面就是写渲染的内容，这里我写了个方法把内容放到外面去写了
        renderItem={renderItem}
        // 下拉刷新状态
        refreshing={isListFresh}
        // 下拉动作
        onRefresh={refresh}
        // 触底比例 剩余10%执行
        onEndReachedThreshold={0.1}
        // 上拉加载
        onEndReached={endReached}
        ListFooterComponent={() => {
          return <Text>正在加载中...</Text>;
        }}
/>

renderItem 方法中这里主要就是渲染页面内容的

const renderItem = ({ item }: { item: TypeDataList }): React.ReactElement => {
    return (
      <TouchableOpacity onPress={() => {handle(item);}}>
        <View>
            <Text>{item.applytime}</Text>
          </View>
      </TouchableOpacity>
    );
  };

接下来就是下拉刷新触底加载

  // 下拉刷新
 const refresh = ():void => {
    setPageNo(1);
    setIsListFresh(true);
    // 1.5s后隐藏
    setTimeout(() => {
      setDataList([]);
      setIsListFresh(false);
      getList();
    }, 1500);
  };
  // 上拉加载
  const endReached = ():void => {
    if (dataList.length == 0) return;
    setPageNo(pageNo + 1);
    getList();
  };

下面是ts 的声明类型

export interface TypeDataList {
  carlot: string;
  applytime: string;
  parkname: string;
  carno: string;
  isout: string | number;
  id: string | number;
  plateColor: string | number;
}
export interface TypeItemParam {
  carno?: string;
  isout?: string | number;
  id?: string | number;
}
export interface TypeParams {
  offset: number;
  limit: number;
}