15 הגיבו ספריות רכיבי הילידים שעליכם להכיר בשנת 2020

הגיב ספריות רכיבי הילידים שעליך להכיר


ספריות רכיב הילדות יכולות להיות חסכון זמן עצום כשאתה עובד על פרויקט האפליקציה הבא שלך. כיצד ייתכן? ובכן, נתחיל עם React עצמו. אתה בטח יודע ש- React היא ספריית JavaScript עם קוד פתוח המסייעת בבניית ממשקי משתמשים לאפליקציות מבוססות-אינטרנט וניידות כאחד. זה כולל מספר רכיבים שבהם אתה יכול להשתמש בקלות עבור היישומים שלך.

בדרך כלל, בעת בניית רכיבים ב- React, תצטרך לעצב אותם כך שיתאימו להנחיות הפלטפורמה שאליה אתה ממקד. זה איפה תגיב שפת אם יכול לעזור. זוהי מסגרת בה תוכלו להשתמש כדי לפתח אפליקציות לנייד באמצעות React יחד עם יכולות מקוריות של פלטפורמת היעד.

מוקדם יותר, כתבנו פוסט המציג את מיטב ספריות ורכיבי ממשק המשתמש. בפוסט זה, נסקור את ספריות רכיב הילידים באופן ספציפי.

ספריות רכיב הילידים הטובות ביותר להגיב השנה

1. NativeBase

הספריות הטובות ביותר לתגובת רכיבים מקוריות של הילידים מספר 1: NativeBase

אם אתה מוצא את עצמך כותב רכיבים של React לפלטפורמות שונות, עליך לתת לו גישה עם NativeBase, מסגרת חזיתית דינאמית. הספרייה היא אוסף של רכיבים חיוניים בין פלטפורמות React Native והיא מקום טוב להתחיל בבניית האפליקציה שלך. הרכיבים בנויים עם React Native בשילוב עם פונקציונליות JavaScript מסוימת עם מאפיינים הניתנים להתאמה אישית. אתה יכול גם להשתמש בספריות מקוריות של צד שלישי מחוץ לקופסה.

NativeBase הוא קוד פתוח לחלוטין וכולל 12,000+ כוכבים ב- גיתוב. עם זאת, הנושאים מגיעים לפרמיה ככל שמוסיפים יותר תכונות ומסכים. NativeBase זמין כעת עבור משתמשי אינטרנט גם. בעזרת אותו בסיס קוד JavaScript ועבודה עם תכנון ספציפי לפלטפורמות עבור אנדרואיד ו- iOS, תוכלו להשיג מראה ותחושה מקוריים עבור האפליקציה שלכם. פרויקטים בקוד הפתוח שלהם כוללים אפליקציית Starter של Native, אפליקציית שיבוט בטוויטר, אפליקציית ToDo ואפליקציית הדרכה. בסל הפרימיום שלהם תוכלו למצוא אפליקציות מתחילים להזמנות, השכרות, רשימות משרות, העברת הודעות ועוד.

2. ערכת חומרים תגובת הילידים

ספריות רכיב הילידים הטובות ביותר להגיב # 2: ערכת חומר-תגוב-יליד

ערכת חומר React Native מציעה תבנית אפליקציה מקומית בחינם עם עיצוב חומרים. נבנה עם מסגרת גליו, הוא מעצב מחדש את הרכיבים הנפוצים ביותר כדי לשמור על מינימום של דברים ולהתאים לעיצוב החומרי של גוגל. זה קל לשימוש וכולל 200+ אלמנטים בעבודת יד כמו כפתורים, קלפים, ניווט וכניסות. כל הרכיבים יכולים לקחת וריאציות צבע על ידי ביצוע שינויים בעיצוב. בנוסף, ישנם חמישה תוספים מותאמים אישית וחמישה דפים לדוגמה.

עם קרוב ל 200 כוכבים גיתוב, זה מציע א גרסת מקצוען גם זה נותן לך גישה לדפים לדוגמה ותיעוד נוספים.

