اذهب إلى المحتوى

السؤال

نشر

السلام عليكم .. اريد ان اطبق هذا التصميم الذى فى الصورة وانا نجحت فى تطبيقه لكن بواسطة useState و conditional rendering والموضع سهل وبسيط جدا بفضل الله .. ولكنى فجأة احتجت ان أفعل هذا التصميم ولكن بواسطة FlatList .. لاننى انوى ان ازيد ال items واجعلها كثيرة بالاضافة الى ان ال flatlist أفضل .. أنا أريد ان اعرض item واحدة مع امكانية تحريكها لليمين واليسار بواسطة السهمين  لاعرض item اخرى .. وشكرا مقدما 

 

6040ee53a12d9_.png.34057af3d59baa9cb4c52b43e9fd2792.png

 

 

Recommended Posts

  • 0
نشر

يمكنك استخدام flatlist وتفعيل pagination horizontal بهذه الطريقة بعدها يجب ان تبحث عن طريقة

للتمرير عن طريق الضغط على أسهم اليمين والشمال

function Carousel() {
  return (
    <FlatList
      data={slideList} //البياتات
      style={{ flex: 1 }}
      renderItem={({ item }) => {
        return <Slide data={item} />; //المكون الذي يعرض البيانات
      }}
      pagingEnabled //تفعيل خاصية التمرير
      horizontal // خاصية التمرير الأفقي
      showsHorizontalScrollIndicator={false} // محدد التمرير
    />
  );
}

 

  • 0
نشر
بتاريخ On 3/4/2021 at 17:52 قال Salah Eddin Berriani:

يمكنك استخدام flatlist وتفعيل pagination horizontal بهذه الطريقة بعدها يجب ان تبحث عن طريقة

للتمرير عن طريق الضغط على أسهم اليمين والشمال


function Carousel() {
  return (
    <FlatList
      data={slideList} //البياتات
      style={{ flex: 1 }}
      renderItem={({ item }) => {
        return <Slide data={item} />; //المكون الذي يعرض البيانات
      }}
      pagingEnabled //تفعيل خاصية التمرير
      horizontal // خاصية التمرير الأفقي
      showsHorizontalScrollIndicator={false} // محدد التمرير
    />
  );
}

 

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...