在 React Native 移动应用程序中保存数据

所以你现在像我一样一直在摆弄 React Native 。如果您像我一样，那么您已经准备好在您的移动应用程序中查看保存和加载数据。

现在我之前已经演示过 使用 Ionic Framework 保存数据 ，所以我要分享的目标将非常相似。我们将专注于 React Native 的 AsyncStorage 类来完成我们需要的。

这里有一点免责声明。在撰写本文时，React Native 几乎只适用于 iOS，因此您需要一台 Mac 才能继续本文中的内容。

有了这个，继续打开你的终端并执行以下命令来启动一个新的 React Native 项目：

 react-native init ReactProject

我们不会在本教程中使用任何外部组件，所以现在我们已经准备好开始编码了。

根据 React Native 文档 ，持久化数据的推荐方法是通过 AsyncStorage 类。如果您熟悉 HTML5 本地存储，那么您会发现两者的功能非常相似。

AsyncStorage 使用键值对来保存数据，你可以这样做：

 react-native init ReactProject

如果要获取保存的数据，可以根据键值进行查找。它是一个异步操作，如下所示：

 react-native init ReactProject

getItem 方法返回一个承诺，因为它当然是异步的。

考虑到所有这些，打开项目的 index.ios.js 文件并包含以下代码：

 react-native init ReactProject

让我们分解一下上面的代码在做什么。

 react-native init ReactProject

当应用程序加载时，将调用 componentDidMount 函数。我们将加载保存的任何数据并在完成时设置状态。

 react-native init ReactProject

上面呈现的项目用于显示保存的内容和保存新的用户输入数据。当用户输入文本时，调用 saveData 函数保存用户提供给我们的所有内容。

最后我们有 saveData 功能：

 react-native init ReactProject

上面的函数会将输入保存到存储中，然后立即设置状态，以便在屏幕上显示。我不会复习包含的样式代码，因为它不会推进本文的目的。

继续尝试吧。保存一些数据，退出应用程序，然后重新打开。你的数据还在吗？

结论

虽然您可以使用 HTML5 本地存储，但 Facebook 通过 AsyncStorage 类创建了一种更优化的方法来在 React Native 中存储数据。

可以在下面看到本文的视频版本。