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;
}
相关推荐
摸鱼仙人~3 分钟前
styled-components:现代React样式解决方案
前端·react.js·前端框架
ohMyGod_1236 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜056 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界6 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
骑自行车的码农7 小时前
React短文系列 遍历fiber树 App的创建
前端·react.js
爱学习的茄子8 小时前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试
Spider_Man9 小时前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm
张志鹏PHP全栈9 小时前
TypeScript 第二天,TypeScript中的类型(一)
typescript
10年前端老司机10 小时前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
極光未晚10 小时前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript