React Native PDF gösterimi için birçok paket bulunmaktadır, ancak paket seçimi yaparken gelecekte ortaya çıkabilecek sorunlara karşı en yüksek destek sunanları tercih etmek kritiktir. Tüm PDF gösterim ihtiyaçlarım için kullandığım paketi ve bu paketle ilgili yaşadığım sorunları/çözümleri içeren güncel bir makale oluşturmayı düşündüm. Bu notlar hem kendim için bir kaynak olacak hem de diğer geliştiricilere yardımcı olabilecektir.
React Native PDF Gösterimi
React Native projenize react-native-pdf paketini kurmak için alttaki komutlardan birini kullanabilirsiniz.
npm
yarn
Örnek Kullanım
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | import React from 'react'; import { StyleSheet, Dimensions, View } from 'react-native'; import Pdf from 'react-native-pdf'; export default class PDFExample extends React.Component { render() { const source = { uri: 'http://samples.leanpub.com/thereactnativebook-sample.pdf', cache: true }; //const source = require('./test.pdf'); // ios only //const source = {uri:'bundle-assets://test.pdf' }; //const source = {uri:'file:///sdcard/test.pdf'}; //const source = {uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."}; //const source = {uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"}; //const source = {uri:"blob:xxxxxxxx-...?offset=0&size=xxx"}; return ( <View style={styles.container}> <Pdf source={source} onLoadComplete={(numberOfPages,filePath) => { console.log(`Number of pages: ${numberOfPages}`); }} onPageChanged={(page,numberOfPages) => { console.log(`Current page: ${page}`); }} onError={(error) => { console.log(error); }} onPressLink={(uri) => { console.log(`Link pressed: ${uri}`); }} style={styles.pdf}/> </View> ) } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'flex-start', alignItems: 'center', marginTop: 25, }, pdf: { flex:1, width:Dimensions.get('window').width, height:Dimensions.get('window').height, } }); |
Kodun bazı kısımlarını açıklayalım:
1 | const source = { uri: 'http://samples.leanpub.com/thereactnativebook-sample.pdf', cache: true }; |
Bu satır, PDF dosyasının kaynağını belirler. Örneğin, uzaktan bir URI, yerel bir dosya, base64 formatındaki bir PDF veya içerik sağlayıcısı URI gibi çeşitli kaynak türlerini destekler. cache: true değeri ile sürekli aynı adresten statik olarak beslenen dosyanın cache’lenmesi sağlanır. Eğer güncel olarak değişen bir pdf dosyası ise bu değerin false yapılması gerekir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <Pdf source={source} onLoadComplete={(numberOfPages, filePath) => { console.log(`Number of pages: ${numberOfPages}`); }} onPageChanged={(page, numberOfPages) => { console.log(`Current page: ${page}`); }} onError={(error) => { console.log(error); }} onPressLink={(uri) => { console.log(`Link pressed: ${uri}`); }} style={styles.pdf}/> |
Pdf bileşeni, PDF dosyasını gösterir ve çeşitli olayları (onLoadComplete, onPageChanged, onError, onPressLink) dinler.
Karşılaşabileceğiniz Sorunlar
Android PDF Gösterilmemesi Sorunu
Eğer android platformunda react-native-pdf paketi üzerinden dosya gösterimi konsunda sorun yaşıyorsanız alttaki alternatif 2 yöntemi deneyebilirsiniz.
1.Alternatif
trustAllCerts={false} attribute ekleyerek çözüm sağlayabilirsiniz.
1 2 3 4 | <Pdf trustAllCerts={false} source={{ uri: 'http://samples.leanpub.com/thereactnativebook-sample.pdf' }} /> |
2.Alternatif
<uses-permission android:name="android.permission.INTERNET" /> etiketini ve android:usesCleartextTraffic="true" özelliğini alttaki gibi eklemelisiniz.
1 2 3 4 5 6 7 8 9 10 | <?xml version="1.0" encoding="utf-8"?> <manifest ...> <uses-permission android:name="android.permission.INTERNET" /> <application ... android:usesCleartextTraffic="true" ...> ... </application> </manifest> |
📚 React Native PDF Kaynakları
📚 React Native PDF Benzeri Makaleler
- React Native AsyncStorage Kullanımı
- React Native Nedir? Ortam Nasıl Kurulur?
- React Native Android RTL yerleşim desteği nasıl kapatılır?
✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
