React Native应用程序在填充大型FlatList时内存不足并崩溃

yzuktlbb  于 2023-03-03  发布在  React
关注(0)|答案(1)|浏览(238)

在Android设备上(在iOS上运行良好),无论是在发布还是调试模式下,我的应用在向下滚动FlatList时内存不足并崩溃,redux操作会将从我们的API获取的新项目添加到列表中。

<FlatList
    style={{ width: '100%' }}
    ListFooterComponentStyle={{ marginBottom: 15 }}
    //ListFooterComponent={() => isLoading || (dataSynchronizing && !isSyncingHidden) ? <View style={{ paddingVertical: 2, alignItems: 'center', marginTop: 12 }} ><DotsLoader color={Colors.blue} size={10} /></View> : <View style={{ height: 0, margin: 0, padding: 0 }}></View>}
    ListEmptyComponent={() => (isLoading ? null : <DefaultText style={{ fontSize: 15, width: '100%', textAlign: 'center', color: Colors.lightgray, marginTop: 20 }}>{T.i18n.t('reports.none_found')}</DefaultText>)}
    data={dailyReportsWithPending.filter(report => !report.is_draft || (report.is_draft && report.user_id == userId)).sort((x, y) => { y.id - x.id })}
    keyExtractor={item => item.id.toString()}
    renderItem={renderItem}
    onEndReachedThreshold={0.01}
    onEndReached={() => {
        console.log("next page", reportsPage)
        if (!dataSynchronizing)
            store.dispatch(dailyReportsActions.loadDailyReports(activeProject.id, userEmail, authenticationToken, reportsPage));
    }}
    showsVerticalScrollIndicator={false}
    initialNumToRender={10}
    onRefresh={onRefresh}
    refreshing={refreshing}
    windowSize={8}
    removeClippedSubviews={true}
    
/>

为了帮助调试此问题,我仅列出每个项目的ID:

const renderItem = ( itemData ) => (<Text>{itemData.item.id}</Text>);

ID在列表中显示良好,但随着列表变得越来越大,原生堆会不断增长,直到应用崩溃。以下是Android Studio Profiler快照:

下面是将项目添加到列表中的Redux操作(我将redux-persistor与它一起使用):

export const loadDailyReports = (projectId, email, token, page) => {
    return async dispatch => {

        dispatch(authActions.setDataSynchronizing());
        let resources = ['not-empty'];
        const response = await fetch(`${Environment.active}/api/v2/projects/${projectId}/daily_reports?page=${page}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'X-User-Email': email,
                'X-User-Token': token
            }
        });

        const data = await response.json();

        if (!response.ok) {
            throw new Error(data.errors.toString());
        }

        dispatch(appendDailyReports(data.resources));
        dispatch(authActions.setDataSynchronized());
    }
};
    • 编辑**

我已经将问题缩小到了获取结果被分派到Reduce的时间,每次获取的结果都是非常大的JSON对象,正在调查redux-persistent是否是罪魁祸首。

9nvpjoqh

9nvpjoqh1#

问题出在redux-persist上,在android上,它会消耗大量的内存来保存大量的数据,唯一能阻止这种情况发生的方法就是在我的配置中增加一个10000毫秒的限制。

相关问题