时间戳

首页 > 解决方案 > 如何在 React Native 中保存 FlatList 中的项目？

javascript - 如何在 React Native 中保存 FlatList 中的项目？

问题描述

我正在开发一个简单的语言学习应用程序，并且正在使用CardsList和呈现一个抽认卡的平面列表CardItem，这里是组件：

const CardsList = (props) => {
  return (
    <View>
      <FlatList
        data={cards}
        renderItem={({ item }) => (
          <CardItem card={item} />
        )}
      />
    </View>
  );
};

const CardItem = (props) => {
  return (
    <View>
      <Image />
      <SaveButton /
    <View>
  )
};

cards数据当前是从一个单独的 json 文件传入的。

我想为SaveButton组件实现功能，允许用户复制将显示在另一个页面上的某些卡片，以便他们有一个单独的卡片列表，他们正在努力解决他们想要更多练习的卡片。

任何人都可以推荐我可以解决这个问题的最佳方法吗？最好先将项目推入新数组吗？我还希望将项目存储到另一页的内存中吗？本地存储是解决此问题的适当方法，还是我需要涉及数据库。闪存卡列表可能超过 2,500 多张。

标签： javascriptreact-nativelocal-storagereact-native-flatlist

解决方案

显然，API + DB 是处理用户数据的最佳方式。但是，如果您不想或无法做到，您可以将这些数据存储在设备中。

使用AsyncStorage存储在您的设备中。请注意，该方法只能存储字符串，因此您需要对 JSON 进行字符串化和解析。

存储数据

const favList = [
    {
        id: 0,
        title: "My fav 1"
    }
]

AsyncStorage.setItem('user_fav_list', JSON.stringify(favList))

获取数据

const favList = await AsyncStorage.getItem('user_fav_list')
const userFavList = JSON.parse(favList)

推荐阅读