React Native SQLite Kullanımı

Bu yazımda sizlere React Native ile SQLite Kullanımını nasıl gerçekleştirebileceğimiz anlatıcağım. Bildiğiniz üzere SQLite bir sunucuya gerek durmaksızın çalışan bir SQL veri tabanıdır. Bu nedenle özellikle offline çalışacak olan mobil uygulamalarda tercih edilir.

SQLİte tam olarak bir Database değildir. Bir kütüphanedir. O yüzden bir plugin mantığı ile çalışır. Bu nedenle SQLite plugin projemize eklememiz gerekiyor.

Şimdi terminalimizi aşalım ve SQLite kullanmak istediğimiz projemizin dizinine gidelim ve aşağıdaki kodu yapıştıralım. Gerekli kurulumlar otomatik olarak başlayacaktır.

 $ npm install react-native-sqlite-2 —save

Bu işlemden sonra gerekli olan plugin projemize eklenmiş olacaktır. Şimdi sıra bu plugini etkinleştirerek projemize dahil etmek olacaktır. Bunun için aşağıdaki kodu terminale yazarsak otomatik olarak kurulumu başlatalım.

 $ react-native link react-native-sqlite-2

Bazı durumlarda otomatik kurulum gerçekleşmeyebilir bu nedenle sizlere manuel kurulumunda nasıl yapıldığını aşağıda göstereceğim. Yukarıda ki kurulum başarılı bir şekilde tanımlanmış olsa bile aşağıda ki adımları takip ederek projenizi teyit edebilirsiniz.

SQLite Manual Kurulum – IOS

  1. XCode geliştirici programımız üzerinden projemizi açıyoruz. Sağdaki navigasyon menüsü üzerinden “Libraries” klasörüne sağ tıklıyoruz. Açılan menüde “Add Files to [Projenizin Adı]” adlı bir link çıkacaktır. Bu linke tıklıyoruz.
  2. Açılan menüden proje dizinimize geri gidiyoruz. Burada proje dizinimizin yanında “node_modulse” adında bir klasör eklendiğini göreceksiniz. (Bu klasör yukarıda yaptığımız plugin ekleme işleminden sonra eklenmiş olacaktır. Yüklenmiş pluginleri burada tutar.) Bu dosya içerisinde “react-native-sqlite-2” dosyasına oradan “IOS“ en sonunda da “RNSqlite2.xcodeproj” dosyasını bulup projemize ekliyoruz.
  3. Yine XCode üzerinden Sağdaki navigasyon menüsü üzerinden projemizin üzerine tıklıyoruz. Orta menüde proje bilgilerinin geldiği bir sayfa gözükecektir. Bu sayfa üzerinden “Build Phases” linkine tıklıyoruz ve açılan menüden “Link Binary With Libraries” sekmesini açıp “+” işaretine tıklayıp “libRNSqlite2.a” dosyasını ekliyoruz.
  4. Projeyi çalıştırın (CMD+R)

SQLite Manual Kurulum – Android

  1. Kulandığınız editör üzerinden projenizi açın ve oradan yandaki dizini takip ederek MainApplication.java dosyasına erişin. “android/app/src/main/java/[…]/MainApplication.java” Dosyanın başına import dog.craftz.sqlite_2.RNSqlite2Package;” kodunu,Aşadığdaki getPackages() methodunun içine new RNSqlite2Package() kodunu ekleyiniz.
  2. android/settings.gradle dosyasına erişin ve aşağıdaki kodu ekleyin.
    include ':react-native-sqlite-2'
    project(':react-native-sqlite-2').projectDir = new File(rootProject.projectDir, ‘../node_modules/react-native-sqlite-2/android')

  3. android/app/build.gradle dosyasına erişin ve aşağıdaki kodu ekleyeniz.
    compile project(‘:react-native-sqlite-2')

Kullanımı

React projemizi açalım ve App.js dosyamızı aşağıdaki gibi düzenleyelim.

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import SQLite from 'react-native-sqlite-2';

const db = SQLite.openDatabase({name: 'dataA1.db', location: 'default'});

export default class App extends Component {
  constructor(){
      super()

      this.state = {
        getvalue: "",
      };

      db.transaction((tx) => {

        tx.executeSql('DROP TABLE IF EXISTS Users', []);
        tx.executeSql('CREATE TABLE IF NOT EXISTS Users(user_id INTEGER PRIMARY KEY NOT NULL, name VARCHAR(30))', []);
        tx.executeSql('INSERT INTO Users (name) VALUES (:name)', ['Fatih']);
        tx.executeSql('SELECT * FROM Users', [], (tx, results) => {
          for (var i = 0; i < results.rows.length; i++) {
            var row = results.rows.item(0);
            this.setState({getvalue: row.name});
            console.log('item:' , results.rows.item(i));
          }
        });
      });
  }

  render() {
    return (
       <View style={styles.container}>
        <Text style={styles.welcome}>{'Kullanıcı Adı: ' + this.state.getvalue}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

Ve çalıştırın…

Ekran Görüntüsü

  

Hepinize başarılar, Ne diyorduk yazınız neta olsun 🙂

Bir Cevap Yazın