Add Comment Widgets to Your React Native App
To jest oficjalna biblioteka React Native dla FastComments.
Osadź widgety komentowania na żywo, czatu i recenzji w swojej aplikacji React Native.
Repozytorium
Prezentacja na żywo 
Aby zobaczyć wszystkie widgety i flow działające lokalnie dla publicznego tenanta demo, sklonuj repozytorium i uruchom:
yarn bootstrap
cd example
yarn ios # or: yarn android, yarn webPunkt wejścia aplikacji demonstracyjnej to example/src/ShowcaseApp.tsx — pojedyncza aplikacja, która udostępnia wszystkie widgety, motywy i flow.
Opcja yarn web używa react-native-web + react-native-web-webview (które renderuje WebView jako iframe). Przydatne do szybkich wizualnych testów typu smoke w przeglądarce; natywne API WebView, takie jak injectJavaScript i onShouldStartLoadWithRequest, nie będą w pełni działać na webie.
Instalacja
npm install react-native-webview --save
npm install fastcomments-react-native --saveRozważ użycie natywnego SDK
Ta biblioteka używa webview wokół biblioteki VanillaJS.
FastComments teraz obsługuje w pełni natywną implementację naszego klienta w ramach fastcomments-react-native-sdk. Jeśli chcesz całkowicie natywnej implementacji, warto tam zajrzeć.
Użycie - widżet komentarzy na żywo
The API jest nieco inne w porównaniu do fastcomments-react. W wersji natywnej przekazujemy obiekt konfiguracyjny, który ma tę strukturę.
import { FastCommentsCommentWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // Twój tenant id. Można go pobrać z https://fastcomments.com/auth/my-account/api-secret
const myAppPageId = 'native-test'; // ID lub URL wątku komentarzy w Twojej aplikacji.
const myAppPageUrl = 'https://example.com/external-page'; // opcjonalnie możesz ustawić URL prowadzący do zewnętrznej strony
const myAppPageTitle = 'Example Title'; // ... i prawdopodobnie chcesz tytuł dla tej treści
const [config, setConfig] = useState({
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
});
// wywołując setConfig(), możemy robić rzeczy takie jak zmiana aktualnej strony lub aktualnie zalogowanego użytkownika
// Zobacz example/src/App.tsx
return (
<FastCommentsCommentWidget config={config}/>
);Użycie - widżet czatu na żywo
import { FastCommentsLiveChatWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // Twój tenant id. Można go pobrać z https://fastcomments.com/auth/my-account/api-secret
const myAppPageId = 'native-test'; // ID lub URL wątku komentarzy w Twojej aplikacji.
const myAppPageUrl = 'https://example.com/external-page'; // możesz opcjonalnie ustawić URL do zewnętrznej strony
const myAppPageTitle = 'Example Title'; // ... i prawdopodobnie będziesz chciał tytuł dla tej treści
const config = {
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
};
return (
<FastCommentsLiveChatWidget config={config}/>
);Użycie - SSO
FastComments używa HMAC do bezpiecznego SSO. Aby korzystać, skonfiguruj swój backend tak, aby utworzył obiekt SSO (sso właściwość konfiguracyjna) i przekaż go
do widżetu komentarzy.
Możesz znaleźć przykłady dla różnych backendów tutaj: https://github.com/FastComments/fastcomments-code-examples/tree/master/sso
Zależności równorzędne
fastcomments-react-native wymaga react-native-webview. Należy więc wykonać kroki instalacyjne dla react-native-webview.
Region konta (UWAGA: klienci z UE)
Jeśli Twoje konto znajduje się w UE, ustaw region = 'eu' w konfiguracji widżetu.
W przeciwnym razie nie musisz definiować region.
Status utrzymania
Te komponenty są nakładkami na nasze podstawowe komponenty VanillaJS. Możemy automatycznie aktualizować te komponenty (naprawiać błędy, dodawać funkcje) bez publikowania tej biblioteki, więc chociaż może ona nie być opublikowana przez jakiś czas, to nie oznacza, że FastComments nie jest aktywnie rozwijany! Zachęcamy do sprawdzenia naszego bloga w celu uzyskania aktualizacji. Zmiany łamiące zgodność API lub nowe funkcje nigdy nie zostaną wprowadzone do podstawowej biblioteki bez podniesienia wersji tej biblioteki.
Potrzebujesz pomocy?
Jeśli napotkasz jakiekolwiek problemy lub masz pytania dotyczące biblioteki React Native, prosimy:
Współtworzenie
Zachęcamy do współpracy! Odwiedź repozytorium GitHub po wytyczne dotyczące współtworzenia.