React Native Components Navigation
دليل React Native للعربية (4): التعامل مع القوائم والمكتبات الخارجية
ياسر نجيب •
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.