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

Question

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

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

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

当前正在从单独的 json 文件传入 cards 数据。

我想实现 SaveButton 组件的功能，允许用户复制某些卡片，这些卡片将显示在另一个页面上，这样他们就有一个单独的卡片列表，他们正在为此苦苦挣扎他们想给更多的练习。

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

Answer 1

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

使用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)

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

How to save items from a FlatList in React Native?

javascript

local-storage

react-native

react-native-flatlist