質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

SQLite

SQLiteはリレーショナルデータベース管理システムの1つで、サーバーではなくライブラリとして使用されている。

Q&A

0回答

1721閲覧

React Native + expo-sqliteでcreate tableができない

ichi_13119

総合スコア4

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

SQLite

SQLiteはリレーショナルデータベース管理システムの1つで、サーバーではなくライブラリとして使用されている。

0グッド

0クリップ

投稿2020/06/15 14:48

######概要
React Native + expo-sqliteで買い物リストアプリを作っています。
ホーム画面ではcreate,select等問題なくできるのですが、詳細画面だとcreateの時点で失敗してしまう状態です。
動作しているホーム画面の処理を移植し、テーブル名を変えて実行してみましたが、何かエラーが出るわけでもなく、ただ失敗時の関数が実行されるだけです。
検索しても二つ目のテーブル作成に失敗したような事例は見つけられず、解決の手がかりを見つけられずにいます。

######したいこと
詳細画面でもsqliteのデータベースにテーブルを作り、データを登録したい。
テーブル名=ホーム画面のリストの名前

######試したこと
""と+でSQL文を書いてみたり、テンプレートリテラルを使ったり、テーブル名を固定のもので書いてみましたが、どれもうまくいきませんでした。(Detailjs内create文)

Appjs

1import React from "react"; 2import { NavigationContainer } from '@react-navigation/native'; 3import { createStackNavigator } from '@react-navigation/stack'; 4 5import Home from './screens/home'; 6import Details from './screens/details'; 7 8const Stack = createStackNavigator(); 9 10export default function App() { 11 return ( 12 <NavigationContainer> 13 <Stack.Navigator initialRouteName="Home"> 14 <Stack.Screen 15 name="Home" 16 component={Home} 17 options={{ headerStyle: {backgroundColor: '#edffbe'}}} 18 /> 19 <Stack.Screen 20 name="Details" 21 component={Details} 22 options={({ route }) => ({ 23 title: route.params.title, 24 headerStyle: {backgroundColor: '#edffbe'} 25 }) 26 } /> 27 </Stack.Navigator> 28 </NavigationContainer> 29 ); 30}

Homejs

