Add Comment Widgets to Your React Native App
Esta es la biblioteca oficial de React Native para FastComments.
Incrusta widgets de comentarios en vivo, chat y reseñas en tu aplicación React Native.
Repositorio
Demostración en vivo 
Para ver todos los widgets y flujos ejecutándose localmente contra el tenant público demo, clona el repositorio y ejecuta:
yarn bootstrap
cd example
yarn ios # or: yarn android, yarn webEl punto de entrada de la demostración es example/src/ShowcaseApp.tsx — una única aplicación que expone todos los widgets, temas y flujos.
El objetivo yarn web utiliza react-native-web + react-native-web-webview (que renderiza el WebView como un iframe). Útil para pruebas rápidas de humo visual en un navegador; las APIs de WebView exclusivas de nativo como injectJavaScript y onShouldStartLoadWithRequest no se comportarán completamente en la web.
Instalación
npm install react-native-webview --save
npm install fastcomments-react-native --saveConsidera el SDK nativo
Esta biblioteca utiliza un webview alrededor de la biblioteca VanillaJS.
FastComments ahora admite una implementación completamente nativa de nuestro cliente como parte de fastcomments-react-native-sdk. Si quieres una implementación completamente nativa, quizá quieras echarle un vistazo allí.
Uso - Widget de comentarios en vivo
La API es ligeramente diferente en comparación con fastcomments-react. Con la versión nativa, pasamos un objeto config que sigue esta estructura.
import { FastCommentsCommentWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // Your tenant id. Can be fetched from https://fastcomments.com/auth/my-account/api-secret
const myAppPageId = 'native-test'; // the ID or URL of the comment thread in your app.
const myAppPageUrl = 'https://example.com/external-page'; // you can optional set a url to an external page
const myAppPageTitle = 'Example Title'; // ... and you probably want a title for this content
const [config, setConfig] = useState({
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
});
// al llamar a setConfig(), podemos hacer cosas como cambiar la página actual, o el usuario actualmente conectado
// Consulta example/src/App.tsx
return (
<FastCommentsCommentWidget config={config}/>
);Uso - Widget de chat en vivo
import { FastCommentsLiveChatWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // Tu tenant ID. Puede obtenerse desde https://fastcomments.com/auth/my-account/api-secret
const myAppPageId = 'native-test'; // El ID o URL del hilo de comentarios en tu app.
const myAppPageUrl = 'https://example.com/external-page'; // puedes configurar opcionalmente una URL a una página externa
const myAppPageTitle = 'Example Title'; // ... y probablemente querrás un título para este contenido
const config = {
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
};
return (
<FastCommentsLiveChatWidget config={config}/>
);Uso - SSO (inicio de sesión único)
FastComments utiliza HMAC para SSO seguro. Para usarlo, haga que su backend cree el objeto SSO (propiedad de configuración sso) y páselo
al widget de comentarios.
Puede encontrar ejemplos para varios backends aquí: https://github.com/FastComments/fastcomments-code-examples/tree/master/sso
Dependencias peer
fastcomments-react-native requires react-native-webview. Por lo tanto, debe seguir los pasos de instalación de react-native-webview.
Región de la cuenta (ATENCIÓN: clientes de la UE)
Si su cuenta está ubicada en la UE, establezca region = 'eu' en la configuración del widget.
De lo contrario, no es necesario definir region.
Estado de mantenimiento
Estos componentes son envoltorios alrededor de nuestros componentes centrales de VanillaJS. Podemos actualizar automáticamente estos componentes (corregir errores, añadir funciones) sin publicar esta biblioteca, así que aunque puede que no esté publicada por un tiempo, eso no significa que FastComments no esté en desarrollo activo. Consulte nuestro blog para actualizaciones. Los cambios incompatibles de API o las nuevas funciones nunca se incorporarán a la biblioteca central subyacente sin un incremento de versión en esta biblioteca.
¿Necesita ayuda?
Si encuentra algún problema o tiene preguntas sobre la biblioteca de React Native, por favor:
Contribuciones
¡Las contribuciones son bienvenidas! Por favor visite el repositorio de GitHub para conocer las directrices de contribución.