Add Comment Widgets to Your React Native App
Это официальная библиотека React Native для FastComments.
Встраивайте виджеты живых комментариев, чата и обзоров в ваше приложение на React Native.
Репозиторий
Демонстрация в реальном времени 
Чтобы увидеть все виджеты и потоки, запускающиеся локально против публичного тенанта demo, клонируйте репозиторий и выполните:
yarn bootstrap
cd example
yarn ios # или: yarn android, yarn webТочка входа демонстрации — example/src/ShowcaseApp.tsx — единое приложение, которое предоставляет все виджеты, темы и потоки.
Цель yarn web использует react-native-web + react-native-web-webview (которые рендерят WebView как iframe). Полезно для быстрых визуальных smoke-тестов в браузере; WebView API, доступные только в нативной среде, такие как injectJavaScript и onShouldStartLoadWithRequest, не будут полностью работать в вебе.
Установка
npm install react-native-webview --save
npm install fastcomments-react-native --saveРассмотрите возможность использования нативного SDK
Эта библиотека использует webview поверх библиотеки VanillaJS.
FastComments теперь поддерживает полностью нативную реализацию нашего клиента в составе fastcomments-react-native-sdk. Если вам нужна полностью нативная реализация, стоит посмотреть туда.
Использование — виджет комментариев в реальном времени
The 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'; // 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 requires react-native-webview. As such, you should follow the installation steps for react-native-webview.
Регион аккаунта (ВНИМАНИЕ: клиенты ЕС)
Если ваш аккаунт находится в ЕС, установите region = 'eu' в конфигурации виджета.
В противном случае вам не нужно определять region.
Статус поддержки
Эти компоненты являются оболочками над нашими основными компонентами VanillaJS. Мы можем автоматически обновлять эти компоненты (исправлять ошибки, добавлять функции) без публикации этой библиотеки, поэтому, хотя она может некоторое время не публиковаться, это не означает, что FastComments не находится в активной разработке! Не стесняйтесь проверять наш блог на предмет обновлений. Нарушающие совместимость изменения API или новые функции никогда не будут внесены в лежащую в основе библиотеку ядра без повышения версии этой библиотеки.
Нужна помощь?
Если вы столкнулись с проблемами или у вас есть вопросы по библиотеке React Native, пожалуйста:
Вклад
Вклады приветствуются! Пожалуйста, посетите репозиторий GitHub для получения инструкций по внесению вклада.