SQLiteデータベースからデータを抽出して、ドラッグできるリストを作成する

SQLiteデータベースからデータを抽出して、別ページでFlatListで表示する

App.js

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import HomeScreen from "./screens/HomeScreen";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import SecondScreen from "./screens/SecondScreen";

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen component={HomeScreen} name="HomeScreen" />
        <Stack.Screen component={SecondScreen} name="SecondScreen" />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

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

screens/HomeScreen.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 HomeScreen({ navigation }) {
  const [items, setItems] = useState();

  const createTable = () => {
    const db = SQLite.openDatabase("Body.db");
    db.transaction(
      (tx) => {
        tx.executeSql(
          "CREATE TABLE IF NOT EXISTS Height(id integer primary key not null, name text not null, height text not null); ",
          null,
          () => {
            console.log("CREATE TABLE Success.");
          },
          () => {
            console.log("CREATE TABLE Failed.");
            return true;
          }
        );
      },
      () => {
        console.log("Failed All.");
      },
      () => {
        console.log("Succces All.");
      }
    );
  };

  const addItem = () => {
    const db = SQLite.openDatabase("Body.db");
    db.transaction(
      (tx) => {
        tx.executeSql(
          "INSERT INTO Height (id, name, height) VALUES (?,?,?);",
          [1, "ikeda", "174cm"],
          () => {
            console.log("INSERT TABLE Success.");
          },
          () => {
            console.log("INSERT TABLE Failed.");
            return true;
          }
        );
      },
      () => {
        console.log("Failed All.");
      },
      () => {
        console.log("Succces All.");
      }
    );
  };

  const selectItem = () => {
    const db = SQLite.openDatabase("Body.db");
    db.transaction(
      (tx) => {
        tx.executeSql(
          "SELECT * FROM Height; ",
          ,
          (_, 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;
              const height = items[i].height;
              console.log(`${id}:${name}:${height}`);
            }
          },
          () => {
            console.log("SELECT TABLE Failed.");
            return false;
          }
        );
      },
      () => {
        console.log("Failed All.");
      },
      () => {
        console.log("Succces All.");
      }
    );
  };

  return (
    <View>
      <Text>HomeScreen</Text>
      <Button title="CREATE TABLE" onPress={createTable} />
      <Button title="ADD ITEM" onPress={addItem} />
      <Button title="SELECT ITEM" onPress={selectItem} />
      <View style={{ marginTop: 100 }}>
        <Button
          title="Next Page"
          onPress={() => navigation.navigate("SecondScreen", { items: items })}
        />
      </View>
    </View>
  );
}

screens/SecondScreen.js

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

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

export default function SecondScreen({ route }) {
  const { items } = route.params;
  return (
    <View>
      <Text>SecondScreen</Text>
      <FlatList data={items} renderItem={renderItem} />
    </View>
  );
}

次に、flatlistから、react-native-draglistへ変更する。