הוסף ווידג'טים של תגובות לאפליקציית React Native שלך
זו הספרייה הרשמית של React Native עבור FastComments.
הטמעו ווידג'טים של תגובות בזמן אמת, צ'אט וביקורות באפליקציית React Native שלכם.
מאגר
הדגמה חיה 
כדי לראות כל ווידג'ט וכל זרימה שרצים באופן מקומי מול ה־tenant הציבורי demo, שיבטו את המאגר והריצו:
yarn bootstrap
cd example
yarn ios # או: yarn android, yarn webנקודת הכניסה של תצוגת ההדגמה היא example/src/ShowcaseApp.tsx — אפליקציה אחת שמציגה את כל הווידג'טים, ערכות הנושא והזרימות.
היעד yarn web משתמש ב־react-native-web + react-native-web-webview (שמציג את ה־WebView כ־iframe). שימושי לבדיקות חזותיות מהירות בדפדפן; ממשקי ה־WebView המיועדים לנייטיב בלבד כמו injectJavaScript ו־onShouldStartLoadWithRequest לא יתפקדו במלואם בגרסת ה־web.
התקנה
npm install react-native-webview --save
npm install fastcomments-react-native --saveשקול את ה-SDK הנייטיב
ספרייה זו משתמשת ב-webview שמקיף את ספריית VanillaJS.
FastComments כעת תומכת במימוש מקומי מלא של הלקוח שלנו כחלק מ-fastcomments-react-native-sdk. אם ברצונך במימוש מקומי מלא, כדאי לבדוק שם.
שימוש - ווידג'ט תגובות בזמן אמת
ממשק ה-API שונה במעט בהשוואה ל-fastcomments-react. ב-native, אנו מעבירים אובייקט config שעוקב אחרי המבנה הזה.
import { FastCommentsCommentWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // מזהה ה-tenant שלך. ניתן לאחזר אותו מ-https://fastcomments.com/auth/my-account/api-secret
const myAppPageId = 'native-test'; // מזהה או כתובת URL של שרשור התגובות באפליקציה שלך.
const myAppPageUrl = 'https://example.com/external-page'; // באפשרותך לבחור להגדיר כתובת URL לעמוד חיצוני
const myAppPageTitle = 'Example Title'; // ... ובגלל זה כנראה תרצה כותרת לתוכן זה
const [config, setConfig] = useState({
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
});
// על-ידי קריאה ל-setConfig() אנחנו יכולים לבצע פעולות כמו שינוי הדף הנוכחי, או המשתמש המחובר כעת
// ראה example/src/App.tsx
return (
<FastCommentsCommentWidget config={config}/>
);שימוש - ווידג'ט צ'אט בזמן אמת
import { FastCommentsLiveChatWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // מזהה השוכר שלך. ניתן להשיג אותו מ https://fastcomments.com/auth/my-account/api-secret
const myAppPageId = 'native-test'; // ה-ID או ה-URL של שרשור התגובות באפליקציה שלך.
const myAppPageUrl = 'https://example.com/external-page'; // ניתן באופן אופציונלי להגדיר URL לדף חיצוני
const myAppPageTitle = 'Example Title'; // ... ואולי תרצה כותרת לתוכן זה
const config = {
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
};
return (
<FastCommentsLiveChatWidget config={config}/>
);שימוש - SSO (כניסה יחידה)
FastComments משתמש ב־HMAC עבור SSO מאובטח. כדי להשתמש, בקצה השרת שלך צור את אובייקט ה‑SSO (תכונת התצורה sso) ושלח אותו
לוווידג'ט התגובות.
ניתן למצוא דוגמאות עבור מגוון backend-ים, כאן: https://github.com/FastComments/fastcomments-code-examples/tree/master/sso
תלויות עמיתים
fastcomments-react-native דורש את react-native-webview. לכן עליך לעקוב אחרי שלבי ההתקנה של react-native-webview.
אזור חשבון (תשומת לב: לקוחות מהאיחוד האירופי)
אם החשבון שלך ממוקם באיחוד האירופי, הגדר region = 'eu' בתצורת הווידג'ט.
אחרת, אינך צריך להגדיר את region.
מצב תחזוקה
מרכיבים אלה הם עטיפות סביב רכיבי ה-VanillaJS המרכזיים שלנו. אנו יכולים לעדכן אוטומטית את המרכיבים האלה (לתקן באגים, להוסיף תכונות) ללא פרסום של ספריה זו, לכן למרות שייתכן שלא תתפרסם בתקופה מסוימת — זה לא אומר ש‑FastComments אינה בפיתוח פעיל! אתם מוזמנים לבדוק את הבלוג שלנו לעדכונים. שינויים מהותיים ב-API או תכונות שישברו תאימות לא ישולבו בספריית הליבה הבסיסית מבלי העלאת גרסה בספריה הזו.
זקוק לעזרה?
במידה ונתקלתם בבעיות או יש לכם שאלות לגבי ספריית React Native, אנא:
תרומה
תרומות מתקבלות בברכה! בקרו במאגר ה-GitHub לקבלת הנחיות לתרומה.