* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
3주차, 4주차 수업중에 있었던 네비게이션 관련 사항이었던 듯한데
찾고 잧고 또 찾아봐도
앱 상단의 디테일페이지란 글자를 카드 내용의 타이틀로 바꾸는 걸
어떻게 적용했는지 모르겠어요;;
작성한 코드 및 에러 메세지
import React,{useState,useEffect} from 'react';
import { StyleSheet, Text, View, Image, ScrollView,TouchableOpacity, Alert, Share, Platform } from 'react-native';
import * as Linking from 'expo-linking';
import {firebase_db} from "../firebaseConfig"
import * as Application from 'expo-application';
const isIOS = Platform.OS === 'ios';
export default function DetailPage({navigation,route}) {
const [tip, setTip] = useState({
"idx":9,
"category":"성장",
"title":"마크트웨인의 명언",
"desc":"미국의 유명한 작가이자 유머리스트인 마크 트웨인의 잘 알려지지 않은 명언을 소개합니다. 친절은 귀머거리도 들을 수 있고 장님도 볼 수 있는 언어입니다. 이 인용구는 신체적 한계를 뛰어넘는 보편적인 언어로서 친절의 중요성을 강조합니다. 이 말은 듣거나 볼 수 없더라도 간단한 친절의 행동이 주변 사람들에게 깊은 영향을 미칠 수 있다는 것을 상기시켜 줍니다.",
"date":"2023.02.15"
})
useEffect(()=>{
console.log(route)
navigation.setOptions({
title:route.params.title,
headerStyle: {
backgroundColor: '#000',
shadowColor: "#000",
},
headerTintColor: "#fff",
})
//넘어온 데이터는 route.params에 들어 있습니다.
const { idx } = route.params;
firebase_db.ref('/tip/'+idx).once('value').then((snapshot) => {
let tip = snapshot.val();
setTip(tip)
});
},[])
const like = async () => {
// like 방 안에
// 특정 사용자 방안에
// 특정 찜 데이터 아이디 방안에
// 특정 찜 데이터 몽땅 저장!
// 찜 데이터 방 > 사용자 방 > 어떤 찜인지 아이디
let userUniqueId;
if(isIOS){
let iosId = await Application.getIosIdForVendorAsync();
userUniqueId = iosId
}else{
userUniqueId = await Application.androidId
}
firebase_db.ref('/like/'+userUniqueId+'/'+ tip.idx).set(tip,function(error){
console.log(error)
Alert.alert("저장 완료!")
});
}
const share = () => {
Share.share({
message:`${tip.title} \n\n ${tip.desc} \n\n ${tip.image}`,
});
}
const link = () => {
Linking.openURL("https://gongu.copyright.or.kr/gongu/main/main.do")
}
return (
// ScrollView에서의 flex 숫자는 의미가 없습니다. 정확히 보여지는 화면을 몇등분 하지 않고
// 화면에 넣은 컨텐츠를 모두 보여주려 스크롤 기능이 존재하기 때문입니다.
// 여기선 내부의 컨텐츠들 영역을 결정짓기 위해서 height 값과 margin,padding 값을 적절히 잘 이용해야 합니다.
<ScrollView style={styles.container}>
<Image style={styles.image} source={{uri:tip.image}}/>
<View style={styles.textContainer}>
<Text style={styles.title}>{tip.title}</Text>
<Text style={styles.desc}>{tip.desc}</Text>
<View style={styles.buttonGroup}>
<TouchableOpacity style={styles.button} onPress={()=>like()}><Text style={styles.buttonText}>저장하기</Text></TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={()=>share()}><Text style={styles.buttonText}>공유하기</Text></TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={()=>link()}><Text style={styles.buttonText}>이미지 출처</Text></TouchableOpacity>
</View>
</View>
</ScrollView>
)
}
const styles = StyleSheet.create({
container:{
backgroundColor:"lightblue"
},
image:{
height:300,
margin:20,
marginTop:70,
borderRadius:20
},
textContainer:{
padding:40,
justifyContent:'center',
alignItems:'center'
},
title: {
fontSize:23,
fontWeight:'700',
marginTop:3,
color:"#eee"
},
desc:{
marginTop:20,
color:"black"
},
buttonGroup: {
flexDirection:"row",
},
button:{
width:100,
marginTop:40,
marginRight:10,
marginLeft:10,
padding:10,
borderWidth:1,
borderColor:'deeppink',
borderRadius:7
},
buttonText:{
color:'blue',
TextAlign:'center'
}
})
디테일페이지의 코드상태입니다.
