React Native, yerel dosya işlemleri ve veritabanları kullanımı ile işlevsel ve etkileşimli mobil uygulamalar geliştirmek için ideal bir çözümdür Dosya okuma ve yazma için kullanabileceğiniz FileSystem API, belge dizininde dosya işlemleri yapmak için DocumentDirectoryPath API, kamera ve fotoğraf galerisi dosyalarını kullanmak için Image Picker API ve veritabanları için SQLite gibi API'ler mevcuttur Ayrıca, AsyncStorage ile basit veri saklama ve çekme işlemleri yapabilirsiniz React Native uygulamalarında yerel dosya işlemleri yapmak için react-native-fs kitaplığından faydalanabilirsiniz
React Native, işlevsel ve etkileşimli mobil uygulamalar geliştirmek için popüler bir çözümdür. Bu nedenle, uygulamalarında yerel dosya işlemleri ve veritabanları kullanımı oldukça önemlidir.
Yerel dosya işlemleri, kullanıcının cihazındaki dosyaları okuma, yazma ve silme gibi işlemleri gerçekleştirmenizi sağlar. React Native API'leri sayesinde, dosya işlemleri yapmak oldukça kolaydır.
Dosya okuma ve yazma işlemleri, bir dosyadan veri okumak veya bir dosyaya veri yazmak için kullanılır. React Native'de, fs.readFile ve fs.writeFile gibi API'ler kullanılarak bu işlemler yapılabilir.
Belge dizini, uygulamanızın çalıştığı cihazda belgelerin depolandığı bir konumdur. React Native'de, belge dizininde dosya işlemleri yapmak için DocumentDirectoryPath API'si kullanılabilir.
Kamera ve fotoğraf galerisi, birçok mobil uygulamanın vazgeçilmez özelliklerinden biridir. React Native'de, kullanıcının kamera ve fotoğraf galerisindeki dosyalara erişip, bunları görüntüleme, silme veya düzenleme gibi işlemleri gerçekleştirilebilir.
Veritabanları, uygulamanızın verilerini saklamak için kullanabileceğiniz güçlü bir araçtır. React Native'de kullanabileceğiniz bazı veritabanı API'leri şunlardır:
SQLite, özellikle küçük boyutlu uygulamalar için ideal bir veritabanı çözümüdür. React Native'de, SQLite veritabanı kullanılarak veri saklama ve çekme işlemleri yapılabilir.
Basit veri saklama ve çekme işlemlerinde AsyncStorage kullanabilirsiniz. AsyncStorage, anahtar-değer çiftleri şeklinde verileri saklamak için kullanılır.
Dosya İşlemleri
React Native, web uygulamaları için yazılan kodları tekrar kullanabilmenizi sağlayan bir araçtır. Bu nedenle, React Native uygulamalarında yerel dosya işlemleri yapmak, uygulamanızda ihtiyaç duyduğunuz her şeyi elde etmenizi sağlar. Yerel dosya işlemleri yapmak için, aşağıdaki API'leri kullanabilirsiniz:
FileSystem API
File Transfer API
Image Picker API
CameraRoll API
Permissions API
Yukarıdaki API'lerden, FileSystem API dosya işlemleri için en kullanışlı API'dir. Bu API, doğrudan yerel dosya sistemine erişim sağlayarak, dosya ve klasör manipülasyonlarını kolaylaştırır. FileSystem API, ayrıca herhangi bir dosya türü için okuma, yazma ve veri akışı işlemlerini yapmanıza olanak tanır.
API'lerin doğru kullanımı sayesinde, React Native uygulamalarınızda yerel dosya işlemlerini kolaylıkla yapabilirsiniz. Yukarıdaki özelliklerin yanı sıra, belge dizininde dosya işlemleri yapmak, kamera ve fotoğraf galerisi dosyalarını ve klasörlerini kullanmak ve daha birçok işlemi yapmak mümkündür.
Dosya Okuma ve Yazma
React Native uygulamalarında yerel dosya işlemleri önemli bir yere sahiptir. Birçok uygulama, gerçek zamanlı dosya işlemleri yaparak kullanıcıların verilerini yönetir. Dosya okuma ve yazma işlemlerini gerçekleştirmek için FileSystem API'lerini kullanabilirsiniz.
Dosya okuma işlemi gerçekleştirmek için readFile() metodu kullanılır. Bu metod, dosya yolunu ve dosya kodlamasını parametre olarak alır. Dosya kodlaması varsayılan olarak UTF-8'dir. Dosyanın içeriği, bir dize şeklinde geri döndürülür.
Dosya yazma işlemi gerçekleştirmek için writeFile() metodu kullanabilirsiniz. Bu metod, dosya yolunu, dosya içeriğini ve dosya kodlamasını parametre olarak alır. Dosya kodlamasını belirtmek istemezseniz, varsayılan olarak UTF-8 kullanılır.
Aşağıdaki örnek, yeni bir dosya oluşturur ve yazdırır:
Dosya oluşturma ve yazdırma kod örneği: |
---|
import { FileSystem } from 'react-native-file-system'; const path = FileSystem.documentDirectory + 'test.txt'; FileSystem.writeToFile(path, 'Merhaba Dünya').then(() => { console.log('Dosya yazıldı.'); }); |
Yukarıdaki örnekte, documentDirectory sabiti belge dizini yolunu alır. Daha sonra, yazılacak dosyanın adı belirtilir. Finally, writeToFile() metodu çağrılarak işlem gerçekleştirilir.
Belge Dizini
Belge Dizini, React Native uygulamalarında yerel dosya işlemleri yapabileceğimiz ana dizindir. Burada, uygulama içindeki dosyaların saklandığı yerdir. Belge Dizini'ne erişmek için, react-native-fs kitaplığını kullanarak dosya yolunu alabilirsiniz.
Dosya işlemleri yapmak için, dosya yolunu kullanarak react-native-fs kitaplığından gelen fonksiyonları çağırabilirsiniz. Örneğin, Belge Dizini'nde yeni bir dosya oluşturmak için, aşağıdaki kodu kullanabilirsiniz:
Kod | Açıklama |
---|---|
import RNFS from 'react-native-fs'; | react-native-fs kitaplığını içe aktarır. |
const documentDirectoryPath = RNFS.DocumentDirectoryPath; | DocumentDirectoryPath , Belge Dizini yolunu döndürür. |
const filePath = documentDirectoryPath + '/yeni_dosya.txt'; | Belge Dizini'nde oluşturulacak dosyanın yolu. |
RNFS.writeFile(filePath, 'Dosya içeriği', 'utf8'); | Yeni dosyayı oluşturur ve belirlenen içerikle yazmaya başlar. |
Belge Dizini'nde dosya okuma işlemi de aynı şekilde gerçekleştirilir. Aşağıdaki kodu kullanarak mevcut bir dosyayı okuyabilirsiniz:
Kod | Açıklama |
---|---|
import RNFS from 'react-native-fs'; | react-native-fs kitaplığını içe aktarır. |
const documentDirectoryPath = RNFS.DocumentDirectoryPath; | DocumentDirectoryPath , Belge Dizini yolunu döndürür. |
const filePath = documentDirectoryPath + '/mevcut_dosya.txt'; | Belge Dizini'nde okunacak dosyanın yolu. |
RNFS.readFile(filePath, 'utf8'); | Belirtilen yoldaki dosyayı okur ve içeriğini döndürür. |
Belge Dizini'ndeki dosyaların silinmesi de react-native-fs kitaplığında bulunan API'ler kullanılarak yapılabilir. Aşağıdaki kodu kullanarak Belge Dizini'nde bir dosyayı silebilirsiniz:
Kod | Açıklama |
---|---|
import RNFS from 'react-native-fs'; | react-native-fs kitaplığını içe aktarır. |
const documentDirectoryPath = RNFS.DocumentDirectoryPath; | DocumentDirectoryPath , Belge Dizini yolunu döndürür. |
const filePath = documentDirectoryPath + '/silinecek_dosya.txt'; | Silinecek dosyanın yolu Belge Dizini'nde verilir. |
RNFS.unlink(filePath); | Belirtilen yoldaki dosyayı siler. |
Belge Dizini'ndeki dosya işlemlerini react-native-fs kitaplığı kullanarak kolaylıkla gerçekleştirebilirsiniz. Bu API'leri kullanarak uygulamanızda dosya ve veritabanı işlemleri yapabilirsiniz.
Kamera ve Fotoğraf İşlemleri
React Native uygulamalarında kamera ve fotoğraf galerisi dosyaları oldukça önemlidir. Kamera API'sini kullanarak, kullanıcının uygulama içinde fotoğraf çekmesine izin verebilirsiniz. Fotoğraf galerisi API'sini kullanarak, kullanıcının cihazındaki fotoğraflara erişmesine izin verebilirsiniz.
Kamera API'si ile fotoğraf çekmek için "react-native-camera" modülünü kullanabilirsiniz. Ayrıca, "react-native-image-picker" modülü kullanarak fotoğraf galerisi ile ilgili işlemler yapabilirsiniz. Bu modül, kullanıcıya cihazındaki fotoğraf galerisine erişme ve fotoğraf seçme fırsatı verir.
```
Modül | Kullanım |
---|---|
react-native-camera | import Camera from 'react-native-camera'; ... this.camera = cam; }} style={styles.preview} aspect={Camera.constants.Aspect.fill}> ... |
react-native-image-picker | import ImagePicker from 'react-native-image-picker'; ... ImagePicker.showImagePicker(options, (response) => { console.log('Response = ', response); // Same code as in above section! }); |
Kameradan bir fotoğraf çekildikten sonra, fotoğrafın bir dizindeki JPEG dosyası biçiminde kaydedilmesi gerekir. Fotoğraf çekildikten sonra, çıktı dosyasını yönetmek için "react-native-fs" modülünü kullanabilirsiniz.
```
- React Native Camera modülünü kullanarak özelleştirilebilir fotoğraf çekimi sağlayın.
- react-native-image-picker modülünü kullanarak kullanıcının fotoğraf galerisindeki fotoğraflara erişmenizi sağlayın.
- react-native-fs modülünü kullanarak çıktı dosyalarını yönetin.
Yukarıda belirtilen API'leri kullanarak, kullanıcılar fotoğraf çekebilir ve galerilerindeki fotoğraflara erişebilirler. Bu, uygulamanızla daha fazla etkileşim için kullanıcılarınıza ilginç bir yol sunar. Ancak, bu API'leri kullanırken, kullanıcının uygulama ayarlarında kameraya ve fotoğraf galerisine erişim izni verdiğinden emin olun.
Veritabanları
Veritabanları, modern mobil uygulama geliştirme sürecinin vazgeçilmez bir parçasıdır. React Native'de veritabanı API'leri arasında SQLite ve AsyncStorage bulunur. SQLite, yerel bir veritabanı olarak depolama işlemi için kullanılırken, AsyncStorage basit veri saklama ve çekme işlemleri için iyi bir seçimdir.
SQLite veritabanı React Native uygulamalarında yerel bir veritabanı olarak kullanılabilir. Veri saklamak ve çekmek için kullanılabilir. SQLite veritabanı birden fazla platformda kullanılabilir ve büyük verileri depolamak için idealdir. Bu veritabanı, yapılandırılmış verileri saklamak için kullanılabilir ve SQL sorguları yürütmek için kullanılabilir. React Native uygulamalarında SQLite kullanımı, SQLite API'leri ile kolayca gerçekleştirilebilir.
AsyncStorage genellikle basit veri saklama ve çekme işlemleri için kullanılır. Bu veritabanı, küçük verileri depolamak için idealdir ve bir anahtar değer çifti olarak veri saklayabilir. AsyncStorage, React Native API'leri tarafından sağlanır ve uygulamanın herhangi bir koduna erişebilirsiniz. setInterval() ve setTimeout() ile kullanılmak üzere AsyncStorage metodları bulunur. AsyncStorage, kullanışlı bir veritabanıdır ve bir ticari uygulama için ihtiyacınız olan tüm temel veri saklama işlevselliğini sağlar.
Sonuç olarak, React Native uygulamalarında veritabanları kullanma, mobil uygulama geliştirme sürecinde kritik bir adımdır. SQLite ve AsyncStorage gibi veritabanı API'leri, uygulama geliştiricilerine daha fazla esneklik sağlar ve uygulama performansını önemli ölçüde artırabilir. Bu API'leri kullanarak kullanıcıların yerel verileri saklamalarını ve erişmelerini sağlamak kolaydır.
SQLite
React Native'de veritabanı işlemleri için en yaygın kullanılan API'lerden biri SQLite'dir. SQLite, hem iOS hem de Android cihazlarında kullanılabilir ve yerel veritabanı işlemleri yapmak için çok iyi bir seçenektir.
SQLite kullanarak veri saklama ve çekme işlemleri oldukça kolaydır. Öncelikle, veritabanını oluşturmanız gerekiyor. Bu işlem için, SQLite veritabanı açısından bir bağlantı nesnesi oluşturmalısınız. Bağlantı nesnesi oluşturma işlemi aşağıdaki kodla gerçekleştirilebilir:
import SQLite from 'react-native-sqlite-storage';let db = SQLite.openDatabase({name: 'test.db', createFromLocation: '~www/test.db'});
Veritabanı adı 'test.db' olarak belirlenmiştir. Veritabanı 'createFromLocation' parametresi kullanılarak belirtilen konumdan yaratılabilir. Bu örnekte, yerel dosyalardan biri olan 'test.db' dosyası kullanılmıştır.
Veritabanını oluşturduktan sonra, tabloları oluşturabilir ve verileri ekleyebilirsiniz. Örneğin, 'Kullanıcılar' tablosunu oluşturmak ve verileri eklemek için aşağıdaki kodu kullanabilirsiniz:
db.transaction(function(tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS Users (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, email TEXT)'); tx.executeSql('INSERT INTO Users (name, email) VALUES (?, ?)', ['John Doe', 'johndoe@example.com']);});
Bu kod, 'Users' tablosunu oluşturacak ve aynı anda bir kullanıcı ekleyecektir. Kullanıcı adı "John Doe" ve e-posta adresi "johndoe@example.com" olarak belirtilmiştir.
Verileri çekmek istediğinizde, aşağıdaki örnek kodu kullanabilirsiniz:
db.transaction(function(tx) { tx.executeSql('SELECT * FROM Users', [], function(tx, res) { for (let i = 0; i < res.rows.length; ++i) { console.log('Kullanıcı adı: ' + res.rows.item(i).name + ' E-posta: ' + res.rows.item(i).email); } });});
Bu kod, 'Users' tablosundaki tüm kayıtları (kullanıcı adı ve e-posta) çekecektir. Kayıtlar bir döngü aracılığıyla işlenir ve konsola yazdırılır.
SQLite veritabanı kullanarak yapabileceklerinizin sınırı yok. Verileri ekleyebilir, değiştirebilir, silebilir ve saklayabilirsiniz. Ayrıca, birden fazla tablo oluşturarak daha kompleks veritabanı yapıları oluşturabilirsiniz.
AsyncStorage
AsyncStorage, React Native ile birlikte gelen yerel bir depolama çözümüdür. Basit veri saklama ve çekme işlemleri yapmak için kullanılabilir. Async Storage, key-value (anahtar-değer) çiftleri olarak veri saklamak için JSON.stringify() ve JSON.parse() yöntemlerini kullanır.
AsyncStorage'ye veri kaydetmek için AsyncStorage.setItem() yöntemini kullanın. Bu yöntem iki parametre alır, bir anahtar (key) ve kaydedilecek veri (value).
Parametre | Açıklama |
---|---|
key | Saklanacak verinin anahtar değeri. |
value | Saklanacak veri. |
Veri kaydetme örneği:
AsyncStorage.setItem('user', JSON.stringify({ name: 'Ali', surname: 'Can', age: 30, gender: 'male'}));
AsyncStorage'den veri çekmek için AsyncStorage.getItem() yöntemi kullanılır.
Parametre | Açıklama |
---|---|
key | Çekilecek verinin anahtar değeri. |
Veri çekme örneği:
AsyncStorage.getItem('user').then((result) => { console.log(JSON.parse(result));});
Bu yöntem, kaydedilen değeri string olarak döndürür, bu nedenle veriyi JSON.parse () yöntemini kullanarak ayrıştırmalısınız.
AsyncStorage.removeItem() yöntemi ile kaydedilen herhangi bir veri anahtar-değer çiftinden kaldırılabilir.
Parametre | Açıklama |
---|---|
key | Verisi kaldırılacak anahtar değeri. |
Örnek:
AsyncStorage.removeItem('user');
AsyncStorage.clear() yöntemi ile tüm veriler silinebilir.
Örnek:
AsyncStorage.clear();
AsyncStorage, basit veri saklama ve çekme işlemleri için uygun bir yöntemdir. Ancak, daha büyük veri setleri veya daha karmaşık veri yapıları için SQLite veritabanı kullanmak daha uygun olabilir.
Klasör İşlemleri
React Native'de yerel klasör işlemleri yapmak için API'leri kullanmak oldukça önemlidir. Klasör işlemleri, uygulamanız için gerekli olan dosyaların saklanmasını ve yönetilmesini kolaylaştırır. React Native'de yerel klasör işlemlerini yapmak için birçok API bulunmaktadır.
Bu API'ler arasında FileSystem, Document Picker ve Image Picker gibi API'ler yer almaktadır. Bu API'lerle yeni dosya oluşturma, mevcut dosyaları okuma ve yazma, klasör oluşturma ve silme işlemleri gibi birçok işlemi gerçekleştirebilirsiniz.
İşlem | API |
---|---|
Yeni klasör oluşturma | FileSystem.makeDirectoryAsync() |
Mevcut bir klasöre erişim sağlama | FileSystem.getInfoAsync() |
Dosya silme | FileSystem.deleteAsync() |
Örneğin, yeni bir klasör oluşturmak için FileSystem.makeDirectoryAsync() metodunu kullanabilirsiniz. Aşağıdaki örnek, uygulama dizininde yeni bir klasör oluşturmak için kullanabilirsiniz:
import * as FileSystem from 'expo-file-system';const folderName = 'yeni_klasor';async function createFolder() { try { await FileSystem.makeDirectoryAsync(`${FileSystem.documentDirectory}${folderName}`); } catch (error) { console.log(error); }}
Benzer şekilde, mevcut bir dosyayı silmek için FileSystem.deleteAsync() metodunu kullanabilirsiniz. Aşağıdaki örnek, uygulama dizinindeki bir dosyayı silmek için nasıl kullanacağınızı gösterir:
import * as FileSystem from 'expo-file-system';const fileName = 'silinecek_dosya.txt';async function deleteFile() { try { await FileSystem.deleteAsync(`${FileSystem.documentDirectory}${fileName}`); } catch (error) { console.log(error); }}
Bir klasörün var olup olmadığını kontrol etmek için FileSystem.getInfoAsync() metodunu kullanabilirsiniz. Aşağıdaki örnek, uygulama dizininde belirli bir klasörün var olup olmadığını kontrol etmek için kullanabilirsiniz:
import * as FileSystem from 'expo-file-system';const folderName = 'var_olan_klasor';async function checkFolderExists() { try { const folderInfo = await FileSystem.getInfoAsync(`${FileSystem.documentDirectory}${folderName}`); if (folderInfo.exists) { console.log('Klasör mevcut'); } else { console.log('Klasör mevcut değil'); } } catch (error) { console.log(error); }}
Yukarıdaki örneklerle birlikte, React Native'de yerel klasör işlemleri için kullanabileceğiniz API'ler hakkında daha fazla bilgi edinebilirsiniz. Bu şekilde uygulamanızın dosya yönetimi daha da kolay hale gelebilir.
Klasör Oluşturma
React Native uygulamalarında, yerel klasör oluşturma API'leri kullanarak işlemleri gerçekleştirmek mümkündür. Bunun için öncelikle ne tür bir klasör oluşturmak istediğinizi belirlemelisiniz. Ardından, "fs" modülü kullanılarak yeni bir klasör oluşturulabilir.
Kod Parçası | Açıklama |
---|---|
var RNFS = require('react-native-fs'); | Öncelikle RNFS modülü React Native projesine dahil edilir. |
RNFS.mkdir(path/to/folder) | Yeni bir klasör oluşturmak için "mkdir()" metodu kullanılır. |
Ayrıca mevcut bir klasöre de erişim sağlamak mümkündür. Bunun için klasör yolunu belirlemek gerekmektedir. Çünkü bu sayede istenilen klasöre erişim sağlanabilir ve içerikleri görüntülenebilir.
Kod Parçası | Açıklama |
---|---|
RNFS.readDir(dirPath) | Klasör yolunu belirledikten sonra "readDir()" metodu kullanılarak klasör içeriği görüntülenebilir. |
RNFS.stat(filePath) | Klasörün boyutunu ve oluşturulma tarihini öğrenmek için "stat()" metodu kullanılarak klasör bilgilerine erişilebilir. |
Yukarıdaki örnekler yardımıyla, React Native uygulamalarında klasör oluşturma ve mevcut klasörlere erişim sağlama işlemleri kolaylıkla gerçekleştirilebilir.
Klasör Silme
Klasör silme işlemi, React Native uygulamalarında oldukça önemlidir. Kullanıcının veri saklama ihtiyacına bağlı olarak oluşan gereksinimler doğrultusunda klasör silme işlemi yapmanız gerekebilir. Bunun için React Native API'leri kullanarak klasör ve dosya silme işlemlerini gerçekleştirebilirsiniz.
Klasör ve dosya silmek için öncelikle React Native'de yer alan FileSystem API'lerini kullanmanız gerekmektedir. FileSystem API'leri aracılığı ile cihazdaki klasörleri ve dosyaları işlem yapmanız mümkündür. Ayrıca, bu API'ler sayesinde cihazdaki klasör ve dosyaların isimleri, tarihleri, boyutları gibi özelliklerine de erişebilirsiniz.
Klasör silme işlemini gerçekleştirmek için FileSystem.unlink() metodu kullanılır. Bu metot sayesinde silinmek istenen klasör veya dosyaların filePath parametresi kullanılarak silme işlemi gerçekleştirilebilir. Ayrıca, silme işlemi gerçekleştirilirken FileSystem.exists() metodu kullanarak öncelikle silinmek istenen klasör veya dosyanın cihazda mevcut olup olmadığını kontrol etmek faydalı olacaktır.
{`import React, { Component } from 'react';import { View, Button } from 'react-native';import { FileSystem } from 'react-native-unimodules';class App extends Component { deleteFolder = async () => { const dirPath = FileSystem.documentDirectory + 'folderName'; const checkFolderExists = await FileSystem.getInfoAsync(dirPath); if (checkFolderExists.exists) { await FileSystem.deleteAsync(dirPath); alert('Klasör başarıyla silindi'); } else { alert('Silinecek klasör bulunamadı.'); } }; render() { return ( ); }}export default App;`}