أصبحت تقنية React Native أكثر شيوعًا بين مطوري التطبيقات. نتيجة لذلك ، بدأت المكتبات الجاهزة ومكونات واجهة المستخدم في الدخول إلى الساحة لتسريع مشاريع تطوير التطبيقات.

تساعدك هذه المكتبات المجانية والمفتوحة المصدر على تطوير التطبيقات بسرعة بدلاً من تعديل عناصر التطبيق على نطاق واسع بناءً على النظام الأساسي المستهدف.

في هذه المقالة ، ستكتشف موارد واجهة المستخدم (UI) التي تحتاجها لمشروع تطوير تطبيق React Native التالي.

حقوق الصورة: صنع باستخدام React.js

إذا كنت مبرمج يفضل التصميمات المبسطة، قم بزيارة مكتبة Teaset UI. يوفر أكثر من 20 مكونًا أصليًا من JavaScript ES6s. يمكن للمصممين والمطورين الناشئين لتطبيقات React Native الوصول إلى عناصر هذه المكتبة واستخدامها مجانًا. في وقت كتابة هذا التقرير ، كان لديه أكثر من 600 مستخدم و 2.8 ألف نجمة على GitHub.

تشمل الميزات الرئيسية ما يلي:

  • قم بتضمين عرض محتوى متميز وتحكم المستخدم في التطبيق.
  • وحدات مفيدة مثل TabView و DrawView و Stepper.
  • اللغة الأساسية المستخدمة في المكونات هي JavaScript ، والمكتبة تدعم Redux.
حقوق الصورة: NativeBase

يمكن الوصول إليها عبر منصة ويب عبر الإنترنت ، هذه المكتبة المجانية غنية بما يقرب من 40 مكونًا ، بما في ذلك أوراق الإجراءات والقوائم وفتات الخبز والأدوات الدوارة والملفات المنبثقة. باستخدام هذه ، يمكنك تطوير تطبيق بمظهر أصلي بسلاسة. لدى NativeBase أكثر من 58000 مستخدم و 15.6 ألف نجمة على GitHub.

view instagram anonymous

تشمل الميزات الرئيسية ما يلي:

  • أحد العناصر الأساسية لهذه المكتبة هو النفاذية، والذي يتيح لك تخصيص سمة التطبيق وأنماط المكونات.
  • تعمل React Native ARIA على تمكينها من تقديم خطافات React لبناء أنظمة تصميم يمكن الوصول إليها في أسرع وقت ممكن.
  • نظرًا لتوافقه مع أدوات المساعدة المساعدة ، يمكنك إنشاء مكونات واجهة مستخدم مخصصة دون أي متاعب.
حقوق الصورة: تفاعل العناصر الأصلية

توفر مجموعة أدوات React Native UI هذه دمجًا للعديد من مكتبات مكونات React Native مفتوحة المصدر في مكان واحد. المكتبة متاحة على منصة ويب قائمة على السحابة حيث يمكن لمطوري React Native الاتصال. مع أكثر من 106000 مستخدم على GitHub ، لديها أيضًا 21.1 ألف نجمة.

تشمل الميزات الرئيسية ما يلي:

  • أكثر من 30 مكونًا لتصميم تطبيقات متسقة لأجهزة Android و iOS والويب. وتشمل هذه أشرطة البحث ، والشارات ، والتراكبات ، والتسعير ، وما إلى ذلك.
  • تستخدم العناصر لغة TypeScript.
  • يخزن النظام الأساسي جميع العناصر في خادم مركزي. لذلك ، يصبح إجراء التغييرات على تطبيقك أمرًا سهلاً.

متعلق ب: ما هو TypeScript ولماذا يجب على المطورين تجربته؟

حقوق الصورة: لوتي

لوتي هو مواطن متفاعل تطوير تطبيقات الجوال مكتبة يمكن لمجتمع المطورين العالميين الوصول إليها من خلال ترخيص مفتوح المصدر. اللغات المستخدمة لهذه المكونات هي Java و JavaScript و C # و Swift و Objective-C و Ruby و Starlark. استخدم أكثر من 82000 شخص هذه المكتبة من GitHub ، وعرض عليها 14400 شخصًا نجمة.

