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

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

Эта библиотека — полноценная реализация FastComments для react-native.

Она поддерживает комментарии в реальном времени, чат, треды, смайлики, уведомления, SSO, скины и полную настройку через передачу объекта стилей. Все ресурсы также могут быть настроены, и поддерживается переключение различных ресурсов в зависимости от тёмного режима.

Преимущество этой библиотеки в том, что она более гибкая, чем обёртка fastcomments-react-native. Комментарии отрисовываются нативными компонентами, а не внутри webview.

Всё работает на бэкенде FastComments, поэтому вам нужно интегрировать только пользовательский интерфейс:

<FastCommentsLiveCommenting config={config} styles={styles} callbacks={callbacks} assets={assets}/>

См. example/src для дополнительных примеров.

Добавьте чат в реальном времени в ваше существующее приложение React Native или даже создайте социальную сеть!

Живая дискуссия с ветвлением комментариев, аватарами, вложенными ответами, голосованиями и встроенным WYSIWYG-композером для форматированного текста, плюс тёмная тема и пресет живого чата (здесь показано через 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 страницы, либо id продукта, id статьи и т.д.

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

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

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

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

Просмотрщик GIF

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

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

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