Add Comment Widgets to Your React Native App
Dies ist die offizielle React Native-Bibliothek für FastComments.
Betten Sie Live-Kommentare, Chat- und Bewertungs-Widgets in Ihre React Native-App ein.
Repository
Live-Demo 
Um jedes Widget und jeden Flow lokal gegen den öffentlichen demo Tenant auszuführen, klone das Repository und führe aus:
yarn bootstrap
cd example
yarn ios # or: yarn android, yarn webDer Einstiegspunkt der Showcase ist example/src/ShowcaseApp.tsx — eine einzelne App, die alle Widgets, Themes und Flows bereitstellt.
Das yarn web-Ziel verwendet react-native-web + react-native-web-webview (welches die WebView als ein iframe rendert). Nützlich für schnelle visuelle Smoke-Tests im Browser; nur auf nativen Plattformen verfügbare WebView-APIs wie injectJavaScript und onShouldStartLoadWithRequest verhalten sich im Web nicht vollständig gleich.
Installation
npm install react-native-webview --save
npm install fastcomments-react-native --saveDas native SDK in Betracht ziehen
Diese Bibliothek verwendet eine Webview um die VanillaJS-Bibliothek herum.
FastComments unterstützt jetzt eine vollständig native Implementierung unseres Clients als Teil von fastcomments-react-native-sdk. Wenn Sie eine vollständig native Implementierung wünschen, sollten Sie sich das dort ansehen.
Verwendung - Das Live-Kommentar-Widget
Die API unterscheidet sich leicht von fastcomments-react. Bei der nativen Version übergeben wir ein Konfigurationsobjekt, das dieser Struktur folgt.
import { FastCommentsCommentWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // Ihre Tenant-ID. Kann von https://fastcomments.com/auth/my-account/api-secret abgerufen werden
const myAppPageId = 'native-test'; // Die ID oder URL des Kommentar-Threads in Ihrer App.
const myAppPageUrl = 'https://example.com/external-page'; // optional können Sie eine URL zu einer externen Seite angeben
const myAppPageTitle = 'Example Title'; // ... und Sie möchten wahrscheinlich einen Titel für diesen Inhalt
const [config, setConfig] = useState({
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
});
// Durch Aufrufen von setConfig() können wir z. B. die aktuelle Seite oder den aktuell angemeldeten Benutzer ändern
// Siehe example/src/App.tsx
return (
<FastCommentsCommentWidget config={config}/>
);Verwendung - Das Live-Chat-Widget
import { FastCommentsLiveChatWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // Ihre Tenant-ID. Kann von https://fastcomments.com/auth/my-account/api-secret abgerufen werden
const myAppPageId = 'native-test'; // Die ID oder URL des Kommentarthreads in Ihrer App.
const myAppPageUrl = 'https://example.com/external-page'; // Sie können optional eine URL zu einer externen Seite angeben
const myAppPageTitle = 'Example Title'; // ... und Sie möchten wahrscheinlich einen Titel für diesen Inhalt
const config = {
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
};
return (
<FastCommentsLiveChatWidget config={config}/>
);Verwendung - SSO
FastComments verwendet HMAC für sicheres SSO. Um es zu verwenden, lassen Sie Ihr Backend das SSO-Objekt (sso Konfigurations-Eigenschaft) erstellen und übergeben Sie es
an das Kommentar-Widget.
Sie können Beispiele für verschiedene Backends finden, hier: https://github.com/FastComments/fastcomments-code-examples/tree/master/sso
Peer-Abhängigkeiten
fastcomments-react-native benötigt react-native-webview. Folgen Sie daher den Installationsschritten für react-native-webview.
Kontoregion (ACHTUNG: EU-Kunden)
Wenn Ihr Konto in der EU angesiedelt ist, setzen Sie region = 'eu' in der Widget-Konfiguration.
Andernfalls müssen Sie region nicht definieren.
Wartungsstatus
Diese Komponenten sind Wrapper um unsere Kern-VanillaJS-Komponenten. Wir können diese Komponenten automatisch aktualisieren (Fehler beheben, Funktionen hinzufügen), ohne diese Bibliothek neu zu veröffentlichen, sodass es, auch wenn sie möglicherweise eine Weile nicht veröffentlicht wird, nicht bedeutet, dass FastComments nicht aktiv weiterentwickelt wird! Schauen Sie gern in unserem Blog nach Updates. Kompatibilitätsbrechende API-Änderungen oder neue Funktionen werden niemals in die zugrunde liegende Kernbibliothek ausgeliefert, ohne dass diese Bibliothek eine Versionsanhebung erhält.
Benötigen Sie Hilfe?
Wenn Sie auf Probleme stoßen oder Fragen zur React Native-Bibliothek haben, bitte:
Mitwirken
Beiträge sind willkommen! Bitte besuchen Sie das GitHub-Repository für Richtlinien zur Mitarbeit.