在 React Native 中，我们通常需要保存一些状态或数据以便后续使用。这可以通过使用本地存储的方法来实现，这篇文章将介绍几种 React Native 实现本地存储的方法。
AsyncStorage
AsyncStorage 是 React Native 提供的一个简单的 API，用于异步存储字符串类型的数据。它与 Web 浏览器提供的 localStorage 和 sessionStorage API 类似。
使用 AsyncStorage 需要引入组件：
import { AsyncStorage } from 'react-native';接下来，我们可以使用以下方法存储和读取数据：
// 存储数据
AsyncStorage.setItem('key', 'value');
// 读取数据
AsyncStorage.getItem('key').then((value) => {
console.log(value);
});AsyncStorage 还提供了其他方法，例如 removeItem（删除数据）和 getAllKeys（获取所有键），你可以去官方文档查看更多的使用方法。
SQLite
SQLite 是一个轻型的关系型数据库，可以在本地存储大量的结构化数据。可以使用 SQLite 在 React Native 中实现本地存储。
使用 SQLite 需要先安装依赖：
npm install --save react-native-sqlite-storage
接下来，我们可以使用以下方法创建一个数据库：
-- -------------------- ---- ------- ------ ------ ---- ------------------------------ ----- -- - --------------------- ----- ---------- --------- ---------- ------------------- --------------- --- ------------------- -- - --------------------- ----- -- --- ------ ---------- --- ------- ------- --- -------------- ---- -------- ---
在这个例子中，我们使用 SQLite.openDatabase() 方法创建了一个名为 test.db 的数据库。
在创建数据库之后，我们可以使用 executeSql() 方法执行 SQL 命令。在这里，我们创建了一个名为 test_table 的表，其中包含一个自增的 id 和一个名为 name 的文本属性。
接下来，我们可以使用以下方法插入数据：
db.transaction((tx) => {
tx.executeSql('INSERT INTO test_table (name) VALUES (?)', ['test'], (tx, res) => {
console.log(res.rowsAffected); // 返回插入的行数
});
});我们可以使用 executeSql() 方法执行 SQL 命令，向 test_table 表中插入一行数据。
最后，我们可以使用以下方法查询数据：
-- -------------------- ---- -------
------------------- -- -
--------------------- - ---- ------------ --- ---- ---- -- -
--- --- - ----------------
--- ---- - - -- - - ---- ---- -
--- --- - -----------------
---------------- ---------- ----- --------------
-
---
---在这个例子中，我们使用 executeSql() 方法执行了一个 SELECT 命令，从 test_table 中查询所有数据。
Realm
Realm 是一个跨平台数据库，可以在移动设备和 Web 浏览器中使用。Realm 支持对象和关系数据库，并提供了丰富的查询和数据更新 API。
使用 Realm 需要先安装依赖：
npm install --save realm
接下来，我们可以使用以下方法创建一个 Realm 数据库：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------------ - -
----- ---------
----------- -
----- ---------
---- ------
--
--
----- ----- - --- -------
------- ---------------
---在这个例子中，我们定义了一个名为 Person 的表，其中包含一个名为 name 的字符串属性和一个名为 age 的整数属性。
接下来，我们可以使用以下方法插入数据：
realm.write(() => {
realm.create('Person', {
name: 'Tom',
age: 18,
});
});我们可以使用 create() 方法向 Person 表中插入一行数据。
最后，我们可以使用以下方法查询数据：
-- -------------------- ---- ------- --- ------- - ------------------------ --------------------- -- ----- -- - -- - -- ----- ------ -- ---- --- -- --- -- -- -- --- -- -
在这个例子中，我们使用 objects() 方法从 Person 表中查询所有数据。
总结
本篇文章介绍了三种 React Native 实现本地存储的方法。AsyncStorage 适用于存储小量的简单数据，SQLite 适用于存储结构化数据，而 Realm 则适用于存储对象数据。
在使用这些方法时，请注意处理异常情况，例如数据插入或读取失败等。希望这篇文章对你有帮助，可以通过上面的示例代码学习如何操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64715658968c7c53b0f39878