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;
}
相关推荐
天蓝色的鱼鱼37 分钟前
Next.js的水合:静默的页面“唤醒”术
前端·react.js·next.js
歪歪1004 小时前
React Native开发Android&IOS流程完整指南
android·开发语言·前端·react native·ios·前端框架
lapiii3584 小时前
快速学完React计划(第一天)
前端·react.js·前端框架
liangshanbo12154 小时前
React + TypeScript 企业级编码规范指南
ubuntu·react.js·typescript
LRH5 小时前
时间切片 + 双工作循环 + 优先级模型:React 的并发任务管理策略
前端·react.js
歪歪1006 小时前
React Native开发有哪些优势和劣势?
服务器·前端·javascript·react native·react.js·前端框架
勤劳打代码6 小时前
触类旁通 —— Flutter 与 React 对比解析
前端·flutter·react native
若梦plus6 小时前
多端开发之React-Native原理浅析
前端·react native
XiaoSong6 小时前
React Native 主题配置终极指南,一篇文章说透
前端·react native·react.js
im_AMBER20 小时前
React 01
前端·javascript·笔记·react.js·前端框架·web