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

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

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

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

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

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

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

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

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

Γραφικά Στοιχεία

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

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

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

Θέματα

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

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

Το σκοτεινό θέμα (dark mode) απέχει ένα σύνολο tokens:

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

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

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

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

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

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

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

Έννοιες FastComments

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

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

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

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

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

Περιηγητής GIF

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

Απόδοση

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