react native ts 接口返回列表渲染

目前知道有两种方法可以实现,一种就是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;
}
相关推荐
OEC小胖胖9 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
三水气象台10 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
巴巴_羊14 小时前
React Ref使用
前端·javascript·react.js
杨进军15 小时前
React 协调器 render 阶段
前端·react.js·前端框架
归于尽15 小时前
智能前端小魔术,让图片开口说单词
前端·react.js
杨进军15 小时前
React 中 root.render 与 unmount 函数的流程
前端·react.js·前端框架
難釋懷15 小时前
TypeScript-webpack
javascript·webpack·typescript
杨进军17 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
Spider_Man19 小时前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
白瓷梅子汤21 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js