Add Comment Widgets to Your React Native App
Bu, FastComments için resmi React Native kütüphanesidir.
React Native uygulamanıza canlı yorum, sohbet ve inceleme widget'ları yerleştirin.
Depo
Canlı Gösterim 
Halka açık demo kiracısına karşı yerel olarak çalışan tüm widget'ları ve akışları görmek için repoyu klonlayın ve çalıştırın:
yarn bootstrap
cd example
yarn ios # or: yarn android, yarn webGösteri giriş noktası example/src/ShowcaseApp.tsx — tüm widget'ları, temaları ve akışları açığa çıkaran tek bir uygulamadır.
yarn web hedefi react-native-web + react-native-web-webview kullanır (WebView'i bir iframe olarak render eder). Tarayıcıda hızlı görsel ön testler için kullanışlıdır; injectJavaScript ve onShouldStartLoadWithRequest gibi yalnızca native WebView API'leri web üzerinde tam olarak davranmayacaktır.
Kurulum
npm install react-native-webview --save
npm install fastcomments-react-native --saveYerel SDK'yı Kullanmayı Düşünün
Bu kütüphane VanillaJS kütüphanesinin etrafında bir webview kullanır.
FastComments artık istemcimizin tamamen yerel bir uygulamasını fastcomments-react-native-sdk parçası olarak destekliyor.
Tamamen yerel bir uygulama istiyorsanız oraya bakmak isteyebilirsiniz.
Kullanım - Canlı Yorum Widget'ı
The API, fastcomments-react ile karşılaştırıldığında biraz farklıdır. Native'de, şu yapıyı izleyen bir config nesnesi geçiririz: bu yapı.
import { FastCommentsCommentWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // Kiracı kimliğiniz. https://fastcomments.com/auth/my-account/api-secret adresinden alınabilir
const myAppPageId = 'native-test'; // uygulamanızdaki yorum dizisinin ID'si veya URL'si.
const myAppPageUrl = 'https://example.com/external-page'; // isteğe bağlı olarak harici bir sayfaya URL ayarlayabilirsiniz
const myAppPageTitle = 'Example Title'; // ... ve muhtemelen bu içerik için bir başlık istersiniz
const [config, setConfig] = useState({
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
});
// setConfig() çağrısı ile mevcut sayfayı veya şu anda giriş yapmış kullanıcıyı değiştirmek gibi işlemler yapabiliriz
// Örnek için bkz. example/src/App.tsx
return (
<FastCommentsCommentWidget config={config}/>
);Kullanım - Canlı Sohbet Widget'ı
import { FastCommentsLiveChatWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // Kiracı kimliğiniz. https://fastcomments.com/auth/my-account/api-secret adresinden alınabilir
const myAppPageId = 'native-test'; // uygulamanızdaki yorum dizisinin ID'si veya URL'si.
const myAppPageUrl = 'https://example.com/external-page'; // isteğe bağlı olarak harici bir sayfa için bir url belirtebilirsiniz
const myAppPageTitle = 'Example Title'; // ... ve muhtemelen bu içerik için bir başlık istersiniz
const config = {
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
};
return (
<FastCommentsLiveChatWidget config={config}/>
);Kullanım - SSO
FastComments, güvenli SSO için HMAC kullanır. Kullanmak için, backend'inizin SSO nesnesini (sso config property) oluşturmasını ve bunu yorum widget'ına iletmesini sağlayın.
Çeşitli backend'ler için örnekleri burada bulabilirsiniz: https://github.com/FastComments/fastcomments-code-examples/tree/master/sso
Eş Bağımlılıklar
fastcomments-react-native react-native-webview gerektirir. Bu nedenle, react-native-webview için kurulum adımlarını takip etmelisiniz.
Hesap Bölgesi (DİKKAT: AB Müşterileri)
Hesabınız AB'de bulunuyorsa, widget yapılandırmasında region = 'eu' olarak ayarlayın.
Aksi takdirde, region'u tanımlamanıza gerek yoktur.
Bakım Durumu
Bu bileşenler, çekirdek VanillaJS bileşenlerimizin etrafında sarmalayıcı (wrapper) bileşenlerdir. Bu bileşenleri (hataları düzeltme, özellik ekleme) bu kütüphaneyi yayımlamadan otomatik olarak güncelleyebiliriz, dolayısıyla kütüphane bir süre yayımlanmamış olabilir; bu FastComments'in aktif geliştirme altında olmadığı anlamına gelmez! Güncellemeler için blogumuzu kontrol etmekten çekinmeyin. Kırıcı API değişiklikleri veya yeni özellikler, bu kütüphanede bir sürüm artışı yapılmadan altyapıdaki çekirdek kütüphaneye asla gönderilmeyecektir.
Yardıma mı ihtiyacınız var?
React Native Kütüphanesi ile ilgili herhangi bir sorunla karşılaşırsanız veya sorularınız varsa, lütfen:
Katkıda Bulunma
Katkılar memnuniyetle kabul edilir! Lütfen katkı yönergeleri için GitHub deposunu ziyaret edin.