Flatlist 或其他包含 Scroll 的元素的渲染问题

Question

我有一个使用 Expo Router 开发的带有选项卡系统的应用程序。在其中一个选项卡内，我配置了从选项卡的根路径到特定子路径的重定向。下面是涉及的代码：

import { Redirect } from "expo-router";

export default function Index() {
    return <Redirect href='/favorites' />
}

收藏代码如下：

import React, { useState } from 'react'
import ScreenLayout from '../../../components/screen-layout/ScreenLayout'
import { FlatList, View } from 'react-native'
import { Stack } from 'expo-router'
import SwitchCategory from '../../../components/switch-category/SwitchCategory';
import { dataRealEstates, dataVehicles } from '../../../data';
import VehicleCard from '../../../components/vehicle-card/VehicleCard';
import RealEstateCard from '../../../components/real-estate-card/RealEstateCard';

export default function index() {

const [category, setCategory] = useState("VEHICLES");

const vehicles = dataVehicles.filter(vehicle => vehicle.fav);
const realEstates = dataRealEstates.filter(realEstate => realEstate.fav);

const getElements = (category, item = null) => {
    const elements = {
        VEHICLES: { data: vehicles, component: <VehicleCard item={item} /> },
        REAL_ESTATE: { data: realEstates, component: <RealEstateCard item={item} /> },
    };
    return { data: elements[category].data, component: elements[category].component };
}



return (
    <ScreenLayout withHeader>
        <Stack.Screen
            options={{
                headerShown: true,
                headerTitle: "Favorites",
                headerTintColor: "black",
                headerStyle: {
                    backgroundColor: "#F8F8F8",
                },
                headerBackTitle: "Back",
                headerShadowVisible: false
            }}
        />
        <SwitchCategory
            category={category}
            setCategory={setCategory}
            className="mt-2 mb-4"
        />

        <FlatList
            data={getElements(category).data}
            numColumns={2}
            keyExtractor={(item, index) => `${item.id}-${index}`}
            style={{ padding: 5, marginBottom: 20 }}
            renderItem={({ item }) => (
                getElements(category, item).component
            )}
            showsVerticalScrollIndicator={false}
            ItemSeparatorComponent={() => <View style={{ height: 15 }} />}
            columnWrapperStyle={{ gap: 15 }}
        />
    </ScreenLayout>
)
}

当我从其他选项卡直接导航到 /favorites 路由或使用“重定向”从选项卡根目录重定向到此路由时，我遇到以下问题：

FlatList 中的项目不断闪烁或重新渲染：

渲染的项目（车辆或财产卡）似乎闪烁或意外更新。

奇怪的滚动行为：

与项目交互时滚动不顺畅、意外重置或返回到开头。列表交互不一致：

有时，某些项目在返回同一屏幕时变得无响应或滚动状态未保留。

文件夹结构

我尝试切换到ScrollView，使用

memo

优化Flatlist，使用useCallback分离renderItem函数，但我得到了相同的结果

Answer 1

我刚刚意识到一些事情，如果我注释掉 Stack.Screen 代码块，一切看起来都很好，当我取消注释时问题就出现了，列表会切断最后一项。代码是这样的：

export default function index() {


const vehicles = dataVehicles.filter(vehicle => vehicle.fav);
const realEstates = dataRealEstates.filter(realEstate => realEstate.fav);

const getElements = (category, item = null) => {
const elements = {
    VEHICLES: { data: vehicles, component: <VehicleCard item={item} /> },
    REAL_ESTATE: { data: realEstates, component: <RealEstateCard item= 
      {item} /> },
    };
    return { data: elements[category].data, component: 
    elements[category].component };
}



return (
<View className="flex-1 h-screen py-3 px-4">
        {/* <Stack.Screen
            options={{
                headerShown: true,
                headerTitle: "Favorites",
                headerTintColor: "black",
                headerStyle: {
                    backgroundColor: "#F8F8F8",
                },
                headerBackTitle: "Back",
                headerShadowVisible: false
            }}
        /> */}
    
    <View className="flex-1 items-center">
        <FlatList
            data={getElements(category).data}
            numColumns={2}
            keyExtractor={(item, index) => `${item.id}-${index}`}
            style={{ padding: 5, marginBottom: 20}}
            renderItem={({ item }) => (
                getElements(category, item).component
            )}
            showsVerticalScrollIndicator={false}
            ItemSeparatorComponent={() => <View style={{ height: 15 }} />}
            columnWrapperStyle={{ gap: 15 }}
            ListFooterComponent={<View />}
            ListFooterComponentStyle={{height:20}}
            />
    </View>
</View>
)
}

如果我取消注释该块，FlatList 滚动不会到达底部并剪切最后一行：

问题