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

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

Ζωντανή σχηματοποιημένη σχολιαστική λειτουργία με avatars, εμφωλευμένες απαντήσεις, ψήφους και τον ενσωματωμένο συντάκτη μορφοποιημένου κειμένου, καθώς και ένα σκοτεινό θέμα και ένα preset ζωντανής συνομιλίας (εμφανίζεται εδώ αποδοσμένο μέσω react-native-web):

Ζωντανά Σχόλια

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

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

Συντάκτης Μορφοποιημένου Κειμένου

Αυτή η βιβλιοθήκη χρησιμοποιεί react-native-enriched για την επεξεργασία μορφοποιημένου κειμένου, που παρέχει μια ισχυρή WYSIWYG εμπειρία επεξεργασίας. Ο ίδιος επεξεργαστής τροφοδοτεί iOS, Android και τον ιστό (μέσω 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. Ο ίδιος επεξεργαστής τρέχει επίσης στον ιστό μέσω του react-native-web; το web build του enriched επεξεργαστή εξακολουθεί να χαρακτηρίζεται πειραματικό από το upstream.

Widgets

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

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

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

Θεματοποίηση

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

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

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

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

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

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

Επιλογές Διαμόρφωσης

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

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

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

Βασικές έννοιες FastComments

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

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

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

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

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

Περιηγητής GIF

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

Επιδόσεις

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