تشمل الميزات الرئيسية ما يلي:

  • مجموعة شاملة من الرسوم المتحركة داخل التطبيق.
  • يمكن لمصممي التطبيقات تطوير الرسوم المتحركة ونقلها دون أي مساعدة من المهندس.
  • يدعم تصدير ملفات الرسوم المتحركة بتنسيق JSON من تنسيق ملف BodyMovin.
حقوق الصورة: جيثب

يتيح لك Ignite CLI تضمين أكواد معيارية مجانية في المشروع دون عناء. تشمل اللغات المستخدمة في هذه المكتبة TypeScript و Java و جافا سكريبتو Objective-C و Shell و EJS. حصل على 12.8 ألف نجمة على GitHub.

تشمل الميزات الرئيسية ما يلي:

  • يشتهر تطبيق Boilerplate بكل من React Native و Expo.
  • استخدم مكونات التطبيق وشاركها واختبرها في بيئة تعاونية.
  • قم بإنشاء تطبيقات جاهزة للزعانف وجاهزة للتفاعل.
حقوق الصورة: كريتيف تيم

هذا المورد مفتوح المصدر هو مساعدك المثالي في تطوير تطبيق React Native الجميل للتجارة الإلكترونية. في وقت كتابة هذا التقرير ، كان لديه 480 نجمة على GitHub.

يتيح لك القالب ، المبني على React Native و Galio.io و Expo ، إضافة أزرار أنيقة ومسارات تنقل ومدخلات وشاشات لتطبيقك.

تشمل الميزات الرئيسية ما يلي:

  • حرية الاختيار من بين حوالي 200 مكون مثل الأزرار والمدخلات والبطاقات والتنقلات وما إلى ذلك.
  • ميزة لتعديل السمة باستخدام تباين الألوان في كل المكونات.
  • قم بتطوير الشاشات التالية مجانًا: الصفحة الرئيسية والملف الشخصي والحساب والعناصر والمقالات والإعداد.
حقوق الصورة: UI هريرة

تعد مجموعة واجهة المستخدم المجانية والمفتوحة المصدر مناسبة لمشاريع تطوير تطبيقات React Native. تحتوي المكتبة على مجموعة واسعة من عناصر واجهة المستخدم لبناء مجموعة متنوعة من التطبيقات ، بما في ذلك تطبيق الدردشة أو تطبيق التجارة الإلكترونية أو تطبيق إدارة الوسائط الاجتماعية. إلى جانب 8.4K نجمة على GitHub ، لديه ما يقرب من 3000 مستخدم.

تشمل الميزات الرئيسية ما يلي:

  • استخدم تصميمه المستند إلى السمات لتطوير تطبيقات جميلة.
  • قم بتغيير المظهر أثناء وقت التشغيل دون إعادة تحميل التطبيق.
  • تساعدك المكونات الذرية على إنشاء واجهات تطبيقات مذهلة ومتسقة.

متعلق ب: ما هو الفرق بين تصميم واجهة المستخدم و UX؟

حقوق الصورة: شوطم

أثناء تطوير تطبيق React Native الذي سيعمل على Android و iOS ، ستساعدك مجموعة أدوات واجهة المستخدم هذه من خلال توفير أدوات تطوير التطبيقات. مع هذه المكتبة سهلة الاستخدام التي تضم أكثر من 500 نجم من GitHub ، فإن إنشاء تطبيقات رائعة على بعد نقرات قليلة.

تشمل الميزات الرئيسية ما يلي:

  • يعد إنشاء أو استيراد المحتوى إلى التطبيق أمرًا سهلاً مع النظام الأساسي ، وذلك بفضل نظام إدارة المحتوى المدمج فيه.
  • أكثر من 40 امتدادًا كامل الميزات يمكنك إعادة استخدامها لتطبيقك. يمكنك أيضًا تخصيصها أو استخدامها كأساس لإنشاء أخرى جديدة.
  • كود التطبيقات واختبارها وتصحيحها محليًا في أي وقت من الأوقات.
حقوق الصورة: جيثب

إذا كنت تبحث عن مجموعات واجهة مستخدم مفتوحة المصدر لمكونات تصميم المواد ، فإن واجهة المستخدم المادية هي المكان المناسب للحصول عليها. استخدم أكثر من 2500 شخصًا منصة المكونات المستندة إلى JavaScript هذه من GitHub ، وقام 3.7 ألف شخص بتمييزها بنجمة.

