本机反应:FLatList与低端设备中滚动的视频崩溃

Question

我是这里的菜鸟。

最近，我的任务是改进一个必须在低端设备上运行的的性能。该应用程序使用大量后端调用，并大量使用FlatList。该应用程序正常启动，但当数据开始加载时，会在几个滚动之后崩溃。有人能帮我解决我在这里做错了什么吗？

import * as React from 'react';
import {FC, useContext, useEffect, useState} from 'react';
import {Dimensions, FlatList, RefreshControl, StyleSheet, Text, View} from 'react-native';
import ExploreCard from '../Components/ExploreCard';
import global from '../global';
import {GlobalContext} from "../state-management/GlobalContextProvider";
import {EventFieldKey, EventNames, trackEvent} from "../state-management/track";
import {CategoryV2Response} from "../state-management/category";
import {_getExploreFeedFromServer, ExploreFeedState} from "../state-management/explore";
import {isNOTNullOrUndefined, isNullOrUndefined} from "../Utils/Helpers";
import {DEFAULT_CATEGORY, DEFAULT_PAGING_STATE_VALUE} from '../Utils/GlobalConstants';
import {DataProvider} from "recyclerlistview";
​
​
const { width, height } = Dimensions.get("window");
​
const CardHeight = 308
​
const renderItem = ({ item, index }) => (
    <ExploreCard
        key={`EXPLORE_FEED${item.postId}`}
        post={item} index={index} />
);
​
const keyExtractor = (item) => item.postId
​
export const ExploreFeed: FC<{
    route: any;
    navigation: any;
}> = ({ navigation, route }) => {
​
    let _unsubscribe = null
    let _onBlur = null
    const [showLoginModal, setShowLoginModal] = useState(false)
    const [categories, setCategories] = useState<CategoryV2Response[]>([])
    // const [dataProvider,setDataProvider]= useState(new DataProvider((r1,r2) => r1 !== r2))
​
    const {
        indicateNearbyScreen,
    } = useContext(GlobalContext);
​
    // Explore Feed
    const [exploreFeedState, setExploreFeedState] = useState<ExploreFeedState>({
        posts: [],
        loadingPosts: false,
        selectedCategory: null,
        resultsToFetchInOneRequest: 4,
        pagingState: DEFAULT_PAGING_STATE_VALUE,
        hasMorePosts: true,
        maxRetryCount: 3,
        retryCount: 0,
        refreshingPosts: false,
    });
​
    const [dataDataProvider,setdataDataProvider] = useState( new DataProvider((r1, r2) => {
        return r1 !== r2;
    }))
​
    useEffect(() => {
        if (exploreFeedState.refreshingPosts) {
            const refreshingPosts = false
            const posts = [];
            const pagingState = DEFAULT_PAGING_STATE_VALUE;
            const hasMorePosts = true;
            const loadingPosts = true;
            setExploreFeedState({
                ...exploreFeedState,
                posts,
                pagingState,
                hasMorePosts,
                loadingPosts,
                refreshingPosts,
            });
            const dataProvider = dataDataProvider.cloneWithRows([...posts])
​
            setdataDataProvider(dataProvider)
        }
    }, [exploreFeedState.refreshingPosts]);
​
    useEffect(() => {
        (async function _handleCategorySelect() {
            if (isNOTNullOrUndefined(exploreFeedState.selectedCategory) && exploreFeedState.selectedCategory.length > 0) {
                const posts = [];
                const pagingState = DEFAULT_PAGING_STATE_VALUE;
                const hasMorePosts = true;
                const loadingPosts = true;
​
                setExploreFeedState({
                    ...exploreFeedState,
                    posts,
                    pagingState,
                    hasMorePosts,
                    loadingPosts,
                });
                const dataProvider = dataDataProvider.cloneWithRows([...posts])
​
                setdataDataProvider(dataProvider)
​
            }
        })();
    }, [exploreFeedState.selectedCategory]);
​
    const loadExplorePost = async () => {
        if (exploreFeedState.loadingPosts && exploreFeedState.hasMorePosts) {
            const feedData = await _getExploreFeedFromServer({
                category: exploreFeedState.selectedCategory,
                limit: exploreFeedState.resultsToFetchInOneRequest,
                pagingState: exploreFeedState.pagingState,
            })
            if (feedData === null) {
                const retryCount = exploreFeedState.retryCount + 1;
                const loadingPosts = retryCount < exploreFeedState.maxRetryCount;
                // Use old state while re-trying
                const pagingState = isNOTNullOrUndefined(exploreFeedState.pagingState) ? exploreFeedState.pagingState : DEFAULT_PAGING_STATE_VALUE;
                const hasMorePosts = true;
                setExploreFeedState({
                    ...exploreFeedState,
                    loadingPosts,
                    retryCount,
                    pagingState,
                    hasMorePosts,
                });
​
            } else {
                const loadingPosts = false;
                const posts = [...exploreFeedState.posts, ...feedData.posts];
                // Use state from the response
                const pagingState = isNOTNullOrUndefined(feedData.pagingState) ? feedData.pagingState : DEFAULT_PAGING_STATE_VALUE;
                const hasMorePosts = feedData.hasNext;
                setExploreFeedState({
                    ...exploreFeedState,
                    posts,
                    loadingPosts,
                    pagingState,
                    hasMorePosts,
                });
                const dataProvider = dataDataProvider.cloneWithRows([...posts])
​
                setdataDataProvider(dataProvider)
            }
        } else {
            // console.log("Not loading posts");
        }
    }
​
    useEffect(() => {
        (async function _loadExplorePosts() {
            loadExplorePost()
        })();
    }, [exploreFeedState.loadingPosts, exploreFeedState.hasMorePosts]);
​
    const handleCategorySelect = (categoryId: string) => {
        trackEvent(
            EventNames.CATEGORY_CLICKED,
            {
                [EventFieldKey.CATEGORY_ID]: categoryId,
            }
        )
        const selectedCategory = categoryId
        setExploreFeedState({
            ...exploreFeedState,
            selectedCategory
        });
    }
​
    const handleTransitionForSingleExplorePost = (fromIndex: number, toIndex: number) => {
        const posts = exploreFeedState.posts
        let clickedPost = posts[fromIndex];
        posts[fromIndex] = posts[toIndex];
        posts[toIndex] = clickedPost;
        setExploreFeedState({
            ...exploreFeedState,
            posts
        });
    }
​
    const fetchPaginatedExploreFeed = async () => {
        if (isNullOrUndefined(exploreFeedState.selectedCategory) || exploreFeedState.selectedCategory.length === 0) {
            handleCategorySelect(DEFAULT_CATEGORY)
        } else {
            const loadingPosts = exploreFeedState.hasMorePosts;
            setExploreFeedState({
                ...exploreFeedState,
                loadingPosts
            });
        }
    }
​
    const refreshExploreFeed = async () => {
        const refreshingPosts = true;
        setExploreFeedState({
            ...exploreFeedState,
            refreshingPosts
        });
    }
​
    return (
        <View style={styles.container}>
            {exploreFeedState.posts.length > 0 ? <>
                <FlatList
                refreshControl={
                    <RefreshControl
                      refreshing={exploreFeedState.refreshingPosts}
                      onRefresh={() => refreshExploreFeed()}
                    />
                }
                keyExtractor={keyExtractor}
                showsVerticalScrollIndicator={false}
                numColumns={2}
                contentContainerStyle={styles.cardsList}
                data={exploreFeedState.posts}
                renderItem={renderItem}
                initialNumToRender={10}
                maxToRenderPerBatch={10}
                removeClippedSubviews={true}
                updateCellsBatchingPeriod={100}
                windowSize={6}
                onEndReached={() => { fetchPaginatedExploreFeed()}}
                columnWrapperStyle={{justifyContent:'space-between'}}
                onEndReachedThreshold={100}
                getItemLayout={(data, index) => (
                  {length: CardHeight, offset: CardHeight * index, index}
                )}
              />
            </> : <View style={styles.emptyState}>
                <Text style={styles.emptytext}>{exploreFeedState.loadingPosts ? 'Loading posts...' : 'No data for this filter'}</Text>
            </View>}
        </View>
    )
}
​
const styles = StyleSheet.create({
    container: {
        paddingTop: 40,
        backgroundColor: '#F7F7F7',
        height: height,
​
    },
    loadScreen: {
        height: height,
        justifyContent: 'center',
        alignItems: 'center'
    },
    emptyState: {
        // flex:1,
        justifyContent: 'center',
        alignItems: 'center',
        // marginTop:200,
        backgroundColor: '#fff',
        width: '100%',
        height: '100%'
    },
    emptytext: {
        fontFamily: global.semiBoldFont,
        color: '#000',
        fontSize: 14,
    },
    filterHeadContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingRight: 10,
​
    },
    filterbox: {
        width: '100%',
        // backgroundColor: '#fff',
        position: 'absolute',
        top: 47,
        paddingBottom: 20,
        height: '100%'
    },
    transparentHalf: {
        backgroundColor: 'rgba(0,0,0,0.4)',
        // height: '50%',
        flex: 1
    },
    closeFilter: {
        // backgroundColor:'#',
        width: 40,
        // height:30,
        justifyContent: 'center',
        alignItems: 'flex-end'
    },
    filterOptions: {
        flexDirection: 'row',
        alignItems: 'center',
        flexWrap: 'wrap',
        justifyContent: 'space-evenly',
        paddingHorizontal: 12,
        backgroundColor: '#fff',
        paddingBottom: 12
    },
    categoryScrollList: {
        height: 50,
        alignItems: 'center',
        paddingLeft: 10
    },
​
    categoryItem: {
        paddingHorizontal: 10,
        // paddingVertical: 10
    },
    filterItem: {
        paddingVertical: 8,
        // paddingHorizontal: 16,
        borderWidth: 0.5,
        borderColor: '#E8E8E8',
        backgroundColor: '#fff',
        marginBottom: 10,
        borderRadius: 4,
        width: '23%',
        justifyContent: 'center',
        alignItems: 'center',
    },
    categoryText: {
        color: '#4F4F4F',
        textTransform: 'capitalize',
        fontSize: 12,
        fontFamily: global.regularFont
​
    },
    cardsList: {
        paddingHorizontal: 4,
        // flexDirection: 'row',
        // flexWrap: 'wrap',
        // justifyContent: 'space-between'
    },
    image: {
        width: null,
        height: null,
        resizeMode: 'contain',
        flex: 1
    },
    cameraBtn: {
        width: 25,
        height: 25,
        position: 'absolute',
        top: 14,
        left: 16
    },
    filterOptionsHead: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingBottom: 20,
        paddingTop: 12,
        paddingHorizontal: 12,
        backgroundColor: '#fff'
    },
    primarytext: {
        fontFamily: global.regularFont,
        color: '#000',
        fontSize: 12,
        lineHeight: 15,
        marginRight: 6
    },
    secondarytext: {
        fontFamily: global.regularFont,
        fontSize: 12,
        lineHeight: 15,
        color: "#8F8F8F"
    }
});

Answer 1

为了获得更好的性能，您可以通过Flipkart而不是Flatlist使用recyclerListView。https://github.com/Flipkart/recyclerlistview

Answer 2

您尝试添加overScrollMode=“从不”

<ScrollView overScrollMode="never" ...

并完成

祝好运