在 React Native 中，我们经常需要在应用程序中存储和读取数据。这些数据可以是用户设置、本地缓存或其他应用程序状态。而 AsyncStorage 是 React Native 提供的一个简单的、异步的、持久化的 key-value 存储系统，用于存储应用程序数据。在本文中，我们将深入了解如何在 React Native 中使用 AsyncStorage 存储数据。
安装 AsyncStorage
在 React Native 中，AsyncStorage 是 React Native 内置的一个 API，因此我们不需要安装任何额外的库。只需在应用程序中导入 AsyncStorage 即可开始使用它。我们可以使用以下命令在项目中安装 AsyncStorage：
npm install @react-native-async-storage/async-storage
存储数据
在 React Native 中，我们可以使用 setItem() 方法存储数据到 AsyncStorage 中。该方法接受两个参数：第一个参数是 key，第二个参数是 value。下面是一个示例代码：
-- -------------------- ---- -------
------ ------------ ---- --------------------------------------------
----- --------- - ----- ----- ------ -- -
--- -
----- ------------------------- ------
- ----- --- -
--------------
-
-在上面的代码中，我们首先导入 AsyncStorage，然后定义了一个名为 storeData 的函数。该函数接受两个参数：key 和 value。我们使用 setItem() 方法将 key-value 存储到 AsyncStorage 中。由于 setItem() 方法是异步的，因此我们需要使用 async/await 来确保在存储数据完成之前不会执行下一行代码。
读取数据
在 React Native 中，我们可以使用 getItem() 方法从 AsyncStorage 中读取数据。该方法接受一个参数：key。下面是一个示例代码：
-- -------------------- ---- -------
------ ------------ ---- --------------------------------------------
----- ------- - ----- ----- -- -
--- -
----- ----- - ----- -------------------------
-------- --- ----- -
------ -----
-
- -------- -
--------------
-
-在上面的代码中，我们定义了一个名为 getData 的函数，该函数接受一个参数：key。我们使用 getItem() 方法从 AsyncStorage 中读取 key 对应的 value。由于 getItem() 方法也是异步的，因此我们需要使用 async/await 来确保在读取数据完成之前不会执行下一行代码。
示例代码
下面是一个完整的示例代码，展示了如何在 React Native 中使用 AsyncStorage 存储和读取数据：
-- -------------------- ---- -------
------ ------ ---------- ---------- ---- --------
------ ------ ----- ---------- ------- ---- ---------------
------ ------------ ---- --------------------------------------------
----- --- - -- -- -
----- ------ -------- - -------------
----- ------------ -------------- - -------------
------------ -- -
----- ------- - ----- -- -- -
--- -
----- ----- - ----- ----------------------------
-------- --- ----- -
--------------------
-
- -------- -
--------------
-
-
---------
-- ---
----- --------- - ----- ------- -- -
--- -
----- ---------------------------- ------
--------------------
- ----- --- -
--------------
-
-
------ -
------
----------- ---- ------------
----------
------------------ -- --------------
------------
--
-------
------------ -----
----------- -- ----------------
--
----------- -
------------ ----- -------------------
- ----
-
-------
--
--
------ ------- ----在上面的代码中，我们定义了一个名为 App 的组件。该组件包含一个文本输入框和一个按钮，用户可以输入一些文本并将其存储到 AsyncStorage 中。我们还使用了 useState 钩子来追踪用户输入的文本和存储在 AsyncStorage 中的文本。在组件渲染时，我们使用 useEffect 钩子从 AsyncStorage 中读取存储的文本。当用户点击按钮时，我们将用户输入的文本存储到 AsyncStorage 中，并更新组件状态以显示存储的文本。
结论
在本文中，我们深入了解了如何在 React Native 中使用 AsyncStorage 存储和读取数据。我们学习了如何使用 setItem() 和 getItem() 方法，并提供了一个完整的示例代码来演示如何在应用程序中使用 AsyncStorage。通过使用 AsyncStorage，我们可以轻松地存储和读取应用程序数据，以便在需要时使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6753bf6e8bd460d3ada919a0