Add Comment Widgets to Your React Native App
Dette er det officielle React Native-bibliotek til FastComments.
Integrer live-kommentarer, chat og anmeldelses-widgets i din React Native-app.
Repository
Live-demo 
For at se alle widgets og flows kørende lokalt mod den offentlige demo tenant, klon repositoriet og kør:
yarn bootstrap
cd example
yarn ios # or: yarn android, yarn webShowcase-entrépunktet er example/src/ShowcaseApp.tsx — en enkelt app, der eksponerer alle widgets, temaer og flows.
Målet yarn web bruger react-native-web + react-native-web-webview (som gengiver WebView som en iframe). Nyttigt til hurtige visuelle smoke-tests i en browser; native-only WebView APIs som injectJavaScript og onShouldStartLoadWithRequest vil ikke opføre sig fuldt ud på web.
Installation
npm install react-native-webview --save
npm install fastcomments-react-native --saveOvervej det native SDK
Dette bibliotek bruger en webview omkring VanillaJS-biblioteket.
FastComments understøtter nu en fuldstændig native-implementering af vores klient som en del af fastcomments-react-native-sdk. Hvis du ønsker en fuldstændig native-implementering, kan du kigge der.
Brug - Live-kommentar-widget
API'en er en smule anderledes sammenlignet med fastcomments-react. Med native sender vi et config-objekt, som følger denne struktur.
import { FastCommentsCommentWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // Dit tenant-id. Kan hentes fra https://fastcomments.com/auth/my-account/api-secret
const myAppPageId = 'native-test'; // ID'et eller URL'en for kommentartråden i din app.
const myAppPageUrl = 'https://example.com/external-page'; // du kan valgfrit angive en URL til en ekstern side
const myAppPageTitle = 'Example Title'; // ... og du vil sandsynligvis gerne have en titel til dette indhold
const [config, setConfig] = useState({
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
});
// Ved at kalde setConfig() kan vi for eksempel ændre den aktuelle side eller den aktuelt loggede bruger
// Se example/src/App.tsx
return (
<FastCommentsCommentWidget config={config}/>
);Brug - Live-chat-widget
import { FastCommentsLiveChatWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // Dit tenant-id. Kan hentes fra https://fastcomments.com/auth/my-account/api-secret
const myAppPageId = 'native-test'; // ID'et eller URL'en for kommentertråden i din app.
const myAppPageUrl = 'https://example.com/external-page'; // du kan valgfrit angive en URL til en ekstern side
const myAppPageTitle = 'Example Title'; // ... og du vil sandsynligvis ønske en titel til dette indhold
const config = {
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
};
return (
<FastCommentsLiveChatWidget config={config}/>
);Brug - SSO
FastComments bruger HMAC til sikker SSO. For at bruge det, lad din backend oprette SSO-objektet (sso konfigurationsindstilling) og videregive det
til kommentar-widgeten.
Du kan finde eksempler for forskellige backends her: https://github.com/FastComments/fastcomments-code-examples/tree/master/sso
Peer-afhængigheder
fastcomments-react-native kræver react-native-webview. Derfor bør du følge installationsvejledningen for react-native-webview.
Kontoregion (VIGTIGT: EU-kunder)
Hvis din konto er placeret i EU, sæt region = 'eu' i widget-konfigurationen.
Ellers behøver du ikke at definere region.
Vedligeholdelsesstatus
Disse komponenter er wrapper-komponenter omkring vores kerne VanillaJS-komponenter. Vi kan automatisk opdatere disse komponenter (rette fejl, tilføje funktioner) uden at udgive dette bibliotek, så selvom det måske ikke bliver udgivet i et stykke tid, betyder det ikke, at FastComments ikke er under aktiv udvikling! Du er velkommen til at tjekke vores blog for opdateringer. API-ændringer, der bryder kompatibilitet, eller nye funktioner vil aldrig blive udgivet i det underliggende kernebibliotek uden en versionsopdatering i dette bibliotek.
Brug for hjælp?
Hvis du støder på problemer eller har spørgsmål om React Native-biblioteket, så:
Bidrag
Bidrag er velkomne! Besøg venligst GitHub-repositoriet for retningslinjer for bidrag.