برنامه نویسی

فهرست صاف افقی همه موارد کاملاً در iOS قابل مشاهده است نه در Android ContentContainerStyle

در اینجا یک کد است

  
                }
            />
Enter fullscreen mode

Exit fullscreen mode

UI View :
Image description

Expected View :

Image description

Here is Code after removing width from contentContainer style

import React from 'react';
import { FlatList, View, Text, StyleSheet, Dimensions } from 'react-native';

const data = [...Array(10).keys()].map((_, i) => ({ id: i, name: `Item ${i + 1}` })); const ITEM_WIDTH = 100; const YourComponent = ({ آیتم }) => (
  
    {item.name}
  

) Const App = () => { بازگشت (
     item.id.toString()} renderItem={({ آیتم }) => } showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingHorizontal: 10 }} ItemSeparatorComponent={() => } getItemLayout={(داده، فهرست) => ({ طول: ITEM_WIDTH، افست: ITEM_WIDTH * فهرست، فهرست، })} /> ); }; const styles = StyleSheet.create({ آیتم: { عرض: ITEM_WIDTH، ارتفاع: 100، justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0', marginHorizontal: 5, }, }); صادرات برنامه پیش فرض.

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چرا بعد از عرض نظر کار می کند:

  • FlatList به صورت پویا پهنای محتوا را بر اساس فرزندان خود محاسبه می کند.
  • هیچ آفست بالشتکی اضافه نشده است، بنابراین هیچ خطری برای محاسبه نادرست منطقه قابل پیمایش وجود ندارد.
  • در نتیجه، اسکرول افقی همانطور که انتظار می رود کار می کند.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا