في بداية العام ، قمنا بنشر العديد من المواد حول مجموعات المكونات الشائعة لـ
React و
Angular و
Vue . نلفت انتباهكم اليوم إلى ترجمة لمقال من نفس السلسلة عن React Native. نظرًا لاستمرار شعبية React ، وحقيقة أن تطبيقات الهاتف المحمول و
PWA أصبحت أكثر شيوعًا ، فليس من المستغرب أن يجذب
React Native المزيد والمزيد من اهتمام مجتمع المطورين.
يشبه إطار React Native للغاية React من حيث أن تطبيقه يشجع المبرمج على إنشاء واجهات مستخدم باستخدام مكونات معزولة. مجموعات من هذه المكونات ، المصممة لتطوير الواجهة ، تعطي المطورين وحدات جاهزة ، يساعد استخدامها على توفير الوقت عن طريق تسريع العمل. نناقش هنا أحد عشر مجموعة من المكونات التي يدعمها منشئوها بشكل جيد. نأمل أن تكون في متناول أي شخص لديه لتطوير واجهات على React Native.
1. NativeBase
NativeBase عبارة عن مجموعة عبر منصة من مكونات واجهة المستخدم لـ React Native.
Nativebaseيُشار إلى الشعبية الجدية لـ NativeBase من خلال حقيقة أن هذا المشروع سجل حوالي 10 آلاف نجمة على GitHub ، ولديه حوالي ألف شوك. تضع NativeBase العشرات من المكونات عبر المنصات تحت تصرف المبرمجين. عند استخدام NativeBase ، يمكنك ، دون بذل جهود إضافية ، استخدام أي مكتبات تابعة لطرف ثالث ، وحول هذا المشروع هناك نظام بيئي شامل فيه الكثير من الأشياء المفيدة - من
أدوات إنشاء المشاريع الأساسية إلى
أدوات لتطوير الموضوعات التي تعمل على تكوين الخارجية عرض مكونات NativeBase.
2. تفاعل العناصر الأصلية
لقد جمعت مجموعة العناصر المتقاطعة عبر المنصة حوالي 12 ألف نجمة على GitHub. المكونات من هذه المجموعة الكاملة لجافا سكريبت قابلة للتخصيص بشكل كبير.
تفاعل العناصر الأصليةيقول مؤلفو المجموعة أن أهم شيء في React Native Elements هو هيكل المكونات ، وليس تصميمها. هذا يعني أنه لتكوين مكون وإعداده للعمل ، هناك حاجة إلى القليل من كود القالب. في نفس الوقت ، فإن الشخص الذي يستخدم هذه المكونات لديه الفرصة للتحكم الكامل في مظهرها. يمكن لمثل هذا النهج للمكونات جذب انتباه طبقات واسعة من مبرمجي الويب ، من المبتدئين إلى ذوي الخبرة.
هنا هو تطبيق تجريبي مبني على أساس React Native Elements ، والذي يمكنك من خلاله رؤية مكونات هذه المجموعة في العمل.
3. مجموعة أدوات Shoutem UI
تتكون مجموعة أدوات تطوير واجهة
Shoutem ، التي جمعت حوالي 3500 نجمة على GitHub ، من ثلاثة أجزاء. هذه هي
مكونات واجهة المستخدم
والمواضيع والرسوم المتحركة للمكونات.
شاتميوفر Shoutem للمطورين مجموعة من المكونات عبر الأنظمة الأساسية المصممة لنظامي iOS و Android. يتم إنشاء جميع المكونات مع مراعاة إمكانية استخدامها المشترك. يمكن
تخصيص مظهرها. يحتوي كل مكون أيضًا على نمط قياسي يتوافق مع نمط المكونات الأخرى. هذا يجعل من الممكن إنشاء مكونات معقدة دون الحاجة إلى تكوين أنظمة نمط معقدة يدويًا.
4. واجهة المستخدم هريرة
توفر مجموعة أدوات
UI Kitten Component ، التي تمتلك ما يقرب من 3000 نجمة على GitHub ، لمطوري React Native مكونات عالية التخصيص وقابلة لإعادة الاستخدام.
القطط واجهة المستخدمتعتمد واجهة المستخدم Kitten على فكرة نقل تعريفات الأنماط إلى موقع معين ، مما يساعد على إعادة استخدام المكونات ويجعل من السهل تخصيص مظهرها. من السهل تغيير الموضوعات المطبقة على المكونات ، كما يقولون ، على الفور ، وتمريرها مجموعات مختلفة من المتغيرات.
هنا مشروع تجريبي ، من خلال التجربة ، يمكنك التعرف على UK Kitten بشكل أفضل.
5. تفاعل واجهة مستخدم المواد الأصلية
يوفر مشروع
React Native Material UI ، الذي يحتوي على حوالي 2000 نجمة على GitHub ، لمطور الويب مجموعة من مكونات واجهة المستخدم التي تنفذ أفكار التصميم متعدد الأبعاد من Google وقابلة للتخصيص. عند العمل مع واجهة مستخدم React Native Material ، يجدر النظر في أن هذه المكتبة تستخدم كائن JS واحدًا يسمى
uiTheme ، والذي ، لضمان الحد الأقصى من التخصيص ، يتم تمريره من خلال السياق.
تفاعل واجهة مستخدم المواد الأصليةبشكل افتراضي ،
uiTheme كائن
uiTheme على
lightTheme ، والتي يمكن العثور عليها
هنا .
وإليك قائمة بمكونات المكتبة مع أمثلة على استخدامها.
6. ردة فعل المواد المادية
على الرغم من أن
React Native Material Kit تم نشره في NPM في ديسمبر 2017 ، فإن هذه المجموعة من المكونات ، مع حوالي 4 آلاف نجمة على GitHub ، تستحق الانتباه.
تفاعل مجموعة المواد الأصليةتقدم مجموعة React Native Material Kit للمطوّر مجموعة من المكونات والسمات البسيطة والمريحة لواجهة المستخدم التي تنفذ مفهوم Google Material Design من Google. لماذا تستحق هذه المجموعة من المكونات الاهتمام؟ النقطة الأساسية هي بساطته ، وحقيقة أنه لا يوجد شيء غير ضروري فيه يخلق "ضجيج" معلوماتي. ومع ذلك ، تجدر الإشارة إلى أنه نظرًا لعدم دعم هذه المكتبة بشكل خاص ، يجب استخدامها بحذر.
7. Nachos UI
توفر مكتبة
Nachos UI ، التي تحتوي على حوالي 1500 نجمة على GitHub ، للمطورين مجموعة من أكثر من 30 مكونًا مخصصًا ، بالإضافة إلى استخدامها في بيئة متنقلة كجزء من تطبيقات
React Native ، مناسبة أيضًا لتطوير تطبيقات الويب باستخدام
شبكة الويب الأصلية .
Nachos uiNachos UI يدعم اختبار أجمل ، الغزل والغزل. توفر هذه المكتبة الجميلة والمكتوبة بشكل جيد لجميع المهتمين تصميمات مثيرة للاهتمام ومديرًا عالميًا للموضوعات.
8. رد فعل مكتبة واجهة المستخدم الأصلية
يتم العمل على مشروع
مكتبة واجهة المستخدم الأصلية المتفاعلة على
Wix . إنها مجموعة حديثة للغاية من الأدوات لتطوير واجهات المستخدم ومكتبة مكونات لـ React Native. تدعم مكتبة React Native UI Library ، دون بذل جهود برمجة إضافية ،
رد فعل أصليًا متحركًا وتفاعلًا أصليًا ضبابيًا .
تفاعل مكتبة واجهة المستخدم الأصليةتحتوي هذه المكتبة على مجموعة من الإعدادات المسبقة للأنماط (من بينها - الألوان ، الطباعة ، الظلال ، نصف قطر الحدود وغيرها) ، والتي يتم ترجمتها إلى معدلات.
فيما يلي مثال على استخدام مكتبة واجهة المستخدم الأصلية للتفاعل.
9. رد فعل الورق الأصلي
تتبع مكتبة المكونات المشتركة للمنصة من
React Native Paper ، مع ما يقرب من 1500 نجمة على GitHub ، أفكار التصميم متعدد الأبعاد من Google.
تفاعل مع الورق الأصليهذه المجموعة من المكونات تدعم
المواضيع العالمية . إذا لزم الأمر ، من أجل التخلص من الوحدات غير المستخدمة من هذه المجموعة ، يمكنك استخدام البرنامج المساعد المناسب لبابل.
في ما يلي مثال على استخدام React Native Paper.
10. رد فعل أيقونات المتجهات الأصلية
مشروع
React Native Vector Icons ، الذي جمع حوالي 10 آلاف نجمة على GitHub ، عبارة عن
مجموعة واسعة من الرموز المخصصة لتطبيقات React Native المناسبة للاستخدام على منصات مختلفة.
تفاعل أيقونات المتجهات الأصليةتستخدم الرموز من React Native Vector Icons في آلاف التطبيقات. من الممكن أن تكون مفيدة لك.
11. Teaset
تحتوي مكتبة
Teaset ، التي جمعت حوالي 1300 نجمة على GitHub ، على أكثر من 20 مكونًا مكتوبًا بتنسيق JS (ES6).
Teasetلا يمكن للمشروع أن يتباهى بالوثائق الغنية ، ولكن بساطة مكوناته ، التي تركز على خدمة الاحتياجات الأساسية لتطبيقات React Native ، ومظهرها الجميل ، تشير إلى أن Teaset يستحق نظرة على الأقل.
الملخص
في بداية هذه المادة ، تحدثنا عن حقيقة أن React Native يجذب المزيد والمزيد من اهتمام مجتمع المطورين بسبب انتشار React وشعبية تطبيقات الهاتف المحمول. لذلك ، ليس من المستغرب أن عدد التطورات اللائقة التي تنفذ مجموعات من المكونات أو الأدوات المساعدة لإنشاء التطبيقات المستندة إلى التفاعل الأصلي لا يمكن أن يقتصر على تلك التي درسناها أعلاه. إذا كنت تبحث عن شيء مشابه لتطبيق React Native الخاص بك ، فإليك بعض المشاريع الأخرى التي تستحق الانتباه إليها:
أعزائي القراء! إذا كنت تقوم بتطوير تطبيقات للهاتف استنادًا إلى React Native ، فيرجى إخبارنا بمجموعات المكونات والأدوات المساعدة التي تستخدمها لهذا الغرض.
