React Native AsyncStorage

时间:2017-09-07 22:16:41

标签: arrays react-native asyncstorage

我想使用AsyncStorage在数组中保存房屋。每个数组元素代表一个house对象。每个房屋对象都有纬度,经度和门牌号。我不知道该怎么做才能代表这个。在我看来,AsyncStorage不太适合保存可以通过编程方式更新的动态对象。 我希望能够增加更多房屋并删除一些房屋。基本上我要做的就是给某些房屋添加书签,并在用户点击时从书签中删除它们。 有人可以帮忙吗?

2 个答案:

答案 0 :(得分:3)

AsyncStorage绝对是完美的。

house 的结构开始,我将创建一个存储代表单个房屋的对象的Array。

const houses = [
  {
    number: 1,
    latitude: 51.5033,
    longitude: -0.119519
  }
]

保存到AsyncStorage

当你想把你的收藏集写到AsyncStorage时,你会这样做:

AsyncStorage
  .setItem('@houses', JSON.stringify(houses))
  .then(houses => console.log(houses)
  

static setItem(key:string,value:string,callback?:?(error:?Error)=> void)

如果项目设置为支持,您也可以使用async/await

从AsyncStorage读取

AsyncStorage回读您的收藏只需通过以下方式完成:

AsyncStorage
  .getItem('@houses')
  .then(houses => console.log(JSON.parse(houses)))

您可以根据需要设置您所在州的响应。

删除特定房屋

这完全取决于您如何设置应用。您是否要通过每个房屋map并创建一个列表组件?

enter image description here

(抱歉失去了右边的边框)

如果是这样,你可以:

houses.map(house => (
  <View>
   <Text>Number: {house.number}</Text>
   <Text>Latitude: {house.latitude}</Text>
   <Text>Longitude: {house.longitude</Text>
   <Button onPress={() => this.deleteHouse(house.number)}/>
  </View>
));

然后创建一个deleteHouse函数来处理它。

const deleteHouse = (number) => {
  const { houses } = this.state; // Assuming you set state as previously mentioned
  const newHouses = houses.filter((house) => house.number != number);
  this.setState({houses: newHouses}, () => saveHouses);
}

最后一个saveHouses将它同步回AsyncStorage。该功能将清除AsyncStorage,然后保存新房屋。

const saveHouses = () => {
  const { houses } = state;
  AsyncStorage
    .removeItem('@houses')
    .then(() => {
      AsyncStorage
        .setItem('@houses', JSON.stringify(houses))
        .then(houses => console.log(houses)
    });
}

答案 1 :(得分:0)

你需要一个像Realm这样的Sqlite替代品,它是免费的,快速且易于编码,这样你就可以节省大量的工作时间,也可以根据需要进行查询,更新并删除对象。