一起學react native實現簡單購物車
前言
實現比較簡單的購物車例項http://www.jianshu.com/p/c581c48a601f
這裡寫圖片描述
程式碼
程式碼結構
這裡寫圖片描述
紅色部分儲存了listitem的資料跟檢視
黃色部分是對於其的引用
主體實現部分
這裡不過多介紹 一看就明白了
這裡寫圖片描述
ListItemData
這裡寫圖片描述
這裡寫圖片描述
ListItemView
這裡寫圖片描述
這裡有兩點需要注意
1.observe是用來監聽某一項的改變的
在這個回撥裡面 如果全選狀態被改變 那麼在這邊就會被攔截到
然後將當前的item選中狀態改成跟全選一樣
也許有人會說 這邊這麼沒有寫item選中以後的動作呢
2.首先來解釋一下 flatlist的話 它是有回收機制的 也就是說 你雖然在當前遮蔽點選了選中 並且狀態進行了改變 但是 當你在繼續往下滑動的時候 會出現狀態依舊沒有選中
其次 在那邊寫的話 點選全選 根本無法做出全選的效果
因為flatlist他不是整個全部都顯示出來 而是根據你滑動來載入後面的資料
他預設只加載了你能看到的資料
所以 如果你在監聽那邊將當前的總金額進行累加的話 你只能累加顯示出來的金額 而不能把未顯示出來的金額也累加計算進去
LIstItemView_render部分
這裡寫圖片描述
這部分不過多介紹
事件處理部分
這裡寫圖片描述
大體來講一下部分邏輯
我們的當個物品的金額計算方式
金額 = 標價 * 數量
所以 根據這個原則
當我們點選+ 或者 -的時候
我們這時候要做的 就是修改當前選中值
並且同時修改總金額
但是 這裡有個前提是 我們當前已經被選中的情況
否則就會出現資料混亂
所以 當我們按下選中按鈕的時候 就應該將金額這個值加進總金額裡面
反之 取消的時候 也要從總金額裡面減少這個值的錢
ok 邏輯就這麼簡單
結尾
是不是感覺講的有點快
主要是因為本身就很簡單 可以講的東西 就那麼一點 兩三句就講完了
如果有不懂的 可以自己去下原始碼 自己電腦執行一下
專案原始碼:
相關推薦
一起學react native實現簡單購物車
前言 實現比較簡單的購物車例項http://www.jianshu.com/p/c581c48a601f 這裡寫圖片描述 程式碼 程式碼結構 這裡寫圖片描述 紅色部分儲存了listitem的資料跟檢視 黃色部分是對於其的引用 主體實現部分 這裡
一起學react native(4) Mobx實現簡單購物車
前言 知道mobx這個東西 很久了 大概也就1個多月了吧 但是從來沒有下筆寫過程式碼 這兩天嘗試了一下 大概去熟悉了一下Mobx的相關命令 從而實現了 這個比較簡單的購物車例項 如果有寫的不對的地方 可以直接聯絡我的QQ:469373256 專案
react native Animated簡單使用方法
import { Animated, } from 'react-native'; constructor(props){ super(props) this.state={ fadeInOpacity: new Animate
基於React Native實現的介面載入元件react-native-loadview
react-native-loadview 基於React Native實現的介面載入元件， Installation npm install react-native-loadview --save Import into your project import
React Native實現再按一次退出應用程式功能
解決點選兩次手機back鍵退出程式 程式碼及註釋如下： //雙擊返回鍵退出程式
[ 一起學React系列 -- 4 ] 透傳的Context
拋轉引玉 通過上一篇的科普我們知道如果父節點需要向子節點傳遞資料，那麼就得通過Props來實現；那麼擺在我們眼前的就有一個問題了：現有N個節點並且它們都是巢狀成父子結構，大致如下 <A> <B> <C>
[ 一起學React系列 -- 5 ] 如何優雅得使用表單控制元件
網頁中使用的form表單大家肯定都再熟悉不過了，它主要作用是用來收集和提交資訊。React中的表單元件與我們普通的Html中的表單及其表現形式沒有什麼不同，所以如何使用表單我覺得再拿出來說可能是畫蛇添足、毫無意義。不過再怎麼樣也不能辜負大家對標題的期待吧，本篇內容筆
react-native實現多張圖片上傳
最近在搞這個圖片上傳功能，，剛開始的時候iOS用的是 react-native-image-crop-picker這個外掛，，iOS那邊完美執行沒有毛病，，，但是到android這邊之後就開始報各種資源
vue實現簡單購物車
效果圖如下 比較醜哈哈。。 程式碼如下 <template> <div class="user"> <div><input type="checkbox" v-model="checkAll" @click="ch
React-Native實現熱門標籤功能
廢話少說，先上效果圖 Android原生有很多，react-native寫的，貌似沒有。貼程式碼： import React, {Component} from 'react'; import { StyleSheet, Text, View, Toucha
react native 實現ListView的區域性更新
在ReactNative中UI的重新整理大多數情況依賴於state的變更，通過呼叫元件的setState方法來更新state以達到通知元件重新渲染UI的目的。當然這種做法是官方提供的標準解決方案，在進行簡單UI設計時足以滿足大多數需求。 但是當遇到結構複雜並存在資料互動的介面設計時，手動管理state這種
【 專欄 】- 從零學React Native
從零學React Native Facebook公司工程師推出了React Native, 將移動平臺上的應用開發統一到同一個框架下,而且還能享受原生體驗。 一次學習，就可以同時開發IOS和Android兩個平臺, 一起學習探討吧
混合開發的大趨勢之一React Native之簡單的登入介面
這些天都在學習RN這部分吧，然後寫了個簡單的登陸業務，從“實戰”中講解吧 先上下效果圖 效果很簡單就是2個<Text/> 2個<TextInput/>1個<Button/> 按鈕控制元件是第三方的，就是為了演示下如何在
react-native 實現漸變色背景
1、需要藉助外掛react-native-linear-gradient外掛 安裝： yarn add react-native-linear-gradient react-native link react-native-linear-gr
用List實現簡單購物車類
import java.util.ArrayList; import java.util.List; import javax.servlet.http.HttpSession; /** * 購物車 * 現實中是用籃子或車來裝商品的 * 好比記憶體中的List
react-native實現新建頁面+路由跳轉
步驟： 1.新建一個新頁面，即自己所需要的檔案（拜訪新訊息） 配置： static navigationOptions = ({ navigation, navigationOptions }) => { const { params } = navigation.stat
react-native 從簡單的事件分發來介紹redux
演示效果: 理論知識: 理論知識重複炒冷飯等於製造網路垃圾，所以貼上幾篇我覺得寫得不錯的給大家瞅瞅 核心理念: Store:應用只有一個單一的 Store,State是這個狀態集合某一時刻的狀態 Action:改
利用Html+JavaScript實現簡單購物車
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Shopping Car</title> <scr
Session實現簡單購物車
主要用於對Session物件的使用，大致過程由建立到銷燬，即購物車的加入商品和清除購物車等一系列動作。Image類實現動態驗證碼。 （原始碼可以直接使用，注意路徑問題） Image類實現驗證碼功能 package com.ayit.session; import
React-Native實現登入頁面，並顯示和清除使用者的輸入
/** * Sample React Native App * https://github.com/facebook/react-native * ES6實現程式碼 */ import Re