كيف يمكن جلب الداتا من القاعدة sqlite react native cli

عليك الإعتماد على مكتبة React Native SQLite Storage واستيرادها كالتالي:

import { openDatabase } from 'react-native-sqlite-storage';

ثم فتح قاعدة البيانات:

const db = openDatabase({ name: 'myDatabase.db' });

ثم إنشاء استعلام SQL لاسترداد البيانات التي تريد عرضها ،وبفرض أنك تريد عرض قائمة بجميع المستخدمين في قاعدة البيانات فسنكتب الاستعلام التالي:

SELECT * FROM users;

ثم قم تنفيذ الاستعلام باستخدام دالة executeSql().

db.transaction((tx) => {
  tx.executeSql('SELECT * FROM users;', [], (tx, results) => {
    // ...
  });
});

ثم تخزين نتائج الاستعلام في متغير، كالتالي:

const users = results.rows.map((row) => {
  return {
    id: row.id,
    name: row.name,
    email: row.email,
  };
});

بعد ذلك عليك إنشاء مكون FlatList:

const UsersList = () => {
  const { users } = this.state;
  return (
    <FlatList
      data={users}
      renderItem={({ item }) => (
        <Text key={item.id}>{item.name}</Text>
      )}
    />
  );
};

ثم عرض المكون FlatList في شاشة التطبيق:

const App = () => {
  return (
    <View style={styles.container}>
      <UsersList />
    </View>
  );
};

وذلك من أجل إنشاء قائمة بجميع المستخدمين في قاعدة البيانات.

وإليك مثال كامل:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  FlatList,
} from 'react-native';
import { openDatabase } from 'react-native-sqlite-storage';


class App extends Component {
  state = {
    users: [],
  };


  componentDidMount() {
    const db = openDatabase({ name: 'myDatabase.db' });


    db.transaction((tx) => {
      tx.executeSql('SELECT * FROM users;', [], (tx, results) => {
        this.setState({ users: results.rows.map((row) => {
          return {
            id: row.id,
            name: row.name,
            email: row.email,
          };
        }) });
      });
    });
  }


  render() {
    const { users } = this.state;
    return (
      <View style={styles.container}>
        <FlatList
          data={users}
          renderItem={({ item }) => (
            <Text key={item.id}>{item.name}</Text>
          )}
        />
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});


AppRegistry.registerComponent('App', () => App);