Add Comment Widgets to Your React Native App
Αυτή είναι η επίσημη βιβλιοθήκη React Native για το FastComments.
Ενσωματώστε widgets ζωντανών σχολίων, συνομιλίας και αξιολογήσεων στην εφαρμογή React Native σας.
Αποθετήριο
Ζωντανή Επίδειξη 
Για να δείτε κάθε widget και flow να τρέχει τοπικά ενάντια στο δημόσιο demo tenant, κλωνοποιήστε το repo και εκτελέστε:
yarn bootstrap
cd example
yarn ios # or: yarn android, yarn webΤο σημείο εισόδου του showcase είναι το example/src/ShowcaseApp.tsx — μια ενιαία εφαρμογή που εκθέτει όλα τα widgets, themes, και flows.
Ο στόχος yarn web χρησιμοποιεί react-native-web + react-native-web-webview (που αποδίδει το WebView ως iframe). Χρήσιμο για γρήγορους οπτικούς smoke tests σε έναν browser· native-only WebView APIs όπως injectJavaScript και onShouldStartLoadWithRequest δεν θα συμπεριφέρονται πλήρως στο web.
Εγκατάσταση
npm install react-native-webview --save
npm install fastcomments-react-native --saveΕξετάστε το Native SDK
Αυτή η βιβλιοθήκη χρησιμοποιεί ένα webview γύρω από τη βιβλιοθήκη VanillaJS.
Το FastComments πλέον υποστηρίζει μια εντελώς εγγενή υλοποίηση του πελάτη μας ως μέρος του fastcomments-react-native-sdk. Αν θέλετε μια εντελώς εγγενή υλοποίηση, ίσως θελήσετε να ρίξετε μια ματιά εκεί.
Χρήση - Το ζωντανό στοιχείο σχολίων
Το API είναι ελαφρώς διαφορετικό σε σύγκριση με fastcomments-react. Στην native έκδοση, περνάμε ένα αντικείμενο config το οποίο ακολουθεί αυτή τη δομή.
import { FastCommentsCommentWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // Το tenant id σας. Μπορεί να ανακτηθεί από 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, 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'; // Το tenant id σας. Μπορεί να ανακτηθεί από 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. Για να το χρησιμοποιήσετε, ζητήστε από το backend σας να δημιουργήσει το αντικείμενο SSO (sso ιδιότητα ρυθμίσεων) και να το περάσει
στο widget σχολίων.
Μπορείτε να βρείτε παραδείγματα για διάφορα backend, εδώ: https://github.com/FastComments/fastcomments-code-examples/tree/master/sso
Εξαρτήσεις Peer
fastcomments-react-native απαιτεί react-native-webview. Ως εκ τούτου, θα πρέπει να ακολουθήσετε τα βήματα εγκατάστασης για react-native-webview.
Περιοχή Λογαριασμού (ΠΡΟΣΟΧΗ: Πελάτες ΕΕ)
Εάν ο λογαριασμός σας βρίσκεται στην ΕΕ, ορίστε region = 'eu' στη διαμόρφωση του widget.
Διαφορετικά, δεν χρειάζεται να ορίσετε το region.
Κατάσταση Συντήρησης
Αυτά τα συστατικά είναι περιτυλίγματα γύρω από τα βασικά συστατικά του VanillaJS. Μπορούμε να ενημερώνουμε αυτόματα αυτά τα συστατικά (διόρθωση σφαλμάτων, προσθήκη λειτουργιών) χωρίς να δημοσιεύσουμε αυτή τη βιβλιοθήκη, οπότε το γεγονός ότι μπορεί να μην έχει κυκλοφορήσει για λίγο δεν σημαίνει ότι το FastComments δεν βρίσκεται υπό ενεργή ανάπτυξη! Μη διστάσετε να επισκεφθείτε το ιστολόγιό μας για ενημερώσεις. Αλλαγές που σπάνε το API ή νέες δυνατότητες δεν θα αποσταλούν ποτέ στην υποκείμενη βασική βιβλιοθήκη χωρίς αύξηση έκδοσης σε αυτή τη βιβλιοθήκη.
Χρειάζεστε βοήθεια;
Εάν αντιμετωπίσετε οποιαδήποτε προβλήματα ή έχετε ερωτήσεις σχετικά με τη Βιβλιοθήκη React Native, παρακαλώ:
Συνεισφορές
Οι συνεισφορές είναι ευπρόσδεκτες! Παρακαλώ επισκεφθείτε το αποθετήριο GitHub για οδηγίες σχετικά με τη συνεισφορά.