0

美好的一天 React Native 开发者！

我一直在尝试使用 react native AsyncStorage 在我的字典应用程序中实现书签功能，但是有一个问题。我不知道该怎么做。

数组如下所示：

const [Words, setWords] = useState([
    {name: 'Ab initio', meaning: 'From the beginning.', id: '1' },

    {name: 'A.R.S', meaning: 'Arizona Revised Statutes, Books containing the laws that the Arizona Legislature has enacted.', id: '2' }, 
    
    {name: 'Abandon. ', meaning: 'To intentionally give up a right or property without any plan of reclaiming it in the future; to desert a spouse or child.', id: '3' }, 
    
    {name: 'Abandonment', meaning: 'Giving up a legal right.', id: '4' }, 
    
    {name: 'Abatable nuisance.', meaning: 'A nuisance that can be reduced.', id: '5' },
]);

下面是我的反应原生平面列表，显示列表：

<FlatList
    initialNumToRender={70}
          data={filteredDataSource} 
          numColumns={1}
          keyExtractor={(item) => item.id} 
          renderItem={({ item }) => (
       
            <List >

<ListItem onPress={() => navigation.navigate('Dicpage', item)}>
  <Left>
    <Text numberOfLines={1}  style={{
  fontSize: 18, fontFamily: "Lato-Regular", textTransform: 'capitalize',
  }}>{item.name}</Text>
  </Left>
  
</ListItem>

</List>

       )}

/>

现在，一旦单击每个项目，我希望使用 asycStorage 保存每个项目。我还想在另一个页面中显示书签项目的列表。

请仅提供示例代码帮助我。我会没事的...

4

1 回答 1

1

保存在 AsyncStorage 中

AsyncStorage.setItem("words", JSON.stringify(Words))

从 asyncStorage 获取项目

AsyncStorage.getItem('words', (err, result) => {
   if(result) {
      // get the data from storage and save it to the state that you have given in List
      dataSource = JSON.Parse(result) 
   }
});

// 如果 dataSource 不为空，则渲染 Lsit

{dataSource && 
<FlatList
    initialNumToRender={70}
          data={dataSource} 
          numColumns={1}
          keyExtractor={(item) => item.id} 
          renderItem={({ item }) => (
       
            <List >

<ListItem onPress={() => navigation.navigate('Dicpage', item)}>
  <Left>
    <Text numberOfLines={1}  style={{
  fontSize: 18, fontFamily: "Lato-Regular", textTransform: 'capitalize',
  }}>{item.name}</Text>
  </Left>
  
</ListItem>

</List>

}

要在 listItem 上的每个单词上保存一个对象，请单击执行此操作

async setFavouriteWords(item) {

// first check if any word is save or not 
let words = await AsyncStorage.getItem("words")

//If words exist, append list with new item object other wise save new object
if(words) {
    words = JSON.parse(words)
    words = [...words, item]
   await  AsyncStorage.setItem("words",JSON.stringify(words));

 } else {
    await AsyncStorage.setItem("words",JSON.stringify([item]));
  }
 navigation.navigate('Dicpage', item)
}

单击时调用此函数

<ListItem onPress={
 async () => {await this.setFavouriteWords(item)
}>
于 2021-01-22T13:26:31.253 回答