如果 Flashlist 超出屏幕的视图框，则再次重新渲染项目

Question

我正在努力在我的社交媒体应用程序中显示卡片，其中显示各种类型的帖子，例如民意调查，视频，textpallete帖子等...我正在使用flashlist来渲染每张卡片，问题是让我有10张卡片项目，目前在我的手机中一次显示 2 张卡，如果我向下滚动并滚动到顶部，上一张加载的卡就会消失并再次呈现，我知道这样做可以优化我的长列表，但我需要显示 至少一个加载程序或闪光直到卡片重新渲染

import {ActivityIndicator, FlatList, RefreshControl, View} from 'react-native';
import React, {useState} from 'react';
import {map} from 'lodash';
import EmptyState from '../../common/EmptyState';
import {hp, wp} from '../../../utils/Dimensions';
import FeedsCardLayout from './FeedsCardLayout';
import {useTheme} from '@react-navigation/native';
import InView from 'react-native-component-inview';
import moment from 'moment';
import {GetIcon} from '../../../utils/Icons';
import {Custompadding} from '../../../stylesheet';
import {S3_BASE_URL} from '../../../constants/api';
import { FlashList } from '@shopify/flash-list';

let onEndReachedCalledDuringMomentum;

const FeedsMap = ({
  feedList,
  callback,
  residentId,
  bottomCallback,
  shareCallback,
  isLoadingMore,
  loadMore,
  pollCallback,
  menuCallback,
  viewCallback,
  isRefreshing,
  handleRefresh,
}) => {
  const {colors} = useTheme();

  const renderItem = ({item, index}) => {
    const endDate = moment(item.created_at).add(5, 'hours').add(45, 'minutes');
    const todaysdate = moment();
    const diff = endDate > todaysdate;
    return (
        <FeedsCardLayout
          key={index}
          showEdit={diff}
          callback={() => {
            callback(item.feed_id);
          }}
          residentId={residentId}
          data={item}
          bottomCallback={(callbackType, data) => {
            bottomCallback(callbackType, data, index);
          }}
          shareCallback={shareCallback}
          pollCallback={(selectedOption, pollData) => {
            pollCallback(selectedOption, pollData, index);
          }}
          menuCallback={callbackType => {
            menuCallback(callbackType, item, index);
          }}
        />
    );
  };

  const renderFooter = () => {
    return (
      <View
        style={{
          height: isLoadingMore ? wp(40) : 0,
          marginBottom: wp(30),
          justifyContent: 'center',
        }}>
        {isLoadingMore ? <ActivityIndicator size="large" /> : <View />}
      </View>
    );
  };

  return (
    <View style={[{flex: 1, backgroundColor: colors.selectedColor}]}>
      {feedList?.length > 0 ? (
        <FlashList
          data={feedList}
          renderItem={renderItem}
          ListFooterComponent={renderFooter}
          onEndReached={() => {
            if (!onEndReachedCalledDuringMomentum) {
              loadMore();
              onEndReachedCalledDuringMomentum = true;
            }
          }}
          onEndReachedThreshold={0.1}
          onMomentumScrollBegin={() => {
            onEndReachedCalledDuringMomentum = false;
          }}
          onViewableItemsChanged={(e)=>{
            e?.viewableItems[0]?.item && viewCallback(e?.viewableItems[0]?.item)
          }}
          refreshControl={
            <RefreshControl
              refreshing={isRefreshing}
              onRefresh={handleRefresh}
            />
          }
          estimatedItemSize={362}
        />
      ) : (
        <View
          style={{
            flex: 1,
            justifyContent: 'center',
            backgroundColor: colors.backgroundColor,
          }}>
          <EmptyState height={hp(40)} title={'No Feeds Found'} />
        </View>
      )}
    </View>
  );
};

export default FeedsMap;

假设我加载了 50 个帖子，如果我从底部（第 50 个）快速滚动到顶部（第一个）帖子，它会显示 2 秒的空白空间，然后帖子出现，有什么方法可以显示加载程序或闪烁，直到卡片完全渲染

Answer 1

您是否尝试过使用 flatList 而不是 flashList？

供参考：https://shopify.github.io/flash-list/

flashList 中还有一个道具 onBlankArea，我认为它可能适合您的情况