Добавление комментариев в приложение на React Native

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

Живые потоковые комментарии с аватарами, вложенными ответами, голосованиями и встроенным редактором с rich-text, плюс тёмная тема и пресет живого чата (здесь показано, отрисованное через react-native-web):

Живые комментарии

Тёмная тема

Живой чат

Редактор с поддержкой богатого текста

Эта библиотека использует react-native-enriched для редактирования богатого текста, что обеспечивает мощный WYSIWYG-опыт. Тот же самый редактор работает на iOS, Android и в вебе (через react-native-web), поэтому композер ведёт себя одинаково на всех платформах при единой реализации.

react-native-enriched требует React Native New Architecture (Fabric) на нативе (по умолчанию с RN 0.76, опционально в RN 0.72-0.75), и бандлера, который разрешает условия экспорта пакетов. Этот 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, сколько комментариев рендерятся выше переключателя «Показать комментарии».
• preserveFeedScrollPosition - FastCommentsFeed запоминает своё смещение прокрутки при размонтировании/повторном монтировании (по умолчанию true).

Концепции FastComments

Основные понятия, которые нужно знать для начала работы — это tenantId и urlId. tenantId — это идентификатор вашей учётной записи на FastComments.com. urlId определяет, к чему будут привязаны потоки комментариев. Это может быть URL страницы, идентификатор продукта, идентификатор статьи и т.д.

Уведомления пользователей

FastComments поддерживает уведомления для многих сценариев. Уведомления настраиваются, можно отказаться от них глобально или на уровне конкретного уведомления/комментария, и поддерживаются подписки на уровне страницы, чтобы пользователи могли подписываться на потоки конкретной страницы или статьи.

Например, возможно использовать Secure SSO для аутентификации пользователя, а затем периодически опрашивать наличие непрочитанных уведомлений и отправлять их пользователю.

См. пример AppNotificationSecureSSO, чтобы узнать, как получить и транслировать непрочитанные уведомления пользователя.

GIF-браузер

По умолчанию выбор изображений и GIF не включён. См. example/src/AppCommentingImageSelection.tsx для примера, как поддерживать загрузку изображений и GIF. В этой библиотеке есть Gif-браузер, который анонимизирует поисковые запросы и изображения, предоставляемые пользователями — вам просто нужно его использовать.

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

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