Add Comment Widgets to Your React Native App
Esta é a biblioteca oficial React Native para o FastComments.
Incorpore widgets de comentários ao vivo, chat e avaliações no seu app React Native.
Repositório
Demonstração ao vivo 
Para ver todos os widgets e fluxos sendo executados localmente contra o tenant público demo, clone o repositório e execute:
yarn bootstrap
cd example
yarn ios # or: yarn android, yarn webO ponto de entrada da demonstração é example/src/ShowcaseApp.tsx — um único app que expõe todos os widgets, temas e fluxos.
O alvo yarn web usa react-native-web + react-native-web-webview (que renderiza o WebView como um iframe). Útil para testes visuais rápidos em um navegador; APIs de WebView exclusivas do ambiente nativo como injectJavaScript e onShouldStartLoadWithRequest não se comportarão totalmente na web.
Instalação
npm install react-native-webview --save
npm install fastcomments-react-native --saveConsidere o SDK nativo
Esta biblioteca usa um webview em torno da biblioteca VanillaJS.
FastComments agora oferece uma implementação completamente nativa do nosso cliente como parte do fastcomments-react-native-sdk. Se você quer uma implementação completamente nativa, pode querer dar uma olhada lá.
Uso - Widget de comentários ao vivo
A API é ligeiramente diferente em comparação com fastcomments-react. Na versão nativa, passamos um objeto de configuração que segue esta estrutura.
import { FastCommentsCommentWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // Seu tenant id. Pode ser obtido em https://fastcomments.com/auth/my-account/api-secret
const myAppPageId = 'native-test'; // O ID ou URL do tópico de comentários no seu app.
const myAppPageUrl = 'https://example.com/external-page'; // você pode opcionalmente definir uma URL para uma página externa
const myAppPageTitle = 'Example Title'; // ... e provavelmente você vai querer um título para este conteúdo
const [config, setConfig] = useState({
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
});
// Ao chamar setConfig(), podemos fazer coisas como alterar a página atual ou o usuário atualmente logado
// Veja example/src/App.tsx
return (
<FastCommentsCommentWidget config={config}/>
);Uso - Widget de bate-papo ao vivo
import { FastCommentsLiveChatWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // Seu tenant id. Pode ser obtido em https://fastcomments.com/auth/my-account/api-secret
const myAppPageId = 'native-test'; // o ID ou URL do tópico de comentários no seu app.
const myAppPageUrl = 'https://example.com/external-page'; // você pode opcionalmente definir uma url para uma página externa
const myAppPageTitle = 'Example Title'; // ... e você provavelmente vai querer um título para este conteúdo
const config = {
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
};
return (
<FastCommentsLiveChatWidget config={config}/>
);Uso - SSO
FastComments usa HMAC para SSO seguro. Para usar, faça com que seu backend crie o objeto SSO (sso propriedade de configuração) e o passe
para o widget de comentários.
Você pode encontrar exemplos para vários backends, aqui: https://github.com/FastComments/fastcomments-code-examples/tree/master/sso
Dependências peer
fastcomments-react-native requer react-native-webview. Portanto, você deve seguir as etapas de instalação do react-native-webview.
Região da conta (ATENÇÃO: clientes da UE)
Se sua conta estiver localizada na UE, defina region = 'eu' na configuração do widget.
Caso contrário, você não precisa definir region.
Status de manutenção
Esses componentes são wrappers em torno dos nossos componentes core VanillaJS. Podemos atualizar automaticamente esses componentes (corrigir bugs, adicionar recursos) sem publicar esta biblioteca, então, embora ela possa não ser publicada por um tempo, isso não significa que o FastComments não esteja em desenvolvimento ativo! Sinta-se à vontade para conferir nosso blog para atualizações. Mudanças incompatíveis na API ou recursos nunca serão lançadas na biblioteca core subjacente sem um aumento de versão nesta biblioteca.
Precisa de ajuda?
Se encontrar algum problema ou tiver dúvidas sobre a biblioteca React Native, por favor:
Contribuindo
Contribuições são bem-vindas! Por favor, visite o GitHub repository para as diretrizes de contribuição.