Usando SQLite com React Native

 module.exports={ ..., dependências: { ..., "react-native-sqlite-storage": { plataformas: { android: { sourceDir: "../node_modules/react-native-sqlite-storage/platforms/android-native", packageImportPath:"import io.liteglue.SQLitePluginPackage;", packageInstance:"new SQLitePluginPackage ()" } } } ... } ...
};

Se você estiver executando uma versão mais antiga do React Native, deverá atualizar manualmente os arquivos Gradle . Para obter a configuração completa, consulte a documentação da biblioteca .

Implementar um serviço de armazenamento de dados

Agora, estamos prontos para implementar um serviço de armazenamento de dados. Apresentaremos um novo arquivo .ts chamado db-service.ts , onde podemos adicionar todas as nossas operações db . Primeiro, vamos criar um método para obter uma conexão db .

Como estamos usando o TypeScript, podemos instalar @ types/react-native-sqlite-storage para usar os tipos incluídos. Se você se limitar ao JavaScript, não precisará instalar esta biblioteca.

Adicione o método de conexão db usando o código abaixo:

 import {openDatabase} de'react-native-sqlite-storage'; export const getDBConnection=async ()=> { retornar openDatabase ({nome:'todo-data.db', localização:'padrão'});
};

Se uma tabela ainda não existe quando iniciamos o aplicativo, precisamos criar uma. Execute o seguinte código para adicionar outro método:

 export const createTable=async (db: SQLiteDatabase)=> { //cria a tabela se não existir const query=`CREATE TABLE IF NOT EXISTS $ {tableName} ( valor TEXTO NÃO NULO ); `; aguardar db.executeSql (consulta);
};

Como estamos usando APIs baseadas em promessa na biblioteca, é importante adicionar o código abaixo ao nosso arquivo db-service.ts :

 enablePromise (true);

A seguir, adicionaremos métodos para salvar, excluir e obter nossos itens de tarefas pendentes. Depois de adicionar esses métodos, nosso arquivo de serviço db se parecerá com o bloco de código abaixo:

 import {enablePromise, openDatabase, SQLiteDatabase} de'react-native-sqlite-storage';
