Προσθέστε σχόλια στην εφαρμογή 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 παραμένει σημειωμένη ως πειραματική upstream.

Στοιχεία

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

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

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

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

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

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

Η σκοτεινή λειτουργία είναι ένα σύνολο διακριτικών μακριά:

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

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

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

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

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

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

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

Έννοιες FastComments

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

Τοπικοποίηση

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

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

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

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

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

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

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

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

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

Περιηγητής Gif

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

Απόδοση

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