3. הגיב אלמנטים הילידים

ספריות רכיב הילידים הטובות ביותר להגיב הטוב ביותר: אלמנטים מגיבים-מגיבים

React Native Elements היא ערכת כלים של ממשק ממשק המשתמש של React Native המרכיבה במקום אחד מספר רכיבי ממשק משתמש גדולים עם קוד פתוח המיוצרים על ידי מפתחים. תוכלו לטבול בחבילות שהרכיבו React Native Elements ולהיות בטוחים כי ל- API יש מראה ותחושה עקביים. לא מפתיע שהיא קיבלה 17,000 כוכבים ב גיתוב.

החבילה כוללת סל שלם של רכיבים כמו תמחור, תג, שכבת-על, חלוקה וסרגלי חיפוש ספציפיים לפלטפורמה. הם קלים לשימוש ולהתאמה אישית באמת. האביזרים לכל הרכיבים מוגדרים במיקום מרכזי אחד, מה שמאפשר לעדכן או לשנות רכיבים בקלות. בנוסף, היא יכולה לשמש כפלטפורמה המחברת בין צוותים קטנים המפתחים אפליקציות מסחריות של תגובת הילידים בתרומת קוד פתוח.

יש להשתמש ב- React Native לפרויקטים מבוססי האינטרנט שלך React Native Web. היא מאפשרת ליצור ממשקי משתמש מהירים ומותאמים ב- JavaScript ומשתלבים עם כלי React Dev. תוכל לשתף את בסיס הקוד שלך בין יישומי React Native ליישומי אינטרנט. הוא תומך בסוג, לחיצה או החלקה כמצבי קלט, יש נגישות מובנית ותמיכה ב- RTL ומשמש גם את טוויטר, אובר ופליפארט..

4. לוטי לתגובת הילידים

לוטי

Lottie היא ספרייה מ- Airbnb למכשירים ניידים שתעזור לך להוסיף אנימציות לאפליקציות שלך. בדרך כלל, לאחר יצירת אנימציות ב- Adobe After Effects, תצטרך להמיר אותם לפורמט שמיש באפליקציית האינטרנט שלך. לוטי עוזר לך בזה.

זה עובד על ידי ייצוא נתוני אנימציה בפורמט JSON מתוסף After Effects, BodyMovin. הרחבה זו מצורפת עם נגן JS להצגת אנימציות באינטרנט. זה עובד גם עם React Native, ותוכלו לגשת למסמכים הרשמיים בתאריך גיתוב שם היא צברה קרוב ל 12,000 כוכבים.

ספריות Lottie ותוספים הם זמין בחינם, ותוכלו להשתמש באוסף האוסף של קבצי אנימציה כדי להפוך את האפליקציות לאטרקטיביות ומעניינות. קובצי האנימציה הם קטנים בגודלם והם בפורמט וקטורי. ככאלה, אסור שתחוו השפעה כלשהי על ביצועי האפליקציה שלך. יחד עם זאת זה יכול לתבל את ממשק המשתמש שלך ולהפוך אותו מושך יותר ויזואלית.

5. הגיב סמלים וקטוריים של הילידים

תגוב-יליד-וקטור-אייקונים

אחת מהן היא בין ספריות הרכיבים הטובים ביותר של תגובת הילידים, אם מה שאתה מחפש הם כמה סמלים לשימוש באפליקציות שלך. עם ספרייה המונה 3000,000 סמלים אתה די בטוח למצוא משהו שיתאים לצרכים שלך. יתרה מזאת, ניתן להתאים אישית, לסגנן ולהרחיב את הסמלים תוך שילובם בפרויקט.

