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;
}
相关推荐
just小千1 小时前
重学React(二):添加交互
javascript·react.js·交互
摸鱼仙人~2 小时前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript
wen's11 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
Jackson_Mseven17 小时前
面试官:useEffect 为什么总背刺?我:闭包、ref 和依赖数组的三角恋
前端·react.js·面试
前端小盆友20 小时前
从零实现一个GPT 【React + Express】--- 【2】实现对话流和停止生成
前端·gpt·react.js
一生躺平的仔20 小时前
TypeScript入门(九)装饰器:TypeScript的"元编程超能力"
typescript
MiyueFE20 小时前
让我害怕的 TypeScript 类型 — — 直到我学会了这 3 条规则
前端·typescript
OLong20 小时前
2025年最强React插件,支持大量快捷操作
前端·react.js·visual studio code
朝阳3920 小时前
ReactNative【实战系列教程】我的小红书 3 -- 自定义底栏Tab导航(含图片选择 expo-image-picker 的使用)
react native
摸鱼仙人~20 小时前
重塑智能体决策路径:深入理解 ReAct 框架
前端·react.js·前端框架