mahdi
6 سال پیش توسط mahdi مطرح شد
0 پاسخ

مشکل با منطق flatlist در React Native

سلام دوستان عزیز
بنده برنامه ای نوشتم که اطلاعات خاصی رو در flatList نمایش می ده. هر بار که هر صفحه بخواد پردازش بشه عملیات زیادی حساب می شه. متوجه شدم صفحات به تعداد زیاد و به تکرار پردازش می شوند که قطعا منابع زیادی رو هدر می دهد.
مثال ساده شده زیر را ببینید:

<FlatList
    style={{flex: 1}}
    horizontal={true}
    snapToInterval={0}
    snapToAlignment={"center"}
    showsHorizontalScrollIndicator={false}
    data={[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]}
    renderItem={({item}) =>{
        console.log("Item: " , item);
        return (<Text style={{flex: 1, width: Dimensions. get('window').width, height: Dimensions. get('window').height}}>{item}</Text>)
    }}
/>

و نتیجه اجرا به شرح زیر است:

Item: 1
Item: 2
Item: 3
Item: 4
Item: 5
Item: 6
Item: 7
Item: 8
Item: 9
Item: 10
Item: 1
Item: 2
Item: 3
Item: 4
Item: 5
Item: 6
Item: 7
Item: 8
Item: 9
Item: 10
Item: 11
Item: 1
Item: 2
Item: 3
Item: 4
Item: 5
Item: 6
Item: 7
Item: 8
Item: 9
Item: 10
Item: 11
Item: 12
Item: 13
Item: 14
Item: 15
Item: 16
Item: 17
Item: 18
Item: 19
Item: 20
Item: 1
Item: 2
Item: 3
Item: 4
Item: 5
Item: 6
Item: 7
Item: 8
Item: 9
Item: 10
Item: 11
Item: 12
Item: 13
Item: 14
Item: 15
Item: 16
Item: 17
Item: 18
Item: 19
Item: 20