החבילה תומכת בסרגל הכלים ובסרגל הכלים אנדרואיד, כמו גם במקור תמונה וגופן רב-סגנון. עם קרוב ל 12,000 כוכבים ב גיתוב, זה יכול להתאים מושלם לכפתורים, סמלי לוגו ושולי ניווט. זה ממשיך הלאה הגיב את הספרייה המונפשת של Native שילוב זה עם כל סמל ליצירת רכיב מונפש. אם כבר יש לך גופן לסמל עם קובץ CSS משויך, אתה יכול בקלות ליצור מערך אייקונים עם סקריפט ה- icon-icon.

6. הצת את CLI

להצית

Ignite CLI היא ערכת התנעה מוצקה עבור אפליקציות React Native. ללא עלות כלל, לוח הדוודים של React Native ללא מאמץ עוזר לך לבנות אפליקציות מקוריות. הוא מתקין בקלות ומציית לשיטות העבודה המומלצות בבנייתו, ובמקביל מאפשר להתאים את לוחות הדוד לפרויקט שלכם. מחוץ לקופסה זה עובד גם עם אנדרואיד וגם עם iOS. יש גם תמיכה בפלאגינים עצמאיים.

בנוסף, אתה יכול לבחור ממספר צלחות הדוד או להפעיל משלך. מערכת התוספים המודולרית מאפשרת להוסיף תכונות יישום או לכתוב בעצמכם. מסך לדוגמא לשימוש עוזר לך לבדוק ספריות של צד שלישי ולבנות אפליקציות המורכבות ממספר רכיבים. המסך מכיל גם דוגמאות ליישומים נפוצים הבנויים עם רכיבים בסיסיים. כדי לעזור לך לזהות את הרכיבים ולבצע שינויים בהם בקלות, מסך זה רושם גם את הדוגמאות בקבצי הרכיב. ממסך זה תוכלו לבדוק, להשתמש ולשתף רכיבים עם הצוות שלכם. Ignite CLI הרוויח 10,000+ כוכבים ב גיתוב.

ז. הגיב את תצוגת המפה המקומית

תגובת ילידים-מפות

אחת מספריות React Native רכיבים המציעה רכיבי מפות עבור אנדרואיד ו- iOS היא React Native Mapview. בנייתו כזו שתכונות רגילות על כל מפה כגון סמנים ומצולעים מצוינות כילדים של רכיב Mapview. זה מסייע לממשק ה- API לשלוט באופן הצהרתי על תכונות במפה באופן אינטואיטיבי. מצדך, עליך להבטיח הפעלת ממשק API של מפות Google במסוף של גוגל.

אתה יכול לעשות הרבה כדי להתאים אישית את סגנון המפה. תוכל לשנות את מיקום תצוגת המפה, לעקוב אחר אזור / מיקום ולהפוך את נקודות העניין ללחיצה במפות Google. ניתן לאפשר התקרבות לסמנים או קואורדינטות שצוינו, או אפילו להנפיש אותם. אם אתה מקצה ערך לאזור מונפש לאביזר, Mapview יכול להשתמש בממשק ה- API המונפש כדי לשלוט במרכז המפה ולזום. אלא אם כן תציין סמנים מותאמים אישית, סמני ברירת המחדל יועברו.

מה שמגניב שהסמנים ניתנים לניתוח, ניתן להתאמה אישית באמצעות תמונות, והם מעדכנים ממשקי משתמש אחרים בזמן גרירה. אם אתה זקוק ליותר, יש הסבר מותאם אישית לסמנים, ליוצרי מצולעים ולכיסוי מעגלים ומצולעים. משתמשי iOS יכולים ליצור פולינולות מעבר צבע. לא מפתיע שיש בה 10,000+ כוכבים גיתוב.

8. הגיב צ’אט מחונן יליד

תגיב-יליד-מחונן-צ'אט

כפי שהשם מרמז, צ’ט React Native Gifted יעזור לך בהגדרת ממשק המשתמש של צ’אט עבור React Native (ואינטרנט). זה נכתב באמצעות TypeScript והוא כולל רכיבים הניתנים להתאמה אישית מלאה המסייעים לטעון הודעות קודמות או להעתיק הודעות ללוח ועוד. יש גם סרגל InputTool שעוזר למשתמשים לדלג על המקלדת.

