1. 程式人生 > >【原創】東方耀react native學習之-37AsyncStorage

【原創】東方耀react native學習之-37AsyncStorage

AsyncStorage是一個簡單的、具有非同步特性的鍵值對的儲存系統,全域性的!替代LocalStorage

AsyncStorage裡面都有一個回撥函式,而回調的第一個引數都是錯誤物件,如果發生錯誤,該物件就會展示錯誤資訊,否則為null;每個方法都會返回一個Promise物件。

案例:購物車(資料共享)
列表頁 結算頁

1.資料模型構建

2.列表項Item元件(es6中預設屬性與屬性型別的定義)

3.列表元件List

guid程式碼 生成

4.購物車元件

去取AsyncStorage中儲存的資料,一定是在DidMount生命週期裡,不能在WillMount裡

5.將元件串聯起來

推薦由React Native中文網封裝維護的react-native-storage模組,提供了較多便利功能。

相關推薦

原創東方耀react native學習-37AsyncStorage

AsyncStorage是一個簡單的、具有非同步特性的鍵值對的儲存系統,全域性的!替代LocalStorage AsyncStorage裡面都有一個回撥函式,而回調的第一個引數都是錯誤物件,如果發生錯誤,該物件就會展示錯誤資訊,否則為null;每個方法都會返回

WebStorm設定React Native智慧提示

 最近在做React Native開發的時候,相信大家一般會使用WebStorm,Sublime,Atom等等開發工具。二之前搞前端的對WebStorm會很熟悉,WebStorm最新版是WebStorm2016.2.1,react Native預設不能智慧提示程式碼,githun有一個開源的外掛:Rea

react native 學習 native modules

每一個 nsstring類 了解 lba 執行過程 span nsnumber 開發 github 翻譯自https://facebook.github.io/react-native/docs/native-modules-ios.html Native Module

React-Native學習 防止鍵盤遮擋TextInput

import React, {Component} from 'react'; import ReactNative, { AppRegistry, StyleSheet, Text, View, Image, TextInput,

React-Native學習第三方開源元件--側滑欄----react-native-side-menu

react-native-side-menu 側滑欄元件 1.匯入方式 切換到當前目錄在命令列執行下面的命令 npm install react-native-side-menu --save 開啟package.json檢視是否成功匯入

React-Native學習 圖片做背景 modal 點選其他區域消失

1.modal點選其他區域消失 <TouchableWithoutFeedback onPress={()=>this.setState({showTopMenu:false})}> <View style={{position:

SpringSping Data JPA 深入學習①查詢方法原理探究

基本概念 Spring Data JPA是Spring公司開發的Java Persistence API 相對於 sun公司開發的JPA Spring Data JPA 整合了Hibernate,換句話說,Spring Data JPA 的預設實現是用的Hibernate

(React-Native 學習四) RN 官方Demo 搭建 RNTester 執行

一,前言:         學習react-native相信對於我們最好的教程就是官方教程。因此學習和檢視官方demo。是我們學習進步的階梯。本文是博主學習react-native中遇到的一些基本問題,分享出來供大家學習和參考: 二,準備工作:    

React-native 學習AlertDialog彈出框

/** * 功能: alert對話方塊 */ 'use strict'; /** * 匯入模組 */ // 系統模組 import React, { Component } from 'react'; import { StyleSheet,

React Native學習JavaScript語法轉換器

JavaScript語法轉換器 語法轉換器可以使編寫程式碼的過程更加享受,因為開發者可以藉助轉換器直接使用新的JavaScirpt語法標準,而無需等待JS直譯器的支援。 React Native從0.5.0版本開始已經內建Babel轉換器。你可以檢視Babe

一.React-Native學習Window環境下搭建環境配置

一.安裝JDK       1.從Java官網下載JDK並安裝。 也可以從百度雲下載x64版本       2.安裝成功可以用java -version檢視版本資訊       3. 配置環境變數   JAVA_HOME=C:\Program Files\Java\

react native 學習模仿”探探“實現豆瓣電影app部分功能

一、 首先配置環境 當然是node 下用npm  npm install -g react-native-cli然後建立專案react-native init react1 cd react1 react-native run-android 新開一個cmd 啟動專案 re

原創Matlab.NET混合程式設計技巧直接呼叫Matlab內建函式

  在我的上一篇文章【原創】Matlab.NET混編技巧之——找出Matlab內建函式中,已經大概的介紹了matlab內建函式在混合程式設計中的優點,並通過程式找出了matlab中的大部分內建函式,當然更多人關心是如何像我所說得那樣,不用直接編譯,就直接在C#中呼叫這些內建函式。本文就帶你揭開這些謎團

原創Matlab.NET混合程式設計技巧找出Matlab內建函式

  Matlab與.NET的混合程式設計,掌握了基本過程,加上一定的開發經驗和演算法基礎,肯定不難。反之,有時候一個小錯誤,可能抓破腦袋,加班幾個晚上,除錯才能解決。同樣,由於Matlab.NET混編的特殊性,加上MathWorks的原因,英文文件和沒有披露一些詳細的細節(甚至不允許反編譯MWArra

原創探索Newlife X元件利器:XCoder點滴[附下載]

  XCode讓我一個外行業餘者轉變為一個半專業的開發人員,心懷感激,讓我把更多的精力關注在業務,而不是資料庫,儲存過程,sql,以及編寫一遍一遍的垃圾程式碼。在這裡我不對Newlife XCode做過多介紹,XCode曾經是一個輕量級ORM元件,現在XCode加上XCoder,變成了一個非常強大的資

React-native 學習Confirm彈出框

``` /** * 功能: Confirm對話方塊 */ /*visible bool 控制彈出框隱藏(false)或顯示(true) transparent bool 控制彈出框背景,若為false則彈出框背景為灰色,會擋住彈出框後面的內容,true時才為

React-Native 學習--問題處理 一. github上下載的專案不能執行?

在github上下載的專案不能執行? 出現”RCTRootView.h” file not found 紅色提示 如圖. 這是依賴庫沒有下載, 可以在專案的根目錄下 輸入 npm install , 或者 直接拷一份node_modules到跟目錄下就可

React Native 學習Image元件

/** * @Author: fantasy * @Date:   2016-06-13T17:27:21+08:00 * @Last modified by:   fantasy * @Last modified time: 2016-07-11T10:45:42+08:

React-Native學習路(九)TabNavigator隱藏問題的分析及解決

首先說明一下我是用的TabNavigator+StackNavigator來寫的頁面跳轉。 我們先分析一下為什麼在每個Tab的Item裡面實現跳轉,跳轉頁面還是會有底部的TabNvigator 先看下我出問題的專案結構,首先,我們可以看到我給這個Tab的Item指定的

React Native 學習路:Unable to load script from assets 'index.android.bundle'.

 最近總遇到這個問題:問題背景:1.伺服器已啟動2.裝置插入了兩個裝置(模擬器與真機)3.之後出現以下報錯問題Unable to load script from assets 'index.android.bundle'. Make sure your bundle is