#4주차_4
ScrollView 에선 alignItems:"center" 라는 스타일을 사용하면 에러가 난다.
12. [파이어베이스] 리얼타임 데이터베이스 – 쓰기
expo-application 공식문서
https://docs.expo.dev/versions/latest/sdk/application/#api
쓰기를 위해 uniqueId를 부여하기 위한 작업...?
expo install expo-application
uniqueId는 isIOS가 ios, apple인지 종류에 따라 어떻게 변하는 지 확인한다.
>> 소스 <<
import * as Application from 'expo-application';
const isIOS = Platform.OS === 'ios';
let uniqueId;
if(isIOS){
let iosId = await Application.getIosIdForVendorAsync();
uniqueId = iosId
}else{
uniqueId = Application.androidId
}
console.log(uniqueId)
DetailPage.js
#찜하기 함수
const like = async()=>{
// like 방 안에
// 특정 사용자 방안에
// 특정 찜 데이터 아이디 방안에
// 특정 찜 데이터 몽땅 저장!
// 찜 데이터 방 > 사용자 방 > 어떤 찜인지 아이디
let userUniqueId;
if(isIOS){
let iosId = await Application.getIosIdForVendorAsync();
userUniqueId = iosId
}else{
userUniqueId = await Application.androidId
}
console.log(userUniqueId)
//저장을 하는 함수는 firebase의 set 함수이다.
firebase_db.ref('/like/'+ userUniqueId +'/'+tip.idx).set(tip, frunction(error){
console.log(error)
Alert.alert("찜 완료!")
});
}
<TouchableOpacity style={styles.button} onPress={()=>like()}><Text style={styles.buttonText}>팁 찜하기</Text></TouchableOpacity>
체크 : 목록성일 경우의 찜함수 고민
>>찜하기 페이지를 보여주기 위한 선작업<<
StackNavigator.js 에 페이지 추가
<Stack.Screen name="LikePage" component={LikePage}/>
>>LikePage.js<< 찜목록 보여주기
찜삭제
https://firebase.google.com/docs/reference/js/v8/firebase.database.Reference?authuser=2#remove
1.LikePage.js에서 페이지상세로 넘길 때 tip, setTip [상태관리함수] 까지 함께 넘겨줘야 해제가 가능하다.
return (
<ScrollView style={styles.container}>
{
tip.map((content,i)=>{
return(<LikeCard key={i} content={content} navigation={navigation} tip={tip} setTip={setTip}/>)
})
}
</ScrollView>
)
2.LikeCard 에서 필요한 데이터를 받아야한다.
export default function LikeCard({content,navigation, tip, setTip}){
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
})
//이렇게 만들었으면!
//LigePage로 부터 넘겨 받은 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(content.idx)}><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",
},
buttonGroup: {
flexDirection:"row",
},
button:{
width:90,
marginTop:20,
marginRight:10,
marginLeft:10,
padding:10,
borderWidth:1,
borderColor:'deeppink',
borderRadius:7
},
buttonText:{
color:'deeppink',
textAlign:'center'
}
});