HarmonyOS rn组件FlatList下拉刷新异常

使用rnoh:0.72.27,下拉刷新后数据会闪屏,并且初始化数据。

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

可以参考下以下的demo:

import React, { useState, useEffect } from 'react';
import { FlatList, View, Text, ActivityIndicator, StyleSheet } from 'react-native';

const MyComponent = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);

  const fetchData = () => {
    setLoading(true);
    // 模拟从API获取数据
    setTimeout(() => {
      const newData = Array.from({ length: 10 }, (_, index) => ({ id: index + 1, text: `Item ${index + 1}` }));
      setData([...data, ...newData]);
      setLoading(false);
    }, 1000);
  };

  const handleLoadMore = () => {
    if (!loading) {
      setPage(page + 1);
      fetchData();
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  const renderFooter = () => {
    return loading ? (
      <View style={styles.footer}>
      <ActivityIndicator size="large" color="blue" />
      </View>
    ) : null;
  };

  return (
    <FlatList
  data={data}
  renderItem={({ item }) => (
    <View style={styles.item}>
    <Text>{item.text}</Text>
    </View>
  )}
keyExtractor={(item) => item.id.toString()}
onEndReached={handleLoadMore}
onEndReachedThreshold={0.1}
ListFooterComponent={renderFooter}
/>
);
};

const styles = StyleSheet.create({
  item: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  footer: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 20,
  },
});

export default MyComponent;
分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS 首页下拉刷新异常
354浏览 • 1回复 待解决
HarmonyOS 组件下拉刷新问题
518浏览 • 1回复 待解决
上拉加载,下拉刷新组件
454浏览 • 1回复 待解决
HarmonyOS Web组件怎么添加下拉刷新
80浏览 • 1回复 待解决
如何使用Swiper组件实现下拉刷新
859浏览 • 1回复 待解决
HarmonyOS 下拉刷新功能
229浏览 • 1回复 待解决
有谁知道web组件如何下拉刷新
2015浏览 • 1回复 待解决
HarmonyOS 下拉刷新,上拉加载功能
42浏览 • 1回复 待解决
HarmonyOS 下拉刷新,上拉加载示例
49浏览 • 1回复 待解决
HarmonyOS使用Refresh下拉刷新问题
945浏览 • 1回复 待解决
HarmonyOS ArkWeb如何实现下拉刷新功能
529浏览 • 1回复 待解决