تشمل الميزات الرئيسية ما يلي:

  • حوالي 20 مكونًا من مكونات React Native ، بما في ذلك أزرار الإجراءات والعناوين الفرعية والأدراج وأشرطة الأدوات.
  • جميع العناصر قابلة للتخصيص بدرجة عالية وتتوافق مع معيار التصميم متعدد الأبعاد من Google.
  • لا تعتمد المكونات على أي أوراق أنماط عامة وتدمج النمط الذي تريد عرضه.
حقوق الصورة: جيثب

هنا ، ستحصل على وحدة كاميرا شاملة لتطبيقات React Native. اللغات المستخدمة لهذا المكون هي Java و Objective-C و C ++ و C # و JavaScript و Ruby وغيرها. إلى جانب 9.3K نجمة ، لديها أيضًا أكثر من 22000 مستخدم على GitHub.

تشمل الميزات الرئيسية ما يلي:

  • متوافق للعمل مع كاميرا الجهاز.
  • يدعم ميزات مثل الصور ومقاطع الفيديو واكتشاف الوجه والتعرف على النص ومسح الباركود وما إلى ذلك.
  • أثناء تنفيذ ميزة الكاميرا في التطبيق باستخدام هذه الأداة ، يمكن للمطورين العمل دون أي قلق بشأن الكود الأصلي.
حقوق الصورة: جيثب

هل تريد إنشاء تطبيقات خرائط قابلة للتخصيص بدرجة كبيرة تعمل عبر الأنظمة الأساسية؟ استخدم مكتبة المكونات هذه لمشروع Android أو iOS الخاص بك. استخدم أكثر من 49000 شخص هذا وساعدوه في كسب 8.3 ألف نجمة على GitHub.

تشمل الميزات الرئيسية ما يلي:

  • يمكنك إنشاء خريطة تتضمن ميزات مثل التحرير وعرض المناطق والأنماط والعلامات وما إلى ذلك بسهولة.
  • ستساعدك سهولة الاستخدام والوثائق التفصيلية أثناء التنفيذ.
حقوق الصورة: رد فعل الملاحة

يعد التنقل مكونًا مهمًا في أي تطبيق يساهم في سهولة الاستخدام وتجربة المستخدم. تتيح لك مكتبة التنقل هذه إنشاء أشرطة تنقل لتطبيق React Native. بصرف النظر عن استخدامه أكثر من 9900 مرة من GitHub ، فقد حصل على 12.2 ألف نجمة على نفس المنصة.

تشمل الميزات الرئيسية ما يلي:

  • مكونات هذه المكتبة قابلة للتخصيص وأقل عربات التي تجرها الدواب.
  • أداء من الدرجة الأولى لكل حالة استخدام.

Jumpstart مشروعك التالي لتطوير التطبيقات

يعد إنشاء تطبيق باستخدام Reactive Native طريقة رائعة لبناء واجهة مستخدم قاتلة ، ويمكن لمكتبات مكونات React Native UI هذه أن تجعل عملية تطوير تطبيقك سريعة ومريحة.

الآن لديك قائمة وتعرف من أين يمكنك الوصول إلى هذه الميزات ، فلماذا لا تبدأ في إنشاء تطبيقك التالي؟

يشاركسقسقةبريد الالكتروني
9 قوالب مفتوحة المصدر لتطبيق React Native لتطوير Android في عام 2021

أنشئ تطبيقات Android عالية الجودة باستخدام قوالب تطبيق React Native المجانية للاستخدام.

اقرأ التالي

مواضيع ذات صلة
  • برمجة
  • تتفاعل
  • برمجة
  • تطوير التطبيقات
نبذة عن الكاتب
تمال داس (96 المقالات المنشورة)

تامال كاتبة مستقلة في MakeUseOf. بعد اكتساب خبرة كبيرة في التكنولوجيا والتمويل والأعمال في وظيفته السابقة في شركة استشارية لتكنولوجيا المعلومات ، تبنى الكتابة كمهنة بدوام كامل منذ 3 سنوات. بينما لا يكتب عن الإنتاجية وآخر الأخبار التقنية ، فإنه يحب لعب Splinter Cell ومشاهدة فيديو نيتفليكس / برايم بنهم.

المزيد من Tamal Das

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك