18 enero, 2020
Tutorial App Delivery – React Native + API – Part 5: Cart
Hoy voy a ensenar como hacer un carrito de productos.
This containt show how to build food cart .
AsyncStorage
AsyncStorage es un sistema de almacenamiento de clave-valor no cifrado, asíncrono, persistente y global para la aplicación. Debe usarse en lugar de LocalStorage.
npm install --save @react-native-community/async-storageRun android
react-native run-androidClean cache
react-native start --reset-cacheButton in Food.js
import
// import AsyncStorage
import AsyncStorage from '@react-native-community/async-storage';
// import icons
import Icon from 'react-native-vector-icons/Ionicons';Button
<TouchableOpacity
onPress={()=>this.onClickAddCart(item)}
style={{
width:(width/2)-40,
backgroundColor:'#33c37d',
flexDirection:'row',
alignItems:'center',
justifyContent:"center",
borderRadius:5,
padding:4
}}>
<Text style={{fontSize:18, color:"white", fontWeight:"bold"}}>Add Cart</Text>
<View style={{width:10}} />
<Icon name="ios-add-circle" size={30} color={"white"} />
</TouchableOpacity>Function for Button
onClickAddCart(data){
const itemcart = {
food: data,
quantity: 1,
price: data.price
}
AsyncStorage.getItem('cart').then((datacart)=>{
if (datacart !== null) {
// We have data!!
const cart = JSON.parse(datacart)
cart.push(itemcart)
AsyncStorage.setItem('cart',JSON.stringify(cart));
}
else{
const cart = []
cart.push(itemcart)
AsyncStorage.setItem('cart',JSON.stringify(cart));
}
alert("Add Cart")
})
.catch((err)=>{
alert(err)
})
}Cart
import
import React, { Component } from 'react';
import { Text, View, TextInput, Image, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
var { width } = Dimensions.get("window")
// import icons
import Icon from 'react-native-vector-icons/Ionicons';
render
render() {
return (
<View style={{flex:1,alignItems: 'center', justifyContent: 'center'}}>
<View style={{height:20}} />
<Text style={{fontSize:28, color:"gray"}}>Cart food</Text>
<View style={{height:10}} />
<View style={{flex:1}}>
<View style={{width:width-20,margin:10,backgroundColor:'transparent', flexDirection:'row', borderBottomWidth:2, borderColor:"#cccccc", paddingBottom:10}}>
<Image resizeMode={"contain"} style={{width:width/3,height:width/3}} source={{uri: "http://tutofox.com/foodapp/food/pizza/pizza-1.png"}} />
<View style={{flex:1, backgroundColor:'transparent', padding:10, justifyContent:"space-between"}}>
<View>
<Text style={{fontWeight:"bold", fontSize:20}}>Titulo de producto</Text>
<Text>Descripcion de food</Text>
</View>
<View style={{flexDirection:'row',justifyContent:'space-between'}}>
<Text style={{fontWeight:'bold',color:"#9fd236",fontSize:20}}>$565</Text>
<View style={{flexDirection:'row', alignItems:'center'}}>
<TouchableOpacity>
<Icon name="ios-remove-circle" size={30} color={"#9fd236"} />
</TouchableOpacity>
<Text style={{paddingHorizontal:8, fontWeight:'bold'}}>5</Text>
<TouchableOpacity>
<Icon name="ios-add-circle" size={30} color={"#9fd236"} />
</TouchableOpacity>
</View>
</View>
</View>
</View>
</View>
<View style={{height:20}} />
<TouchableOpacity style={{
backgroundColor:"#9fd236",
width:width-40,
alignItems:'center',
padding:10,
borderRadius:5
}}>
<Text style={{
fontSize:24,
fontWeight:"bold",
color:'white'
}}>
CHECKOUT
</Text>
</TouchableOpacity>
<View style={{height:20}} />
</View>
);
}Cart Part 2 : Render cart from asyncstorage
import
import AsyncStorage from '@react-native-community/async-storage';state
constructor(props) {
super(props);
this.state = {
dataCart:[],
};
}componentDidMount
componentDidMount()
{
AsyncStorage.getItem('cart').then((cart)=>{
if (cart !== null) {
// We have data!!
const cartfood = JSON.parse(cart)
this.setState({dataCart:cartfood})
}
})
.catch((err)=>{
alert(err)
})
}
render
render() {
return (
<View style={{flex:1,alignItems: 'center', justifyContent: 'center'}}>
<View style={{height:20}} />
<Text style={{fontSize:32,fontWeight:"bold",color:"#33c37d"}}>Cart food</Text>
<View style={{height:10}} />
<View style={{flex:1}}>
<ScrollView>
{
this.state.dataCart.map((item)=>{
return(
<View style={{width:width-20,margin:10,backgroundColor:'transparent', flexDirection:'row', borderBottomWidth:2, borderColor:"#cccccc", paddingBottom:10}}>
<Image resizeMode={"contain"} style={{width:width/3,height:width/3}} source={{uri: item.food.image}} />
<View style={{flex:1, backgroundColor:'trangraysparent', padding:10, justifyContent:"space-between"}}>
<View>
<Text style={{fontWeight:"bold", fontSize:20}}>{item.food.name}</Text>
<Text>Lorem Ipsum de food</Text>
</View>
<View style={{flexDirection:'row',justifyContent:'space-between'}}>
<Text style={{fontWeight:'bold',color:"#33c37d",fontSize:20}}>${item.price*item.quantity}</Text>
<View style={{flexDirection:'row', alignItems:'center'}}>
<TouchableOpacity>
<Icon name="ios-remove-circle" size={35} color={"#33c37d"} />
</TouchableOpacity>
<Text style={{paddingHorizontal:8, fontWeight:'bold', fontSize:18}}>5</Text>
<TouchableOpacity>
<Icon name="ios-add-circle" size={35} color={"#33c37d"} />
</TouchableOpacity>
</View>
</View>
</View>
</View>
)
})
}
<View style={{height:20}} />
<TouchableOpacity style={{
backgroundColor:"#33c37d",
width:width-40,
alignItems:'center',
padding:10,
borderRadius:5,
margin:20
}}>
<Text style={{
fontSize:24,
fontWeight:"bold",
color:'white'
}}>
CHECKOUT
</Text>
</TouchableOpacity>
<View style={{height:20}} />
</ScrollView>
</View>
</View>
);
}_
Cart Part 3 : Button Quantity
render
render() {
return (
<View style={{flex:1,alignItems: 'center', justifyContent: 'center'}}>
<View style={{height:20}} />
<Text style={{fontSize:32,fontWeight:"bold",color:"#33c37d"}}>Cart food</Text>
<View style={{height:10}} />
<View style={{flex:1}}>
<ScrollView>
{
this.state.dataCart.map((item,i)=>{
return(
<View style={{width:width-20,margin:10,backgroundColor:'transparent', flexDirection:'row', borderBottomWidth:2, borderColor:"#cccccc", paddingBottom:10}}>
<Image resizeMode={"contain"} style={{width:width/3,height:width/3}} source={{uri: item.food.image}} />
<View style={{flex:1, backgroundColor:'trangraysparent', padding:10, justifyContent:"space-between"}}>
<View>
<Text style={{fontWeight:"bold", fontSize:20}}>{item.food.name}</Text>
<Text>Lorem Ipsum de food</Text>
</View>
<View style={{flexDirection:'row',justifyContent:'space-between'}}>
<Text style={{fontWeight:'bold',color:"#33c37d",fontSize:20}}>${item.price*item.quantity}</Text>
<View style={{flexDirection:'row', alignItems:'center'}}>
<TouchableOpacity onPress={()=>this.onChangeQual(i,false)}>
<Icon name="ios-remove-circle" size={35} color={"#33c37d"} />
</TouchableOpacity>
<Text style={{paddingHorizontal:8, fontWeight:'bold', fontSize:18}}>{item.quantity}</Text>
<TouchableOpacity onPress={()=>this.onChangeQual(i,true)}>
<Icon name="ios-add-circle" size={35} color={"#33c37d"} />
</TouchableOpacity>
</View>
</View>
</View>
</View>
)
})
}
<View style={{height:20}} />
<TouchableOpacity style={{
backgroundColor:"#33c37d",
width:width-40,
alignItems:'center',
padding:10,
borderRadius:5,
margin:20
}}>
<Text style={{
fontSize:24,
fontWeight:"bold",
color:'white'
}}>
CHECKOUT
</Text>
</TouchableOpacity>
<View style={{height:20}} />
</ScrollView>
</View>
</View>
);
}Function for change Quantity
onChangeQual(i,type)
{
const dataCar = this.state.dataCart
let cantd = dataCar[i].quantity;
if (type) {
cantd = cantd + 1
dataCar[i].quantity = cantd
this.setState({dataCart:dataCar})
}
else if (type==false&&cantd>=2){
cantd = cantd - 1
dataCar[i].quantity = cantd
this.setState({dataCart:dataCar})
}
else if (type==false&&cantd==1){
dataCar.splice(i,1)
this.setState({dataCart:dataCar})
}
}
React js : Buscador de un objeto o un array
Tutorial App Newspaper – Laravel + React Native + API Part 4: React Navigation.
React Native: Como conectar y listar datos desde API REST
Sobre el autor
