Я новичок в мире React Native и пытаюсь учиться, разрабатывая для себя простые проекты. Я пытаюсь создать приложение списка задач, и теперь я хочу, чтобы мои данные сохранялись с помощью sqlite, но я столкнулся с двумя проблемами:
1 - Нарушение инварианта: "основной" не зарегистрирован. Это может произойти, если:
AppRegistry.registerComponent не был вызван., js engine: hermes
в node_modules/react-native/Libraries/Core/ExceptionsManager.js:102:17 в reportException
в node_modules/react-native/Libraries/Core/ExceptionsManager.js:148:19 в handleException2 — TypeError: невозможно преобразовать нулевое значение в объект, движок js: hermes в node_modules/react-native/Libraries/Core/ExceptionsManager.js:102:17 в reportException в node_modules/react-native/Libraries/Core/ExceptionsManager.js:148:19 в handleException в node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:39 в handleError в node_modules/expo/build/errors/ExpoErrorManager.js:25:19 в errorHandler в node_modules/expo/build/errors/ExpoErrorManager.js:30:24 в в node_modules/@react-native/polyfills/error-guard.js:49:36 в ErrorUtils.reportFatalError в node_modules/metro-runtime/src/polyfills/require.js:225:40 в guardedLoadModule в node_modules/metro-runtime/src/polyfills/require.js:127:23 в metroRequire по адресу http://192.168.1.61:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:null в глобальном масштабе
Это код в моем файле TodoListScreen.js:
import React, { useState, useEffect } from "react";
import {
View,
StatusBar,
Text,
TextInput,
TouchableOpacity,
Image,
Appearance,
StyleSheet,
} from "react-native";
import Icon from "react-native-vector-icons/MaterialIcons";
import SQLite from "react-native-sqlite-storage";
const db = SQLite.openDatabase(
{
name: "TodoList",
location: "default",
},
() => {},
(error) => {
console.info(error);
}
);
const createTable = () => {
// create table if not exists
db.transaction((tx) => {
tx.executeSql(`CREATE TABLE IF NOT EXISTS todos (id INTEGER PRIMARY KEY AUTOINCREMENT, value TEXT NOT NULL);`);
});
};
const TodoListScreen = () => {
const [todos, setTodos] = useState([]);
const [text, setText] = useState("");
const fetchTodos = () => {
db.transaction((tx) => {
tx.executeSql(
"SELECT * FROM todos",
[],
(_, { rows }) => {
setTodos(rows._array);
},
(_, error) => {
console.info("Error fetching todos: ", error);
}
);
});
};
const handleAddTodo = () => {
if (text.length > 0) {
db.transaction((tx) => {
tx.executeSql(
"INSERT INTO todos (text) VALUES (?)",
[todoText],
() => {
console.info("Todo added successfully");
fetchTodos();
setTodoText("");
},
(_, error) => {
console.info("Error adding todo: ", error);
}
);
});
}
};
const handleRemoveTodo = (id) => {
db.transaction((tx) => {
tx.executeSql(
"DELETE FROM todos WHERE id = ?",
[id],
() => {
console.info("Todo deleted successfully");
fetchTodos();
},
(_, error) => {
console.info("Error deleting todo: ", error);
}
);
});
};
const systemTheme = Appearance.getColorScheme(); // Retrieve the system theme
const [themeMode, setThemeMode] = useState(systemTheme);
useEffect(() => {
createTable(); // create table in db if not exists
fetchTodos(); // fetch db todos
const subscription = Appearance.addChangeListener(({ colorScheme }) => {
setThemeMode(colorScheme === "dark");
});
return () => {
subscription.remove();
};
}, []);
const toggleDarkMode = () => {
themeMode == "light" ? setThemeMode("dark") : setThemeMode("light");
};
const containerStyle =
themeMode == "light" ? styles.containerDark : styles.containerLight;
const iconColor = themeMode == "light" ? "white" : "#292929";
const textColor = themeMode == "light" ? "white" : "#292929";
return (
<View style = {[styles.container, containerStyle]}>
<StatusBar style = {styles.bar}></StatusBar>
<Text style = {[styles.title, { color: textColor }]}>Da Fá</Text>
{todos.length > 0 && todos.map((todo) => (
<TouchableOpacity
key = {todo.id}
style = {styles.todoContainer}
onPress = {() => handleRemoveTodo(todo.id)}
>
<Text style = {[styles.delete, { borderColor: textColor }]}></Text>
<Text style = {[styles.todoText, { color: textColor }]}>
{todo.text}
</Text>
</TouchableOpacity>
))}
<View style = {styles.inputContainer}>
<TouchableOpacity style = {styles.addButton} onPress = {handleAddTodo}>
<Icon name = "add" size = {24} color = {iconColor} />
</TouchableOpacity>
<TextInput
style = {[styles.input, { color: textColor }]}
placeholder = "Add a todo..."
placeholderTextColor = {textColor}
value = {text}
onChangeText = {(value) => setText(value)}
onSubmitEditing = {handleAddTodo}
/>
</View>
</View>
);
};
export default TodoListScreen;
Я тестирую его на своем устройстве Android через приложение expo go, может ли кто-нибудь мне помочь?
Спасибо!
Эту ошибку иногда бывает трудно отладить, потому что причина не всегда очевидна. Единственное, что бросается в глаза, это то, что вы используете и Expo, и внешнюю библиотеку react-native-sqlite-storage. Expo может быть немного привередливым к нативным зависимостям, что может быть причиной проблемы.
Можете ли вы попробовать удалить всю логику SQLite с этого экрана и просто отобразить пустой вид? Если это сработает, я бы предположил, что проблема в react-native-sqlite-storage. Вы можете попробовать еще раз пройти инструкции по установке библиотеки, чтобы убедиться, что вы все сделали правильно. Но вам может понадобиться переключиться на использование expo-sqlite (npx expo install expo-sqlite). Эта библиотека предоставляется Expo, поэтому она гарантированно будет работать с вашей средой разработки.
вы спасли меня! Просто удалил пакет sqlite и установил его из библиотеки expo и изменил зависимости, чтобы он работал! Спасибо за помощь, чувак, я у тебя в долгу :)