反应本机异步存储
React Native AsyncStorage
我想使用 AsyncStorage 将房屋保存在数组中。每个数组元素代表一个房屋对象。每个房屋对象都有纬度、经度和门牌号。我不确定如何去代表这个。在我看来,AsyncStorage 不太适合保存可以通过编程方式更新的动态对象。
我希望能够添加更多房屋并删除一些房屋。基本上我想做的是为一些房子添加书签,并在用户单击时将它们从书签中删除。
有人可以帮忙吗?
您需要像 Realm 这样的 Sqlite 替代品,它免费、快速且易于编码,有了它您将节省大量工作时间,还可以根据需要进行查询、更新和删除对象。
AsyncStorage 对此绝对是完美的。
从您的 房屋 的结构开始,我将创建一个数组来存储 objects 代表一个单独的房屋。
const houses = [
{
number: 1,
latitude: 51.5033,
longitude: -0.119519
}
]
保存到 AsyncStorage
当您想将 collection 写入 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
读取您的 collection 只需通过以下方式完成:
AsyncStorage
.getItem('@houses')
.then(houses => console.log(JSON.parse(houses)))
你可以根据自己的状态设置响应,随你喜欢。
删除特定房屋
这完全取决于您如何设置应用程序。例如,您要 map
遍历每个房屋并创建一个列表组件吗?
(抱歉右边边框没了)
如果是这样,您可以:
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)
});
}
我想使用 AsyncStorage 将房屋保存在数组中。每个数组元素代表一个房屋对象。每个房屋对象都有纬度、经度和门牌号。我不确定如何去代表这个。在我看来,AsyncStorage 不太适合保存可以通过编程方式更新的动态对象。 我希望能够添加更多房屋并删除一些房屋。基本上我想做的是为一些房子添加书签,并在用户单击时将它们从书签中删除。 有人可以帮忙吗?
您需要像 Realm 这样的 Sqlite 替代品,它免费、快速且易于编码,有了它您将节省大量工作时间,还可以根据需要进行查询、更新和删除对象。
AsyncStorage 对此绝对是完美的。
从您的 房屋 的结构开始,我将创建一个数组来存储 objects 代表一个单独的房屋。
const houses = [
{
number: 1,
latitude: 51.5033,
longitude: -0.119519
}
]
保存到 AsyncStorage
当您想将 collection 写入 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
读取您的 collection 只需通过以下方式完成:
AsyncStorage
.getItem('@houses')
.then(houses => console.log(JSON.parse(houses)))
你可以根据自己的状态设置响应,随你喜欢。
删除特定房屋
这完全取决于您如何设置应用程序。例如,您要 map
遍历每个房屋并创建一个列表组件吗?
(抱歉右边边框没了)
如果是这样,您可以:
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)
});
}