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). Полезно за бързи визуални тестове в браузър; native-only WebView APIs като injectJavaScript и onShouldStartLoadWithRequest няма да се държат напълно еднакво в уеб.
Инсталиране
npm install react-native-webview --save
npm install fastcomments-react-native --saveРазгледайте Native 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 за указания относно приноса.