React Native Components Navigation

دليل React Native للعربية (4): التعامل مع القوائم والمكتبات الخارجية

👤 ياسر نجيب
•
📅
•
⏱️ 1 دقائق قراءة

FlatList و RTL

بشكل عام، FlatList تدعم RTL تلقائياً. لكن إذا واجهت مشاكل في القوائم الأفقية (horizontal) على Android القديم، قد تحتاج لإضافة:

<FlatList
  horizontal
  data={data}
  contentContainerStyle={{ flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row' }}
  // ...
/>

ملاحظة: في النسخ الحديثة من React Native، هذا غالباً لم يعد ضرورياً.

React Navigation

مكتبة react-navigation تدعم RTL بامتياز.

  • Drawer Navigation: ستحتاج للتأكد من أن مكان الـ Drawer ينقلب (يفتح من اليمين). 
    <Drawer.Navigator screenOptions={{ drawerPosition: 'left' }}> 
// React Navigation سيقلب 'left' إلى اليمين تلقائياً في وضع RTL

المكتبات الخارجية (Third Party Libs)

احذر من المكتبات التي تستخدم position: 'absolute'; left: 0. قبل استخدام أي مكتبة UI (مثل Sliders)، تحقق من “RTL Support” في توثيقها، أو كن مستعداً لكتابة Patch لها باستخدام patch-package.