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-тестів у браузері; нативні 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. У нативній версії ми передаємо об'єкт конфігурації, який відповідає цій структурі.
import { FastCommentsCommentWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // Your tenant id. Can be fetched from https://fastcomments.com/auth/my-account/api-secret
const myAppPageId = 'native-test'; // the ID or URL of the comment thread in your app.
const myAppPageUrl = 'https://example.com/external-page'; // you can optional set a url to an external page
const myAppPageTitle = 'Example Title'; // ... and you probably want a title for this content
const [config, setConfig] = useState({
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
});
// by calling setConfig(), we can do things like change the current page, or the currently logged in user
// See example/src/App.tsx
return (
<FastCommentsCommentWidget config={config}/>
);Використання - віджет живого чату
import { FastCommentsLiveChatWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // ID вашого tenant'а. Можна отримати з 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 для отримання інструкцій щодо внесків.