データベースとしてexpo-sqliteライブラリを実際使用してみる

データベースとしてexpo-sqliteライブラリを使用し、BottomTabを使用し、そのタブの一つに、そのデータの一覧をリスト表示します。

下記HPからコードを結構引用させてもらってます。

【React Native+Expo】Expoでデータベース(SQLite)の使い方 | CommentOut (comment-out.net)

データベース処理やAPI処理を非同期を意識しないで、とりあえず組み立てたいときに、ボタンを利用するのは、どのプログラミング言語でもあるあるです。

First.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button} from 'react-native';
import * as SQLite from 'expo-sqlite';
import { useState } from 'react';

export default function First({navigation}) {
  const [items, setItems] = useState();

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Button
       title="CREATE"
       onPress={() => {
        const db = SQLite.openDatabase('Database.db');
        db.transaction((tx) => {
            // 実行したいSQL
            tx.executeSql(
                "CREATE TABLE IF NOT EXISTS Hawks(id integer primary key not null, name text);",
                null,
                () => {
                    // 成功時のコールバック
                    console.log("CREATE TABLE Success.");
                },
                () => {
                    // 失敗時のコールバック
                    console.log("CREATE TABLE Failed.");
                    return true;  // return true でロールバックする
                });
            },
            () => { console.log("Failed All."); },
            () => { console.log("Success All."); }
        );
       }} />
      <StatusBar style="auto" />
      <Button
       title="ADD_1"
       onPress={() => {
        const db = SQLite.openDatabase('Database.db');
        db.transaction((tx) => {
            // 実行したいSQL
            tx.executeSql(
                "INSERT INTO Hawks(id, name) VALUES(?, ?);",
                [1, "オオタカ"],
                () => {
                    // 成功時のコールバック
                    console.log("INSERT TABLE Success.");
                },
                () => {
                    // 失敗時のコールバック
                    console.log("INSERT TABLE Failed.");
                    return true;  // return true でロールバックする
                });
            },
            () => { console.log("Failed All."); },
            () => { console.log("Success All."); }
        );
       }} />
      <Button
       title="ADD_2"
       onPress={() => {
        const db = SQLite.openDatabase('Database.db');
        db.transaction((tx) => {
            // 実行したいSQL
            tx.executeSql(
                "INSERT INTO Hawks(id, name) VALUES(?, ?);",
                [2, "ハイタカ"],
                () => {
                    // 成功時のコールバック
                    console.log("INSERT TABLE Success.");
                },
                () => {
                    // 失敗時のコールバック
                    console.log("INSERT TABLE Failed.");
                    return true;  // return true でロールバックする
                });
            },
            () => { console.log("Failed All."); },
            () => { console.log("Success All."); }
        );
       }} />
    </View>
  );
}

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

App.js

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { StyleSheet, Text, View, Button, FlatList } from 'react-native';
import First from './First';
import { NavigationContainer } from '@react-navigation/native';
import * as SQLite from 'expo-sqlite';

const Tab = createBottomTabNavigator();

const renderItem = ({item}) => {
    return(
        <View>
            <Text>{item.name}</Text>
        </View>
    )
}

function Second({navigation}){
    return(
     <View>
      <Text>Second</Text>
      <Button
        title="SHOW"
        onPress={() => {
        const db = SQLite.openDatabase('Database.db');
        db.transaction((tx) => {
            // 実行したいSQL
            tx.executeSql(
                "SELECT * FROM Hawks;",
                ,
                (_, resultSet) => {
                    // 成功時のコールバック
                    setItems(resultSet.rows._array);
                    console.log(`件数:${items.length}件`);
                    for (let i=0; i<items.length; i++) {
                        const id = items[i].id;
                        const name = items[i].name;
                        console.log(`${id}:${name}`);
                    }
                },
                () => {
                    // 失敗時のコールバック
                    console.log("SELECT TABLE Failed.");
                    return false;  // return true でロールバックする
                });
            },
            () => { console.log("Failed All."); },
            () => { console.log("Success All."); }
        );
        }} />
      <FlatList
         data={items}
         renderItem={renderItem}/>
     </View>
    );
}

export default function App() {
  return (
    <NavigationContainer>
        <Tab.Navigator>
            <Tab.Screen name="First" component={First}/>
            <Tab.Screen name="Second" component={Second}/>
        </Tab.Navigator>
    </NavigationContainer>
  );
}

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