Add Comment Widgets to Your React Native App
Dit is de officiële React Native-bibliotheek voor FastComments.
Voeg live commentaar-, chat- en beoordelingswidgets toe aan je React Native-app.
Repository
Live demonstratie 
Om elke widget en flow lokaal tegen de publieke demo tenant te zien draaien, kloon de repo en voer het volgende uit:
yarn bootstrap
cd example
yarn ios # or: yarn android, yarn webHet toegangspunt van de showcase is example/src/ShowcaseApp.tsx — een enkele app die alle widgets, thema's en flows beschikbaar maakt.
Het yarn web-doel gebruikt react-native-web + react-native-web-webview (die de WebView als een iframe rendert). Handig voor snelle visuele smoke-tests in een browser; native-only WebView-API's zoals injectJavaScript en onShouldStartLoadWithRequest zullen op het web niet volledig werken.
Installatie
npm install react-native-webview --save
npm install fastcomments-react-native --saveOverweeg de native SDK
Deze bibliotheek gebruikt een webview rond de VanillaJS-bibliotheek.
FastComments ondersteunt nu een volledig native implementatie van onze client als onderdeel van fastcomments-react-native-sdk. Als je een volledig native implementatie wilt, kun je daar kijken.
Gebruik - De live reactie-widget
De API verschilt iets in vergelijking met fastcomments-react. Bij native geven we een config-object door dat de volgende structuur volgt.
import { FastCommentsCommentWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // Uw tenant-id. Kan worden opgehaald van https://fastcomments.com/auth/my-account/api-secret
const myAppPageId = 'native-test'; // De ID of URL van de commentdraad in uw app.
const myAppPageUrl = 'https://example.com/external-page'; // U kunt optioneel een URL instellen naar een externe pagina
const myAppPageTitle = 'Example Title'; // ... en u wilt waarschijnlijk een titel voor deze inhoud
const [config, setConfig] = useState({
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
});
// door setConfig() aan te roepen, kunnen we bijvoorbeeld de huidige pagina of de momenteel ingelogde gebruiker wijzigen
// Zie example/src/App.tsx
return (
<FastCommentsCommentWidget config={config}/>
);Gebruik - De live chat-widget
import { FastCommentsLiveChatWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // Uw tenant-id. Kan worden opgehaald van https://fastcomments.com/auth/my-account/api-secret
const myAppPageId = 'native-test'; // De ID of URL van de reactiedraad in uw app.
const myAppPageUrl = 'https://example.com/external-page'; // U kunt optioneel een URL instellen voor een externe pagina
const myAppPageTitle = 'Example Title'; // ... en u wilt waarschijnlijk een titel voor deze inhoud
const config = {
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
};
return (
<FastCommentsLiveChatWidget config={config}/>
);Gebruik - SSO
FastComments gebruikt HMAC voor beveiligde SSO. Om het te gebruiken, laat je backend het SSO-object (sso configuratie-eigenschap) maken en geef het door
aan de reactie-widget.
Voorbeelden voor verschillende backends vind je hier: https://github.com/FastComments/fastcomments-code-examples/tree/master/sso
Peer-afhankelijkheden
fastcomments-react-native vereist react-native-webview. Volg daarom de installatie-instructies voor react-native-webview.
Accountregio (LET OP: EU-klanten)
Als uw account zich in de EU bevindt, stel region = 'eu' in de configuratie van de widget in. Anders hoeft u region niet te definiëren.
Onderhoudsstatus
Deze componenten fungeren als wrappers rond onze kern-VanillaJS-componenten. We kunnen deze componenten automatisch bijwerken (bugs oplossen, functies toevoegen) zonder deze bibliotheek te publiceren, dus hoewel deze misschien een tijdje niet wordt gepubliceerd, betekent dat niet dat FastComments niet actief in ontwikkeling is! Bekijk gerust onze blog voor updates. Brekende API-wijzigingen of functies zullen nooit in de onderliggende kernbibliotheek worden doorgevoerd zonder een versieverhoging in deze bibliotheek.
Hulp nodig?
Als u problemen ondervindt of vragen heeft over de React Native-bibliotheek, kunt u:
Bijdragen
Bijdragen zijn welkom! Bezoek de GitHub repository voor richtlijnen voor bijdragen.