כדי לשפר את חוויית המשתמש, הוא מאפשר ל- Avatar כראשי תיבות של המשתמש, תאריכים מקומיים, קלט טקסט רב-קו, הודעות תשובה מהירות (בוט) והודעת מערכת. יש תמיכה גם ב- Redux. צ’אט מחונן כולל 8,000+ כוכבים ב- גיתוב.

9. הגיב גור חתלתול ממשק המשתמש

תגור-יליד-חתלתול-ui

אחת מספריות ה- React Native רכיבים שיכולות לשמש ערכת התנעה עבור אפליקציות סלולריות לכל תחום, כולל eCommerce, היא React Native UI Kitten – יישום React Native של ה- מערכת אווה דיזיין. עם דירוג של יותר מ -5,000 כוכבים ב- גיתוב, הוא מציע סט של כ 20 רכיבים למטרות כלליות המעוצבים באותו אופן לדאוג למראה החזותי.

עם ספריית קוד פתוח חופשית לנצח, אתה יכול להשתמש בערכות הנושא שסופקו, או ליצור כמה שיותר ערכות נושא משלך, וכל זאת מבלי לשנות את קוד המקור של הרכיבים. מה שכן, אתה יכול לעבור בין נושאים חשוכים וקלילים בזמן הריצה מבלי שתצטרך לטעון מחדש את הדף. לאחר התקנת חבילת ה- UI Kitten מ- NPM, תוכלו לייבא את הרכיבים ולהתחיל להשתמש בהם בפרויקט שלכם.

10. הגיב נייר מקורי

נייר תגובתי

ספרייה נוספת בחינם וקוד פתוח היא React Native Paper. יש לו את כל המרכיבים העיקריים, ורכיבים אלה מעוצבים בהתאם לתקני עיצוב החומרים של גוגל.

נייר הוא חוצה פלטפורמות ועובד גם באינטרנט וגם בנייד. ישנם רכיבים ואינטראקציות שמתאימים כמעט לכל תרחיש של מקרה לשימוש. רוב הפרטים, כולל אנימציות, נגישות ולוגיקה של ממשק המשתמש, מטופלים. אתה יכול להתאים אישית את צבעי ברירת המחדל או להכין משלך. חוץ מזה, יש לך תמיכה מלאה בנושא נושא, כמו גם אפשרות לעבור בין מצבים כהים לאור. על גיתוב, זה מתלה 4,000+ כוכבים.

11. הגיב ערכת חומרים מקוריים

תגוב-חומר-ערכת חומר

הבא ברשימה שלנו של ספריות רכיב הילידים כולל תגובה נוספת של רכיבי ממשק משתמש שמביאה עיצוב חומרי ל- React Native. בפנים תמצאו כפתורים, קלפים, מחוון טווח ושדות טקסט. תוכלו לראות גם ספינרים וסרגלי התקדמות להצגת טעינה, כמו גם מתגים למתגים, לחצני רדיו ותיבות סימון.

כל מה שנדרש זה כמה שורות של קוד להוסיף כפתורים באמצעות בוני מוגדרים מראש הדבקים בערכת ברירת המחדל של עיצוב עיצוב חומר. באמצעות הכלי לבניית תוכנה תוכלו גם ליצור כפתורים בהתאמה אישית מאפס. כך גם בשדות טקסט מובנים. לא רק זה, אתה יכול להתאים אישית את הסגנונות על ידי שינוי הנושא הגלובלי. זה ישפיע על כל תיבות הסימון וכפתורי הרדיו בכל האפליקציה כולה. על גיתוב, בספרייה זו 4,700 כוכבים.

12. ממשק ממשק החומרים הילידים

תגוב-יליד-חומר-ui

