커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
1. 꿀팁찜에 버튼은 만들었는데, 자세히 보기하면 이렇게 나와요. 2. 찜해제 해도 없어지지가 않아요.
[왕초보] 나만의 수익성 앱, 앱개발 종합반 v5
4주차
북마크
정*재
댓글
44
추천
0
조회수
110
조회수
110
답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.






스파르타 즉문즉답




LikePage.js

import React,{useState, useEffect} from 'react';
import {ScrollView, Text, StyleSheet} from 'react-native';
import LikeCard from '../components/LikeCard';
import Card from '../components/Card';
import Loading from '../components/Loading';
import * as Application from 'expo-application';
const isIOS = Platform.OS === 'ios';
import {firebase_db} from "../firebaseConfig"




export default function LikePage({navigation,route}) {
    const [tip, setTip] = useState([])
    const [ready,setReady] = useState(true)


useEffect(()=>{
navigation.setOptions({
title:'꿀팁 찜'


})
getLike()
},[])
const getLike = async () => {
let userUniqueId;
if(isIOS){
let iosId = await Application.getIosIdForVendorAsync();
userUniqueId = iosId
}else{
userUniqueId = await Application.androidId
}
console.log(userUniqueId)
firebase_db.ref('/like/'+userUniqueId).once('value').then((snapshot) => {
console.log("파이어베이스에서 데이터 가져왔습니다!!")
let tip = snapshot.val();
// tip이 null도 아니고(실제 값이 존재 하고)
// tip의 갯수가 0개 이상! 즉 있을때만 상태 변경하여 화면을 다시 그리기!
let tip_list = Object.values(tip)
if(tip && tip.length > 0){
    setTip(tip)
    setReady(false)
    
}
})
}
return (
    <ScrollView style={styles.container}>
    {
    tip.map((content,i)=>{
    return(<LikeCard key={i} content={content} navigation={navigation} tip ={tip}setTip={setTip}/>)
    })
    }
    </ScrollView>
    )
    }



const styles = StyleSheet.create({
    container:{
        backgroundColor:"#fff"
    }
    })

LikeCard.js

import React from 'react';
import {Alert,View, Image, Text, StyleSheet,TouchableOpacity,Platform} from 'react-native'
import {firebase_db} from "../firebaseConfig"
const isIOS = Platform.OS === 'ios';
import * as Application from 'expo-application';
//MainPage로 부터 navigation 속성을 전달받아 Card 컴포넌트 안에서 사용


export default function LikeCard({content,navigation,tip,setTip}){
    
const detail = () => {
        navigation.navigate('DetailPage',{idx:content.idx})
        }
        const remove = async (cidx) => {
            let userUniqueId;
            if(isIOS){
            let iosId = await Application.getIosIdForVendorAsync();
            userUniqueId = iosId
            }else{
            userUniqueId = await Application.androidId
    
            }
            console.log(userUniqueId)
            firebase_db.ref('/like/'+userUniqueId+'/'+cidx).remove().then(function(){
            Alert.alert("삭제 완료");
            //내가 찝 해제 버튼을 누른 카드 idx를 가지고
            //찝페이지의 찜데이터를 조회해서
            //찜해제를 원하는 카드를 제외한 새로운 찜 데이터(리스트 형태!)를 만든다
            let result = tip.filter((data,i)=>{
            return data.idx !== cidx
            })
            //이렇게 만들었으면!
            //LikePage로 부터 넘겨 받은 tip(찜 상태 데이터)를
            //filter 함수로 새롭게 만든 찜 데이터를 구성한다!
            console.log(result)
            setTip(result)
            })
            }
    return(
//카드 자체가 버튼역할로써 누르게되면 상세페이지로 넘어가게끔 TouchableOpacity를 사용
<View style={styles.card}>
<Image style={styles.cardImage} source={{uri:content.image}}/>
<View style={styles.cardText}>
<Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>
<Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>
<Text style={styles.cardDate}>{content.date}</Text>
<View style={styles.buttonGroup}>
<TouchableOpacity style={styles.button} onPress={()=>detail()}><Text style={styles.buttonText}>자세히보기</Text></TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={()=>remove()}><Text style={styles.buttonText}>찜 해제</Text></TouchableOpacity>
</View>
</View>
</View>
)
}
const styles = StyleSheet.create({
card:{
flex:1,
flexDirection:"row",
margin:10,
borderBottomWidth:0.5,
borderBottomColor:"#eee",
paddingBottom:10
},
cardImage: {
flex:1,
width:100,
height:100,
borderRadius:10,
},
cardText: {
flex:2,
flexDirection:"column",
marginLeft:10,
},
cardTitle: {
fontSize:20,
fontWeight:"700"
},
cardDesc: {
fontSize:15
},
cardDate: {
fontSize:10,
color:"#A6A6A6",
}
});

혹시 뭐 잘못 된게 있나요?


취소
 공유
취소
댓글 0
댓글 알림
나의얼굴