1import React, { useState, useEffect } from "react"; 2import { SafeAreaView, StyleSheet, Text, View, AsyncStorage, Modal, TextInput, FlatList, TouchableOpacity } from "react-native"; 3import * as SQLite from 'expo-sqlite'; 4import { Button, Divider, ListItem } from 'react-native-elements'; 5import Icon from 'react-native-vector-icons/FontAwesome'; 6 7 8export default function Home({ navigation }) { 9 const [modalVisible, setModalVisible] = useState(false); 10 const [homeLists, setHomeLists] = useState([]); 11 const [title, setTitle] = useState(""); 12 13 const db = SQLite.openDatabase('homeTitles'); 14 15//create table 16 const initialDB = () => { 17 db.transaction(tx => { 18 tx.executeSql( 19 `create table if not exists homeTitles (_id text primary key autoincrement not null, title text);`, 20 [], 21 () => { 22 console.log('Success create table'); 23 }, 24 () => { 25 alert('Miss'); 26 return true; 27 } 28 ); 29 } 30 )}; 31 32table load 33 const loadDB = () => { 34 db.transaction(tx => { 35 tx.executeSql( 36 "select * from homeTitles;", 37 [], 38 (_, { rows }) => {setHomeLists(rows._array); 39 console.log(db) 40 }, 41 () => {alert('Missing load'); 42 return true; 43 } 44 ) 45 }) 46 } 47 48 const openModal = () => { 49 setModalVisible(true) 50 } 51 52 const closeModal = () => { 53 setModalVisible(false) 54 } 55 56 const addHomeTitle = (homeList) => { 57 db.transaction(tx => { 58 tx.executeSql( 59 'insert into homeTitles (title) values (?);', 60 [homeList], 61 () => {closeModal(); 62 setTitle(""); 63 }, 64 () => {alert('Missing add title'); 65 return false; 66 } 67 ); 68 }, 69 ) 70 }; 71 72 const deleteDB = () => { 73 db.transaction(tx => { 74 tx.executeSql( 75 `delete from homeTitles`, 76 [], 77 () => {alert("delete titles")}, 78 () => {alert('Missing delete titles') 79 return true; 80 } 81 ) 82 }, 83 ); 84 } 85 86 return ( 87 <SafeAreaView style={styles.container}> 88 {/* <ListItem 89 data={homeLists} 90 style={styles.homeTitle} 91 renderItem={({ item }) => <Item title={item.title} 92 keyExtractor={item => item.id} 93 /> 94 } 95 /> */} 96 {homeLists.length > 0 ? ( 97 <FlatList 98 data={homeLists} 99 extraData={homeLists} 100 keyExtractor={item => item.id.toString()} 101 renderItem={({item}) => 102 <View style={styles.homeTitle} 103 > 104 <TouchableOpacity 105 onPress={() => navigation.navigate('Details', {title: item.title})} 106 // onPress={() => console.log(item.title)} 107 style={{width: "100%"}} 108 > 109 <Text style={styles.title} 110 > 111 {item.title} 112 </Text> 113 </TouchableOpacity> 114 </View> 115 } 116 /> 117 ) : ( 118 <Text> 119 NoItem 120 </Text> 121 ) 122 } 123 <Button 124 icon={<Icon name="plus-circle" color="#06f" size={45} />} 125 type="clear" 126 buttonStyle={{ padding: 0, marginBottom: 10, margin: 0 }} 127 onPress={() => openModal()} 128 animationType="fade" 129 /> 130 <Button 131 title="Refresh" 132 onPress={() => initialDB()} 133 /> 134 {/* <Button 135 title="look" 136 onPress={() => List()} 137 /> */} 138 <Button 139 title="load" 140 onPress={() => loadDB()} 141 /> 142 <Button 143 title="delete" 144 onPress={() => deleteDB()} 145 /> 146 <Modal 147 visible={modalVisible} 148 transparent={true} 149 > 150 <View style={{height: "100%", backgroundColor: "#000", opacity: .7}}> 151 <View style={{alignItems: "center", justifyContent: "center"}}> 152 <View style={{width: "75%", height: "85%", backgroundColor: "#fff", borderRadius: 50, padding: 30}}> 153 <TextInput 154 style={{borderBottomWidth: 1}} 155 // value={homeTitle} 156 onChangeText={text => setTitle(text)} 157 /> 158 <View style={{flexDirection: "row", justifyContent: "space-around"}}> 159 <Button 160 title="保存" 161 type="outline" 162 buttonStyle={{ padding: 0, marginBottom: 10, margin: 0 }} 163 onPress={() => { 164 addHomeTitle(title)}} 165 /> 166 <Button 167 title="キャンセル" 168 type="outline" 169 buttonStyle={{ padding: 0, marginBottom: 10, margin: 0 }} 170 onPress={() => closeModal()} 171 /> 172 </View> 173 </View> 174 </View> 175 </View> 176 </Modal> 177 </SafeAreaView> 178 ); 179} 180 181const styles = StyleSheet.create({略}); 182

Detailjs

1import React, { useState, useEffect } from "react"; 2import { SafeAreaView, StyleSheet, Text, View, AsyncStorage, Modal, TextInput, FlatList, TouchableOpacity } from "react-native"; 3import * as SQLite from 'expo-sqlite'; 4import { Button, Divider, ListItem } from 'react-native-elements'; 5import Icon from 'react-native-vector-icons/FontAwesome'; 6import * as FileSystem from 'expo-file-system'; 7 8export default function Details({ route, navigation }) { 9 const title = route.params.title; 10 const [modalVisible, setModalVisible] = useState(false); 11 const [listItems, setListItems] = useState([]); 12 const [lists, setLists] = useState(""); 13 const [items, setItems] = useState([]); 14 15 const db = SQLite.openDatabase('homeTitles'); 16 17 const initialDB = () => { 18 console.log(FileSystem); 19 db.transaction(tx => { 20 tx.executeSql( 21 "create table if not exists list (_id text primary key autoincrement not null, title text);", 22 // "create table if not exists " + {title} + " (_id text primary key autoincrement not null, title text);", 23 // `create table if not exists ${title} (_id text primary key autoincrement not null, title text);`, 24 [], 25 () => { 26 console.log('Success create table'); 27 }, 28 () => { 29 console.log(tx); 30 // return true; 31 } 32 ); 33 } 34 )}; 35 36 const loadDB = () => { 37 console.log(db); 38 db.transaction(tx => { 39 tx.executeSql( 40 `select * from ${title};`, 41 [], 42 (_, { rows }) => {setItems(rows._array); 43 }, 44 () => {alert('Missing load'); 45 return true; 46 } 47 ) 48 }) 49 } 50 51 return ( 52 <View> 53 <Text> 54 {title} 55 </Text> 56 <Button 57 title="Refresh" 58 onPress={() => initialDB()} 59 /> 60 <Button 61 title="load" 62 onPress={() => loadDB()} 63 /> 64 </View> 65 ) 66}

解決策、手がかり、情報が足りない等ありましたら教えていただけると幸いです。
よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問