Προσθέστε σχόλια στην εφαρμογή React Native σας

npm install fastcomments-react-native-sdk --save

Live threaded commenting with avatars, nested replies, votes, and the built-in rich-text composer, plus a dark theme and a live-chat preset (shown here rendered via react-native-web):

Ζωντανός Σχολιασμός

Σκοτεινό Θέμα

Ζωντανή Συνομιλία

Επεξεργαστής Πλούσιου Κειμένου

Αυτή η βιβλιοθήκη χρησιμοποιεί react-native-enriched για επεξεργασία πλούσιου κειμένου, προσφέροντας μια ισχυρή εμπειρία επεξεργασίας WYSIWYG. Ο ίδιος επεξεργαστής τροφοδοτεί iOS, Android και το web (μέσω react-native-web), έτσι ο συνθέτης συμπεριφέρεται σταθερά σε κάθε πλατφόρμα με μια μόνο υλοποίηση.

react-native-enriched απαιτεί τη νέα αρχιτεκτονική του React Native (Fabric) σε native (η προεπιλογή από RN 0.76, επιλογή σε RN 0.72‑0.75), και έναν bundler που επιλύει τις συνθήκες exports του πακέτου. Αυτό το SDK αναπτύσσεται και δοκιμάζεται εναντίον RN 0.81 / React 19. Ο ίδιος επεξεργαστής λειτουργεί επίσης στο web μέσω react-native-web; η web έκδοση του enriched editor παραμένει πειραματική στην πηγή.

Συστατικά (Widgets)

Το SDK περιλαμβάνει τρία widgets, αντικατοπτρίζοντας το FastComments Android SDK:

• FastCommentsLiveCommenting – ενθυγραμμισμένος σχολιασμός με ψήφους, απαντήσεις, σελιδοποίηση, αναφορές, ειδοποιήσεις και ζωντανές ενημερώσεις.
• FastCommentsLiveChat – μια προεπιλογή συνομιλίας πάνω στον ίδιο μηχανισμό: χρονολογικά μηνύματα με τα καινούργια στο κάτω μέρος, ο συνθέτης κάτω από τη λίστα, μια ζωντανή μπάρα κεφαλίδας (σημαία σύνδεσης + αριθμός χρηστών), άπειρο ιστορικό που φορτώνεται με κύλιση προς τα πάνω, αυτόματη κύλιση στα νέα μηνύματα, χωρίς ψήφους ή δένδρο απαντήσεων. Κάθε προεπιλογή μπορεί να παρακάμψετε μέσω config.
• FastCommentsFeed – κοινωνικό feed με συνθέτη ανάρτησης, πολυμέσα, αντιδράσεις, ακολούθους και ζωντανά banner νέων αναρτήσεων.

<FastCommentsLiveChat config=\{{ tenantId: 'demo', urlId: 'my-room' }}/>

Θεματοποίηση (Theming)

Η προεπιλεγμένη εμφάνιση δημιουργείται από ένα σύνολο σημασιολογικών tokens σχεδίασης (FastCommentsTheme): χρώματα, αποστάσεις, ακτίνες, μεγέθη γραμματοσειρών, βάρη γραμματοσειρών και μεγέθη άβαταρ. Περνάτε μερικές παραβιάσεις token (τυπώνονται FastCommentsThemeOverrides) μέσω της ιδιότητας theme σε οποιοδήποτε widget και όλο το δέντρο στυλ επανασχεδιάζεται σταθερά:

<FastCommentsLiveCommenting config={config} theme=\{{ colors: { primary: '#FF5500' } }}/>

Το σκοτεινό θέμα είναι ένα σύνολο token μακριά:

import { getDarkTheme } from 'fastcomments-react-native-sdk';

    <FastCommentsLiveCommenting config={config} theme={getDarkTheme()}/>

Η ιδιότητα styles εξακολουθεί να δέχεται ένα ακατέργαστο δέντρο IFastCommentsStyles για χειρουργικό έλεγχο. Όταν παρέχονται και theme και styles, τα ρητά στυλ προτιμούνται πάνω από το δέντρο θεματισμού· όταν παρέχονται μόνο styles, αντικαθιστούν εντελώς τις προεπιλογές (συμπεριφορά όπως αρχικά, ώστε υπάρχουσες ενσωματώσεις και skins να παραμένουν αμετάβλητες). Το setupDarkModeSkin θεωρείται παρωχημένο υπέρ της ιδιότητας theme.

Επιλογές Ρυθμίσεων (Configuration Options)

Αυτή η βιβλιοθήκη στοχεύει να υποστηρίξει όλες τις επιλογές ρυθμίσεων που ορίζονται στο fastcomments-typescript, όπως και η υλοποίηση web.

Πέραν αυτών, το React Native προσθέτει μερικές επιλογές ειδικές για το SDK μέσω FastCommentsRNConfig:

• hideTopBar – κρύβει τη γραμμή του συνδεδεμένου χρήστη / καμπανάκι ειδοποιήσεων που εμφανίζεται πάνω από τον συνθέτη.
• usePressToEdit – πάτημα‑και‑κρατημένο σε σχόλιο για άνοιγμα του μενού του.
• disableDownVoting – κρύβει τα κουμπιά καταψήφου.
• renderCommentInline – αποδίδει τις πληροφορίες του σχολιαστή μέσα στο ίδιο HTML μπλοκ με το περιεχόμενο του σχολίου.
• renderLikesToRight – μετακινεί την περιοχή ψήφου/μουτρακιού δεξιά του σχολίου αντί κάτω από αυτό.
• renderDateBelowComment – αποδίδει την ημερομηνία κάτω από το σχόλιο.
• showLiveStatus – εμφανίζει τη μπάρα κεφαλίδας τύπου chat «Live» + αριθμός χρηστών πάνω από τα σχόλια.
• useInlineSubmitButton – αποδίδει το κουμπί υποβολής ως εικονίδιο μέσα στον συνθέτη.
• countAboveToggle – με useShowCommentsToggle, πόσα σχόλια αποδίδονται πάνω από το κουμπί «Show Comments».
• preserveFeedScrollPosition – το FastCommentsFeed θυμάται τη θέση κύλισης του μεταξύ αποσυναρμολόγησης/επανασυναρμολόγησης (προεπιλογή true).

Έννοιες FastComments

Οι κύριες έννοιες που πρέπει να γνωρίζετε για να ξεκινήσετε είναι tenantId και urlId. Το tenantId είναι το αναγνωριστικό του λογαριασμού σας στο FastComments.com. Το urlId είναι στο οποίο δεσμεύονται οι νήματα σχολίων. Αυτό μπορεί να είναι μια διεύθυνση σελίδας, ή ένα αναγνωριστικό προϊόντος, ένα αναγνωριστικό άρθρου κ.λπ.

Τοπικοποίηση (Localization)

Όλο το κείμενο που βλέπουν οι χρήστες σε αυτά τα widgets (ετικέτες κουμπιών, placeholders, κενές καταστάσεις, σχετικές ημερομηνίες όπως «5 minutes ago», μηνύματα σφαλμάτων κ.λπ.) είναι ψηφιακά ελεγχόμενο από τον διακομιστή. Τα συστατικά δεν περιλαμβάνουν σκληρά κωδικοποιημένες αγγλικές συμβολοσειρές· αποδίδουν τις μεταφράσεις που παρέχει το FastComments για το ζητούμενο locale.

Για να ζητήσετε locale, ορίστε locale στη διαμόρφωσή σας:

const config = {
    tenantId: 'your-tenant-id',
    urlId: 'some-page',
    locale: 'de_de', // de_de, fr_fr, ja_jp, es_es, κ.λπ.
};

Όταν δεν ορίζεται locale, το FastComments εξυπηρετεί τη προεπιλεγμένη γλώσσα του ενοικιαστή.

Επεξεργασία του κειμένου: οι μεταφράσεις διαχειρίζονται στον πίνακα ελέγχου του FastComments, όχι σε αυτό το SDK. Για να αλλάξετε τη διατύπωση, παρακάμψτε το προεπιλεγμένο κείμενο ή προσθέστε μια γλώσσα, επεξεργαστείτε τις μεταφράσεις για τον λογαριασμό σας στον πίνακα ελέγχου – η αλλαγή εφαρμόζεται αυτόματα στα widgets χωρίς να απαιτείται έκδοση εφαρμογής. Το SDK δεν παρέχει εναλλακτικές αγγλικές εκδόσεις· έτσι οποιοδήποτε κλειδί αφήνετε κενό στον πίνακα ελέγχου εμφανίζεται κενό· διασφαλίστε ότι τα κλειδιά είναι συμπληρωμένα για κάθε locale που υποστηρίζετε.

Ειδοποιήσεις Χρηστών

Το FastComments υποστηρίζει ειδοποιήσεις για πολλές καταστάσεις. Οι ειδοποιήσεις είναι παραμετροποιήσιμες, μπορούν να απενεργοποιηθούν παγκοσμίως ή σε επίπεδο ειδοποίησης/σχολίου, και υποστηρίζουν συνδρομές σε επίπεδο σελίδας ώστε οι χρήστες να μπορούν να εγγραφούν σε νήματα μιας συγκεκριμένης σελίδας ή άρθρου.

Για παράδειγμα, είναι δυνατό να χρησιμοποιήσετε Secure SSO για πιστοποίηση του χρήστη και κατόπιν περιοδικά να ελέγχετε για αδιάβαστες ειδοποιήσεις και να τις στέλνετε στον χρήστη.

Δείτε το παράδειγμα AppNotificationSecureSSO για το πώς να λαμβάνετε και να μεταφράζετε αδιάβαστες ειδοποιήσεις χρηστών.

Περιηγητής GIF

Από προεπιλογή, δεν ενεργοποιείται καμία επιλογή εικόνας ή GIF. Δείτε το example/src/AppCommentingImageSelection.tsx για το πώς να υποστηρίξετε ανέβασμα εικόνων και GIF. Υπάρχει ένας Περιηγητής GIF που ανωνυμοποιεί τις αναζητήσεις και τις εικόνες που παρέχονται σε αυτή τη βιβλιοθήκη· αρκεί να τον χρησιμοποιήσετε.

Απόδοση (Performance)

Παρακαλούμε ανοίξτε ένα ticket με παράδειγμα για αναπαραγωγή, συμπεριλαμβανομένης της συσκευής που χρησιμοποιήθηκε, εάν εντοπίσετε πρόβλημα απόδοσης. Η απόδοση είναι πρώτης τάξεως πολίτης όλων των βιβλιοθηκών FastComments.