SQLiteデータベースを使用し、配列形式のデータをデータベースへ登録する②（JavaScript）

②

HomeScreen.js

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

export default function HomeScreen({ navigation }) {
  const [arrayName, setArrayName] = useState([
    "ミサゴ",
    "イヌワシ",
    "トビ",
    "ハイタカ",
  ]);
  const [arrayId, setArrayId] = useState(["5", "6", "7", "8"]);

  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("Alpha.db");
          db.transaction(
            (tx) => {
              // 実行したいSQL
              tx.executeSql(
                "CREATE TABLE IF NOT EXISTS Hawk(stringId text 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.");
            }
          );
        }}
      />
      <Button
        title="ADD_2"
        onPress={() => {
          const db = SQLite.openDatabase("Alpha.db");
          db.transaction(
            (tx) => {
              for (let i = 0; i < arrayId.length; i++) {
                // 実行したいSQL
                tx.executeSql(
                  "INSERT INTO Hawk(stringId, name) VALUES(?, ?);",
                  [`${arrayId[i]}`, `${arrayName[i]}`],
                  () => {
                    // 成功時のコールバック
                    console.log("INSERT TABLE Success.");
                  },
                  () => {
                    // 失敗時のコールバック
                    console.log("INSERT TABLE Failed.");
                    return true; // return true でロールバックする
                  }
                );
              }
            },
            () => {
              console.log("Failed All.");
            },
            () => {
              console.log("Success All.");
            }
          );
        }}
      />
      <Button
        title="Next Page"
        onPress={() => navigation.navigate("NextScreen")}
      />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  textInput: {
    borderWstringIdth: 1,
    height: "auto",
    wstringIdth: "auto",
    margin: 10,
    padding: 10,
  },
});

NextScreen.jsとApp.jsは、①と同じ。

これだと、どのデータをどこに入れるかを別の配列で指定していることになります。

さらに、オブジェクトの配列に変更してもできるでしょう。（未掲載）

ただし、目標は、react-native-draglistライブラリで使用したいので、この場合、データは配列で出力されますので、この方法でやっていきます。