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