Add Comment Widgets to Your React Native App
Это официальная библиотека React Native для FastComments.
Встраивайте виджеты для живых комментариев, чата и отзывов в ваше приложение на React Native.
Репозиторий
Демонстрация в реальном времени 
Чтобы увидеть все виджеты и потоки, работающие локально с публичным тенантом demo, клонируйте репозиторий и выполните:
yarn bootstrap
cd example
yarn ios # or: yarn android, yarn webТочка входа демонстрации — example/src/ShowcaseApp.tsx — единое приложение, которое предоставляет все виджеты, темы и потоки.
Цель yarn web использует react-native-web + react-native-web-webview (которые рендерят WebView как iframe). Полезно для быстрых визуальных smoke-тестов в браузере; нативные API WebView, такие как injectJavaScript и onShouldStartLoadWithRequest, не будут полностью работать в вебе.
Установка
npm install react-native-webview --save
npm install fastcomments-react-native --saveРассмотрите нативный SDK
Эта библиотека использует webview поверх библиотеки VanillaJS.
FastComments теперь поддерживает полностью нативную реализацию нашего клиента в составе fastcomments-react-native-sdk. Если вам нужна полностью нативная реализация, вам стоит посмотреть туда.
Использование — виджет комментариев в реальном времени
API немного отличается по сравнению с fastcomments-react. В нативной версии мы передаём объект config, который соответствует этой структуре.
import { FastCommentsCommentWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // Ваш tenant id. Можно получить с https://fastcomments.com/auth/my-account/api-secret
const myAppPageId = 'native-test'; // ID или URL потока комментариев в вашем приложении.
const myAppPageUrl = 'https://example.com/external-page'; // вы можете опционально задать url внешней страницы
const myAppPageTitle = 'Example Title'; // ... и, вероятно, вам нужен заголовок для этого контента
const [config, setConfig] = useState({
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
});
// вызывая setConfig(), мы можем делать такие вещи, как смена текущей страницы или текущего вошедшего пользователя
// Смотрите example/src/App.tsx
return (
<FastCommentsCommentWidget config={config}/>
);Использование — виджет чата в реальном времени
import { FastCommentsLiveChatWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // Ваш tenant id. Его можно получить с https://fastcomments.com/auth/my-account/api-secret
const myAppPageId = 'native-test'; // ID или URL потока комментариев в вашем приложении.
const myAppPageUrl = 'https://example.com/external-page'; // можно при желании указать URL внешней страницы
const myAppPageTitle = 'Example Title'; // ... и, вероятно, вы захотите заголовок для этого контента
const config = {
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
};
return (
<FastCommentsLiveChatWidget config={config}/>
);Использование — единый вход (SSO)
FastComments использует HMAC для безопасного SSO. Чтобы использовать, пусть ваш бэкенд создаст объект SSO (sso свойство конфигурации) и передаст его виджету комментариев.
Вы можете найти примеры для различных бэкендов здесь: https://github.com/FastComments/fastcomments-code-examples/tree/master/sso
Peer-зависимости
fastcomments-react-native требует react-native-webview. Поэтому выполните шаги установки для react-native-webview.
Регион аккаунта (ВНИМАНИЕ: клиенты из ЕС)
Если ваш аккаунт находится в ЕС, установите region = 'eu' в конфигурации виджета.
В противном случае вам не нужно определять region.
Статус поддержки
Эти компоненты являются обёртками вокруг наших основных компонентов на VanillaJS. Мы можем автоматически обновлять эти компоненты (исправлять ошибки, добавлять функции) без публикации этой библиотеки, поэтому то, что она может некоторое время не публиковаться, не означает, что FastComments не находится в активной разработке! Не стесняйтесь заглядывать в наш блог за обновлениями. Изменения API, нарушающие обратную совместимость, или новые возможности никогда не будут добавлены в основную библиотеку без повышения версии этой библиотеки.
Нужна помощь?
Если вы столкнулись с какими-либо проблемами или у вас есть вопросы по библиотеке React Native, пожалуйста:
Участие
Вклады приветствуются! Пожалуйста, посетите репозиторий на GitHub для ознакомления с руководством по внесению вкладов.