React Native 是一种流行的跨平台移动应用程序开发框架，它使开发人员可以使用 JavaScript 和 React 构建本机应用程序。本地存储是一种重要的功能，它可以用来存储应用程序的数据，例如用户设置、缓存数据等。在本文中，我们将详细介绍如何在 React Native 中使用本地存储。
AsyncStorage
React Native 提供了一个名为 AsyncStorage 的 API，它允许我们在应用程序中存储简单的键值对数据。AsyncStorage 类似于浏览器中的 localStorage，但是它是异步的，因此不会阻塞 UI 线程。
保存数据
要保存数据，我们可以使用 AsyncStorage.setItem() 方法。该方法接受两个参数：键和值。例如，我们可以保存用户设置：
------ ------------ ---- -------------------------------------------- ----------------------------- ------- -------- -- ----------------- -------- -------------- -- --------------------
上面的代码将用户设置保存在本地存储中，并在成功时打印“Data saved”消息。如果出现错误，它将打印错误消息。
获取数据
要获取保存的数据，我们可以使用 AsyncStorage.getItem() 方法。该方法接受一个参数：键。例如，我们可以获取用户设置：
------ ------------ ---- -------------------------------------------- ----------------------------- ------------- -- ------------------- -------------- -- --------------------
上面的代码将从本地存储中获取用户设置，并在成功时打印它。如果出现错误，它将打印错误消息。
删除数据
要删除保存的数据，我们可以使用 AsyncStorage.removeItem() 方法。该方法接受一个参数：键。例如，我们可以删除用户设置：
------ ------------ ---- -------------------------------------------- -------------------------------- -------- -- ----------------- ---------- -------------- -- --------------------
上面的代码将从本地存储中删除用户设置，并在成功时打印“Data removed”消息。如果出现错误，它将打印错误消息。
示例应用程序
下面是一个简单的示例应用程序，它使用 AsyncStorage 存储用户的姓名和年龄，并在屏幕上显示它们。用户可以使用表单输入他们的姓名和年龄，并点击“保存”按钮将它们保存到本地存储中。当用户重新打开应用程序时，它将从本地存储中获取他们的姓名和年龄，并在屏幕上显示它们。
------ ------ - --------- --------- - ---- --------
------ - ----- ----- ---------- ------ - ---- ---------------
------ ------------ ---- --------------------------------------------
----- --- - -- -- -
----- ------ -------- - -------------
----- ----- ------- - -------------
------------ -- -
----------------------------
------------ -- --------------
-------------- -- --------------------
---------------------------
----------- -- ------------
-------------- -- --------------------
-- ----
----- -------- - -- -- -
---------------------------- -----
-------- -- ----------------- --------
-------------- -- --------------------
--------------------------- ----
-------- -- ---------------- --------
-------------- -- --------------------
--
------ -
------
----------
------------------ ---- -----
------------
----------------------
--
----------
------------------ ---- ----
-----------
---------------------
--
------- ------------ ------------------ --
----------- -------------
---------- ------------
-------
--
--
------ ------- ----上面的代码创建了一个名为 App 的组件，它包含一个名为 name 的状态和一个名为 age 的状态。它还使用 useEffect 钩子从本地存储中获取用户的姓名和年龄，并在屏幕上显示它们。当用户输入他们的姓名和年龄并点击“保存”按钮时，它将使用 AsyncStorage.setItem() 方法将它们保存到本地存储中。最后，它在屏幕上显示用户的姓名和年龄。
结论
本文介绍了如何在 React Native 中使用本地存储。我们使用 AsyncStorage API 存储简单的键值对数据，并提供了示例应用程序来演示如何在应用程序中使用本地存储。本地存储是一种重要的功能，它可以帮助我们存储应用程序的数据，并提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67259e262e7021665e185bf0