ממשק המשתמש של React Native Material מציע קרוב ל- 20 רכיבים ל- React Native. המרכיבים כוללים כפתורי פעולה, אווטרים, כותרות משנה, מגירות, חוצצים, סרגלי כלים ועוד. רכיבים אלה ניתנים להתאמה אישית רבה ומשתמשים בעיצוב חומרי בבנייה שלהם. ניתן להרחיב כל התאמה אישית שתבצע לנושא גם לרכיבים אחרים, כולל כל מה שאתה בונה בעצמך. ניתן לבצע שינויים מקומיים על ידי עקיפה של סגנונות בכל צורך.

במקרה שאתה כבר משתמש בסמלים וקטוריים של React Native, אין הרבה מה לעשות בדרך של התקנה. אחרת, תצטרך להוריד סמלי חומר עבור אנדרואיד וודא שיש לך רובוטו עבור iOS. הספרייה הזו צברה 3,000+ כוכבים ב- גיתוב.

13. RNUILIB

rnuilib

עם יותר מ- 60 רכיבים בערכה זו, RNUILIB נועל כמעט 2,000 כוכבים גיתוב. עם דוגמאות חיות כלולות לכל הרכיבים, תוכלו לבדוק את האפשרויות הזמינות לפני שתשתמשו בהן בפרויקט.

חלק מהרכיבים הם: תמונה מונפשת, סורק שיציין התקדמות, אווטרים להצגת תמונות פרופיל, כפתורים בסיסיים ורכיבי מחוון מעבר צבע..

14. ממשק המשתמש של נחוס

ממשק המשתמש של נחוס

עם 30+ רכיבים מוכנים שתוכלו להשתמש בהם בכל פרויקט JavaScript או React Native, ממשק המשתמש של נחוס מציג 1,900+ כוכבים על גיתוב. מה שבאמת עוזר זה שאתה לא צריך לדאוג יותר מדי לעיצוב כל רכיב. כל שעליכם לעשות הוא לייבא את כל התשומות המעוצבות מראש מרכיב אחד לרכיב אחר. לאחר התקנת ערכת ממשק המשתמש של Nachos, בחרו כל רכיב שתרצו, ייבאו את הקוד React Native המתאים ואז המשיכו להתאים אותו בהתאמה לפרויקט שלכם..

תוכנה חופשית עם קוד פתוח ומונע קהילה משתמשת באבוקוד, כלי שמאפשר שיתוף ובדיקה של עיצובים של פוטושופ וסקיצה. הודות ל תגיב שפת אם באינטרנט, אתה יכול להשתמש בו גם לפרויקטים מבוססי אינטרנט.

15. שוטם

צועק

Shoutem היא פלטפורמת בניית אפליקציות העובדת באמצעות תוספים או אבני בניין מודולריות, בדומה לבניית אתר עם תוספים בוורדפרס. עם 40+ תוספים מלאים, הוא אסף 450+ כוכבים ב גיתוב. הרחבות כוללות גלריות לתמונות וסרטונים, מוצרים, אירועים, תפריטים למסעדות ועוד. אתה יכול להשתמש בתוספי קוד פתוח אלה באופן חופשי באפליקציה שלך. ובאמצעות מזלג פשוט, תוכלו לשנות אותם בכל דרך שתרצו.

Shoutem מציעה שירותי back-end ניידים רבים כגון ניתוחים, אימות משתמשים, פריסות, התראות דחיפה ועוד. יתר על כן, ישנם נושאים רבים המקודדים היטב לשימוש ולהתאמה אישית. Shoutem משתמש ב- 100% JavaScript ו- React Native.

ובכן, זו הרשימה שלנו עם ספריות המרכיבים הטובים ביותר של תגובת הילידים. איזה הוא הבחירה שלך? שתפו בתגובות.

יתכן שאתה מעוניין במאמרים אלה:

  • תבניות מקוריות חינם להגיב עבור פיתוח אפליקציות

אל תשכח להצטרף לקורס ההתרסקות שלנו בנושא זירוז אתר וורדפרס שלך. עם כמה תיקונים פשוטים, אתה יכול להפחית את זמן הטעינה שלך אפילו ב 50-80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map