React Native實戰(zhàn)開發(fā)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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 說在前面 關于 react 的總結過去半年就一直碎碎念著要搞起來,各(wo)種(tai)原(lan)因(le)。心...
    陳嘻嘻啊閱讀 7,029評論 7 41
  • 原教程內容詳見精益 React 學習指南,這只是我在學習過程中的一些閱讀筆記,個人覺得該教程講解深入淺出,比目前大...
    leonaxiong閱讀 2,940評論 1 18
  • React可謂如日中天,webpack也風聲水起。React剛出來不久就瀏覽了一遍官網的文檔,當時想這個新玩意挺“...
    人世間閱讀 7,651評論 6 33
  • 周末,在懶人聽書里聽了顧瑞雪、王明君播講的《花開半夏》。 主播好聽的飽含情感的聲音,加深了蕩氣回腸的故事的沉重感,...
    四葉草_廣廣閱讀 1,313評論 11 14
  • 1,基礎復蘇 2,單項訓練 3,綜合模擬 從現在開始,10天進行單項訓練,10天綜合模擬。 聽力:語速,反應是兩個...
    馬草原emmm閱讀 325評論 2 5

友情鏈接更多精彩內容