Add Comment Widgets to Your React Native App
Questa è la libreria ufficiale React Native per FastComments.
Incorpora widget per commenti in tempo reale, chat e recensioni nella tua app React Native.
Repository
Dimostrazione in diretta 
Per vedere tutti i widget e i flussi in esecuzione localmente contro il tenant pubblico demo, clona il repo ed esegui:
yarn bootstrap
cd example
yarn ios # oppure: yarn android, yarn webIl punto d'ingresso del showcase è example/src/ShowcaseApp.tsx — un'unica app che espone tutti i widget, i temi e i flussi.
Il target yarn web usa react-native-web + react-native-web-webview (che renderizza la WebView come un iframe). Utile per rapidi test visivi di base in un browser; le API WebView disponibili solo su nativo come injectJavaScript e onShouldStartLoadWithRequest non si comporteranno pienamente sul web.
Installazione
npm install react-native-webview --save
npm install fastcomments-react-native --saveValuta l'SDK nativo
Questa libreria usa una webview attorno alla libreria VanillaJS.
FastComments ora supporta un'implementazione completamente nativa del nostro client come parte di fastcomments-react-native-sdk. Se desideri un'implementazione completamente nativa, potresti voler dare un'occhiata lì.
Utilizzo - Il widget dei commenti in tempo reale
L'API è leggermente diversa rispetto a fastcomments-react. Con la versione nativa, passiamo un oggetto config che segue questa struttura.
import { FastCommentsCommentWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // Il tuo tenant id. Può essere recuperato da https://fastcomments.com/auth/my-account/api-secret
const myAppPageId = 'native-test'; // L'ID o l'URL del thread di commenti nella tua app.
const myAppPageUrl = 'https://example.com/external-page'; // puoi opzionalmente impostare un URL per una pagina esterna
const myAppPageTitle = 'Example Title'; // ... e probabilmente vorrai un titolo per questo contenuto
const [config, setConfig] = useState({
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
});
// chiamando setConfig(), possiamo fare cose come cambiare la pagina corrente o l'utente attualmente connesso
// Vedi example/src/App.tsx
return (
<FastCommentsCommentWidget config={config}/>
);Utilizzo - Il widget di chat in tempo reale
import { FastCommentsLiveChatWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // Il tuo tenant id. Può essere recuperato da https://fastcomments.com/auth/my-account/api-secret
const myAppPageId = 'native-test'; // l'ID o l'URL del thread di commenti nella tua app.
const myAppPageUrl = 'https://example.com/external-page'; // puoi opzionalmente impostare un URL verso una pagina esterna
const myAppPageTitle = 'Example Title'; // ... e probabilmente vorrai un titolo per questo contenuto
const config = {
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
};
return (
<FastCommentsLiveChatWidget config={config}/>
);Utilizzo - SSO
FastComments utilizza HMAC per SSO sicuro. Per usarlo, fai sì che il tuo backend crei l'oggetto SSO (proprietà di configurazione sso) e lo passi
al widget dei commenti.
Puoi trovare esempi per vari backend, qui: https://github.com/FastComments/fastcomments-code-examples/tree/master/sso
Dipendenze peer
fastcomments-react-native richiede react-native-webview. Di conseguenza, dovresti seguire i passaggi di installazione per react-native-webview.
Account Region (ATTENZIONE: Clienti UE)
Se il tuo account si trova nell'UE, imposta region = 'eu' nella configurazione del widget.
Altrimenti, non è necessario definire region.
Stato di manutenzione
Questi componenti sono dei wrapper intorno ai nostri componenti core VanillaJS. Possiamo aggiornare automaticamente questi componenti (correggere bug, aggiungere funzionalità) senza pubblicare questa libreria, quindi anche se potrebbe non essere pubblicata per un po' ciò non significa che FastComments non sia in sviluppo attivo! Sentiti libero di consultare il nostro blog per aggiornamenti. Le modifiche o funzionalità che interrompono la compatibilità delle API non verranno mai rilasciate nella libreria core sottostante senza un incremento di versione in questa libreria.
Hai bisogno di aiuto?
Se riscontri problemi o hai domande sulla libreria React Native, per favore:
Contribuire
I contributi sono benvenuti! Visita il repository GitHub per le linee guida sui contributi.