Добавяне на коментари към вашето 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 и уеб (чрез 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; уеб версията на enriched редактора все още е маркирана като експериментална в upstream.

Уиджети

SDK‑т предоставя три уиджета, отразяващи FastComments Android SDK:

• FastCommentsLiveCommenting - нишкови коментари с гласуване, отговори, пагинация, споменавания, известия и живи актуализации.
• FastCommentsLiveChat - чат предварително зададен върху същия двигател: хронологични съобщения с новите в долната част, композитор под списъка, жива лента в заглавието (точка за връзка + брой потребители), безкрайна история, зареждана при превъртане нагоре, автоматично превъртане към нови съобщения, без гласуване или нишково отговаряне. Всеки предварително зададен може да бъде заменен чрез config.
• FastCommentsFeed - социален поток с композитор за публикации, медия, реакции, последвания и живи банери за нови публикации.

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

Теми

Подразбираният вид се генерира от набор семантични дизайн токени (FastCommentsTheme): цветове, разстояния, радиус, размери на шрифтове, тегла на шрифтове и размери на аватари. Предайте частични замени на токени (тип 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, той заменя напълно подразбиращите се (оригиналното поведение, така че съществуващите интеграции и скинове не са засегнати). setupDarkModeSkin е остарял в полза на пропса theme.

Опции за конфигурация

Тази библиотека се стреми да поддържа всички опции за конфигурация, дефинирани в fastcomments-typescript, точно както уеб имплементацията.

В допълнение към тях, React Native добавя няколко специфични за SDK опции чрез FastCommentsRNConfig:

• hideTopBar - скрива лентата с влезлия потребител / известия, показана над композитора.
• usePressToEdit - натиснете и задръжте коментар, за да отворите неговото меню.
• disableDownVoting - скрива бутоните за отрицателно гласуване.
• renderCommentInline - изобразява информацията за коментатора в същия HTML блок като съдържанието на коментара.
• renderLikesToRight - премества областта за гласуване/харесване вдясно от коментара вместо под него.
• renderDateBelowComment - изобразява датата под коментара.
• showLiveStatus - показва чат-стил лентата в заглавието с „Live“ + брой потребители над коментарите.
• useInlineSubmitButton - изобразява бутона за изпращане като икона в композитора.
• countAboveToggle - с useShowCommentsToggle, колко коментара се изобразяват над превключвателя „Show Comments“.
• preserveFeedScrollPosition - FastCommentsFeed запомня позицията на превъртане при демонтиране/премонтиране (по подразбиране true).

Концепции на FastComments

Основните концепции, които трябва да знаете, за да започнете, са tenantId и urlId. tenantId е идентификаторът на вашия акаунт в FastComments.com. urlId е към какво ще бъдат привързани нишките от коментари. Това може да бъде URL на страница, идентификатор на продукт, идентификатор на статия и т.н.

Локализация

Всички текстове, видими за потребителя, в тези уиджети (етикети на бутони, плейсхолдъри, състояния при празно съдържание, относителни дати като „преди 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 браузър, който анонимизира търсенията и изображенията, предоставени в тази библиотека; просто трябва да го използвате.

Производителност

Моля, отворете тикет с пример за възпроизвеждане, включително използваното устройство, ако откриете проблеми с производителността. Производителността е приоритетен аспект на всички библиотеки на FastComments.