importar {ToDoItem} de'../models'; const tableName='todoData'; enablePromise (true); export const getDBConnection=async ()=> { retornar openDatabase ({nome:'todo-data.db', localização:'padrão'});
}; export const createTable=async (db: SQLiteDatabase)=> { //cria a tabela se não existir const query=`CREATE TABLE IF NOT EXISTS $ {tableName} ( valor TEXTO NÃO NULO ); `; aguardar db.executeSql (consulta);
}; export const getTodoItems=async (db: SQLiteDatabase): Promise => { tentar { const todoItems: ToDoItem []=[]; resultados const=await db.executeSql (`SELECT rowid as id, value FROM $ {tableName}`); results.forEach (result=> { for (let index=0; index  { const insertQuery= `INSERT OR REPLACE INTO $ {tableName} (rowid, value) values` + todoItems.map (i=> `($ {i.id},'$ {i.value}')`).join (','); return db.executeSql (insertQuery);
}; export const deleteTodoItem=async (db: SQLiteDatabase, id: number)=> { const deleteQuery=`DELETE from $ {tableName} onde rowid=$ {id}`; esperar db.executeSql (deleteQuery);
}; export const deleteTable=async (db: SQLiteDatabase)=> { const query=`drop table $ {tableName}`; aguardar db.executeSql (consulta);
};

Adicionamos um método deleteTable , que será útil quando estivermos desenvolvendo nosso aplicativo. Posteriormente, adicionaremos um recurso para usuários que limpa todos os dados usando o método deleteTable .

Podemos usar rowid , que vem com o SQLite, como chave primária. Atualizamos nossos itens de tarefas para ter um ID e um valor em vez de uma string simples para que possamos excluir itens facilmente.

A seguir, adicionaremos um modelo para nosso tipo ToDoItem . Adicione o seguinte código em um arquivo chamado index.ts em outra pasta chamada modelos em:

 exportar tipo ToDoItem={ número de identidade; valor: string;
};

Usando o serviço db

Temos que usar nosso serviço db em App.tsx . Siga estas quatro etapas:

1.) Atualize o componente ToDoItem e o componente App para usar o novo tipo ToDoItem
2.) Carregar dados do SQLite
3.) Salve os dados no db
4.) Atualize os itens excluídos no db

Primeiro, vamos terminar de configurar nosso db , então daremos uma olhada no resultado final de App.tsx e ToDoItem.tsx arquivos.

Carregando dados

Para carregar os dados em nosso aplicativo, usaremos os ganchos useEffect e useCallback :

 const loadDataCallback=useCallback (async ()=> { tentar { const initTodos=[{id: 0, value:'go to shop'}, {id: 1, value:'coma pelo menos um alimentos saudáveis'}, {id: 2, value:'Faça alguns exercícios'}] ; const db=espera getDBConnection (); aguarde a tabela de criação (db); const storedTodoItems=await getTodoItems (db); if (storedTodoItems.length) { setTodos (storedTodoItems); } senão { aguarde saveTodoItems (db, initTodos); setTodos (initTodos); } } catch (erro) { console.error (erro); } }, []); useEffect (()=> { loadDataCallback (); }, [loadDataCallback]);

No snippet de código acima, estamos lendo dados do db . Se tivermos itens de tarefas pendentes armazenados, inicializamos o aplicativo com eles. Do contrário, manteremos os valores iniciais no db e inicializaremos o aplicativo usando esses dados.

Adicionando um item

Para adicionar um item de tarefa, execute o seguinte código:

 const addTodo=async ()=> { if (! newTodo.trim ()) return; tentar { const newTodos=[... todos, { id: todos.reduce ((acc, cur)=> { if (cur.id> acc.id) return cur; return acc; }). id + 1, valor: newTodo }]; setTodos (newTodos); const db=espera getDBConnection (); aguarde saveTodoItems (db, newTodos); setNewTodo (''); } catch (erro) { console.error (erro); } };

Excluindo um item

Por último, execute o código abaixo para excluir um item de tarefa:

 const deleteItem=async (id: número)=> { tentar { const db=espera getDBConnection (); aguarde deleteTodoItem (db, id); todos.splice (id, 1); setTodos (todos.slice (0)); } catch (erro) { console.error (erro); } };

Nosso arquivo final App.tsx deve ser semelhante ao código abaixo:

/** * Amostra de aplicativo nativo React * https://github.com/facebook/react-native * * Gerado com o modelo TypeScript * https://github.com/react-native-community/react-native-template-typescript * * @format */
import React, {useCallback, useEffect, useState} de'react';
import { Botão, SafeAreaView, ScrollView, Barra de status, StyleSheet, Texto, TextInput, useColorScheme, Visualizar,
} de'react-native';
import {ToDoItemComponent} de'./components/ToDoItem';
importar {ToDoItem} de'./models';
import {getDBConnection, getTodoItems, saveTodoItems, createTable, clearTable, deleteTodoItem} de'./services/db-service';
const App=()=> { const isDarkMode=useColorScheme ()==='escuro'; const [todos, setTodos]=useState  ([]); const [newTodo, setNewTodo]=useState (''); const loadDataCallback=useCallback (async ()=> { tentar { const initTodos=[{id: 0, value:'go to shop'}, {id: 1, value:'coma pelo menos um alimentos saudáveis'}, {id: 2, value:'Faça alguns exercícios'}] ; const db=espera getDBConnection (); aguarde a tabela de criação (db); const storedTodoItems=await getTodoItems (db); if (storedTodoItems.length) { setTodos (storedTodoItems); } senão { aguarde saveTodoItems (db, initTodos); setTodos (initTodos); } } catch (erro) { console.error (erro); } }, []); useEffect (()=> { loadDataCallback (); }, [loadDataCallback]); const addTodo=async ()=> { if (! newTodo.trim ()) return; tentar { const newTodos=[... todos, { id: todos.length? todos.reduce ((acc, cur)=> { if (cur.id> acc.id) return cur; return acc; }). id + 1: 0, valor: newTodo }]; setTodos (newTodos); const db=espera getDBConnection (); aguarde saveTodoItems (db, newTodos); setNewTodo (''); } catch (erro) { console.error (erro); } }; const deleteItem=async (id: número)=> { tentar { const db=espera getDBConnection (); aguarde deleteTodoItem (db, id); todos.splice (id, 1); setTodos (todos.slice (0)); } catch (erro) { console.error (erro); } }; Retorna (      Aplicativo ToDo    {todos.map ((todo)=> (  ))}    setNewTodo (text)}/>     );
};
estilos const=StyleSheet.create ({ appTitleView: { marginTop: 20, justifyContent:'center', flexDirection:'row', }, appTitleText: { fontSize: 24, fontWeight:'800' }, textInputContainer: { marginTop: 30, marginLeft: 20, marginRight: 20, borderRadius: 10, borderColor:'preto', borderWidth: 1, justifyContent:'flex-end' }, textInput: { borderWidth: 1, borderRadius: 5, altura: 30, margem: 10, backgroundColor:'rosa' },
});
exportar aplicativo padrão;

Por último, nosso arquivo final ToDoItem.tsx deve ter o seguinte bloco de código:

 import React from'react';
import { Botão, StyleSheet, Texto, Visualizar,
} de'react-native';
importar {ToDoItem} de'../models';
export const ToDoItemComponent: React.FC <{ todo: ToDoItem; deleteItem: Function;
}>=({todo: {id, valor}, deleteItem})=> { Retorna (    {valor}    deleteItem (id)} title="concluído" color="# 841584" acessibilidadeLabel="adicionar item de tarefa" />  );
};
estilos const=StyleSheet.create ({ todoContainer: { marginTop: 10, paddingHorizontal: 24, backgroundColor:'deepskyblue', marginLeft: 20, marginRight: 20, borderRadius: 10, borderColor:'preto', borderWidth: 1, }, todoTextContainer: { justifyContent:'center', flexDirection:'row', }, Título da seção: { fontSize: 20, fontWeight:'400', }
});

Aí está! Nosso aplicativo de tarefas React Native finalizado deve ser semelhante à imagem abaixo:

Conclusão

Neste tutorial, aprendemos como conectar um banco de dados SQLite a um aplicativo React Native e, em seguida, criamos nosso próprio aplicativo usando TypeScript.

Usamos react-native-sqlite-storage , uma biblioteca de conectores e concluímos a operação CRUD. Em seguida, combinamos essas operações com nossas atualizações de estado React e consideramos a diferença entre gerenciamento de estado simples e dados persistentes.

Espero que tenha gostado do artigo e não se esqueça de comentar quaisquer ideias e melhorias. Boa programação!

A postagem Usando SQLite com React Native apareceu primeiro em LogRocket Blog .