React Native实战开发10:使用AsyncStorage存储数据

使用AsyncStorage存储数据

在之前的示例中,当我们每次重新运行程序时,原先的todo list就丢失了。在今天的课程里,我们将使用AsyncStorage来存储数据,这样只要不卸载程序,即便重新运行程序,数据也不会丢失。

导入AsyncStorage

在app.js里,我们导入AsyncStorage

import {View, Text, StyleSheet, Platform, ListView, Keyboard, AsyncStorage} from "react-native";

使用AsyncStorage

我们将在App类的componentWillMount方法里使用AsyncStorage将数据取出来,componentWillMount在组件的生命周期中,当组件即将Mount的时候会自动调用。下面一个图可以简单了解一下React Native的组件生命周期。

也就是在render()调用之前,react native会调用其componentWillMount方法。

componentWillMount() {
  AsyncStorage.getItem("items").then(json => {
    try {
      const items = JSON.parse(json);
      this.setSource(items, items);
    } catch (e) {

    }
  });
}

更新AsyncStorage

当我们增加、修改、删除了todo之后,我们需要将数据更新回AsyncStorage,我们只需要在我们的setSource里做这个步骤就可以了。

/*
 一个通用的setSource方法,方便调用
 */
setSource(items, itemsDatasource, otherState = {}) {
  this.setState({
    items,
    dataSource: this.state.dataSource.cloneWithRows(itemsDatasource),
    ...otherState
  });
  AsyncStorage.setItem("items", JSON.stringify(items));
}

我们在今天的代码里使用了JSON.parse()方法和JSON.stringify()方法,parse方法是将一个json格式的字符串转成一个对象,stringify则相反,将一个对象转成json格式的字符串。

今天的代码:https://github.com/zhiwehu/todo/tree/AsyncStorage

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 说在前面 关于 react 的总结过去半年就一直碎碎念着要搞起来,各(wo)种(tai)原(lan)因(le)。心...
    陈嘻嘻啊阅读 7,009评论 7 41
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,920评论 1 18
  • React可谓如日中天,webpack也风声水起。React刚出来不久就浏览了一遍官网的文档,当时想这个新玩意挺“...
    人世间阅读 7,623评论 6 33
  • 周末,在懒人听书里听了顾瑞雪、王明君播讲的《花开半夏》。 主播好听的饱含情感的声音,加深了荡气回肠的故事的沉重感,...
    四叶草_广广阅读 1,295评论 11 14
  • 1,基础复苏 2,单项训练 3,综合模拟 从现在开始,10天进行单项训练,10天综合模拟。 听力:语速,反应是两个...
    马草原emmm阅读 321评论 2 5

友情链接更多精彩内容