הוספת תגובות לאפליקציית React Native שלך
זה ה-SDK הרשמי של React Native עבור FastComments.
גש ל-FastComments API ישירות מתוך אפליקציית React Native שלך.
מאגר
התקנה 
npm install fastcomments-react-native-sdk --saveאודות
ספרייה זו היא מימוש מלא של react-native עבור FastComments.
היא תומכת בהערות בזמן אמת, צ'אט, שרשורים (threads), אימוג'ים, התראות, SSO, סקינים, והתאמה אישית מלאה על ידי העברת אובייקט גיליון סגנונות. כל הנכסים ניתנים גם הם להתאמה אישית, והיא תומכת במעבר בין נכסים שונים בהתאם למצב כהה.
היתרון של ספרייה זו הוא שהיא גמישה יותר מאשר ה-wrapper fastcomments-react-native. ההערות מוצגות עם רכיבים נייטיב במקום בתוך webview.
הכול רץ על ה-backend של FastComments, כך שעליך לשלב רק את ה-UI:
<FastCommentsLiveCommenting config={config} styles={styles} callbacks={callbacks} assets={assets}/>עיין ב-example/src לדוגמאות נוספות.
הוסף צ'אט חי לאפליקציית React Native קיימת שלך, או אפילו בנה רשת חברתית!
צילומי מסך
מערכת תגובות חיה בעלת שיח שרשתי עם אווטרים, תגובות מקוננות, הצבעות, ומהמחבר המובנה לעריכת טקסט עשיר, בנוסף ערכת נושא כהה ותצורת צ'אט חיה (מוצגת כאן באמצעות react-native-web):
תגובות חיות |
ערכת נושא כהה |
צ'אט חי |
עורך טקסט עשיר
הספרייה משתמשת ב-react-native-enriched לעריכת טקסט עשיר, שמספק חוויית עריכה WYSIWYG חזקה. אותו עורך מפעיל את iOS, Android וה-web (באמצעות react-native-web), כך שהמחבר מתנהג בצורה עקבית בכל פלטפורמה באמצעות מימוש יחיד.
react-native-enriched דורש את הארכיטקטורה החדשה של React Native (Fabric) על נייטיב (ברירת המחדל מאז RN 0.76, אופציונלי ב-RN 0.72-0.75), ובאנדלר שמסוגל לפתור תנאי exports של חבילות. SDK זה מפותח ונבדק נגד RN 0.81 / React 19. אותו עורך פועל גם ב-web דרך react-native-web; בניית ה-web של העורך enriched עדיין מסומנת כניסיונית בריפוזיטורי המקור.
וידג'טים
ה-SDK כולל שלושה וידג'טים, המשקפים את ה-SDK של FastComments לאנדרואיד:
FastCommentsLiveCommenting- תגובות שרשתי עם הצבעות, תגובות מקוננות, פג'ינציה, אזכורים, התראות, ועדכונים חיים.FastCommentsLiveChat- תצורת צ'אט המבוססת על אותו מנוע: הודעות כרונולוגיות כשהחדשות בתחתית, המחבר מתחת לרשימה, רצועת כותרת חיה (נקודת חיבור + ספירת משתמשים), היסטוריה אינסופית הטעונה על ידי גלילה מעלה, גלילה אוטומטית להודעות חדשות, ללא הצבעות או חוטי תגובות. כל תצורה ניתנת לעקיפה דרךconfig.FastCommentsFeed- פיד חברתי עם מחבר פוסטים, מדיה, ריאקציות, מעקבים, ושלטי פוסטים חדשים בזמן אמת.
<FastCommentsLiveChat config=\{{ tenantId: 'demo', urlId: 'my-room' }}/>ערכת עיצוב
המראה ברירת המחדל נוצר מהגדרה של טוקנים סמנטיים לעיצוב (FastCommentsTheme): צבעים, ריווח, רדיוס, גדלי גופנים, עובי גופנים, וגדלי אווטרים. העבר סט חלקי של הטוקנים (הקלסי FastCommentsThemeOverrides) דרך הפרופ theme על כל וידג'ט וכל עץ הסגנון יתעדכן באופן עקבי:
<FastCommentsLiveCommenting config={config} theme=\{{ colors: { primary: '#FF5500' } }}/>מצב כהה זמין על ידי החלפת סט הטוקנים:
import { getDarkTheme } from 'fastcomments-react-native-sdk';
<FastCommentsLiveCommenting config={config} theme={getDarkTheme()}/>הפרופ styles עדיין מקבל עץ IFastCommentsStyles גולמי לשליטה מדויקת. כאשר גם theme וגם styles מסופקים, הסגנונות המפורשים גוברים על עץ הנושא; כאשר נמסר רק styles, הוא מחליף לחלוטין את ברירות המחדל (התנהגות מקורית, כך שישויות ושכבות קיימות אינן מושפעות). setupDarkModeSkin במצב מיושן לטובת הפרופ theme.
אפשרויות תצורה
ספרייה זו שואפת לתמוך בכל אפשרויות התצורה המוגדרות ב-fastcomments-typescript, בדומה למימוש ה-web.
בנוסף לאלה, React Native מוסיף מספר אפשרויות ספציפיות ל-SDK דרך FastCommentsRNConfig:
hideTopBar- להסתיר את רצועת המשתמש המחובר / פעמון ההתראות שמוצגת מעל המחבר.usePressToEdit- לחיצה והחזקת תגובה לפתיחת התפריט שלה.disableDownVoting- להסתיר את כפתורי ההצבעה נגד.renderCommentInline- להציג את פרטי המגיב בתוך אותו בלוק HTML כמו תוכן התגובה.renderLikesToRight- להעביר את אזור ההצבעות/לייקים לימין התגובה במקום מתחתיה.renderDateBelowComment- להציג את התאריך מתחת לתגובה.showLiveStatus- להציג את רצועת הכותרת בסגנון צ'אט עם "Live" + ספירת משתמשים מעל התגובות.useInlineSubmitButton- להציג את כפתור השליחה כאייקון בתוך המחבר.countAboveToggle- עםuseShowCommentsToggle, כמה תגובות יופיעו מעל מתג "הצג תגובות".preserveFeedScrollPosition-FastCommentsFeedזוכר את הזזת הגלילה שלו בין פירוק/הרכבה מחדש (ברירת המחדל true).
מושגי FastComments
המושגים העיקריים שכדאי להכיר כדי להתחיל הם tenantId ו-urlId. tenantId הוא מזהה החשבון שלך ב-FastComments.com. urlId הוא אליו יקושרו חוטי התגובות. זה יכול להיות כתובת דף, או מזהה מוצר, מזהה מאמר, וכו'.
התראות משתמש
FastComments תומך בהתראות עבור תסריטים רבים. התראות ניתנות לקונפיגורציה, ניתן להסיר את ההסכמה להן באופן גלובלי או ברמת התראה/תגובה, ותומך במנויים ברמת הדף כך שמשתמשים יכולים להירשם לחוטי תגובות של דף או מאמר ספציפיים.
לדוגמה, ניתן להשתמש ב-SSO מאובטח לאימות המשתמש ואז לבדוק באופן תקופתי הודעות שלא נקראו ולדחוף אותן אל המשתמש.
ראה את הדוגמה AppNotificationSecureSSO כדי לראות כיצד לקבל ולתרגם התראות משתמש שלא נקראו.
דפדפן GIF
ברירת המחדל היא שלא מופעלת בחירת תמונה או GIF. ראה example/src/AppCommentingImageSelection.tsx כדי ללמוד כיצד לתמוך בהעלאת תמונות ו-GIF. קיימת ספרייה לדפדוף GIF שמאנוננת חיפושים ותמונות המסופקות בספרייה זו — פשוט יש להשתמש בה.
ביצועים
אנא פתחו כרטיס עם דוגמה לשחזור הבעיה, כולל המכשיר שבו היא נצפתה, אם אתם מזהים בעיות ביצועים. ביצועים הם עקרון חשוב בכל ספריות FastComments.
זקוקים לעזרה?
אם אתם נתקלים בבעיות או יש לכם שאלות לגבי ה-React Native SDK, אנא:
תרומות
תרומות מתקבלות בברכה! בקרו במאגר ה-GitHub repository לקבלת הנחיות לתרומה.