개발안 B
1. 프로젝트 이름/간단 설명
통신기기 판매APP/핸드폰,오디오 제품 전자상거래앱
핸드폰,오디오 제품을 앱을 통해 판매하는 광고 사이트형식
2. 프로젝트 생김새(레이아웃)
수강내용과 동일
3. 개발해야 하는 기능들
data.json:
1.text내용추가
name,website,mobile,address.
2.외부링크를 눌렀을때 제품별 제작회사 맻 판매사 웹사이트에 들어갈수있게 개선
const link = ( ) => {
Linking.openURL("https://spartacodingclub.kr")
} 을(다른카드를 누를때마다 특정된 같은 사이트로 이동되게 설정되어있음)
const link = ( ) => {
Linking.openURL(tip.website)
} 로 바꿔준다.(다른 카드를 누를때마다 카드내용에 상응한 사이트로 이동되게 설정되어있음)
3.업데이트후 화면에 뜨지않는 원인 분석 및 대책
const link = () => {
Linking.openURL(tip.website)
}
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>
<Text style={styles.desc}>{tip.name}</Text> 원래있던 문자이름을 모두 desc로 수정합니다.desc글자체가 작기때문에 들어갈수있기때문이다.
<Text style={styles.desc}>{tip.website}</Text>
<Text style={styles.desc}>{tip.address}</Text>
<Text style={styles.desc}>{tip.mobile}</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({
title: {
fontsize:20,
fontweight:'700',
color:"#eee"
},
desc: {
marginTop:10,
color:'#eee',
},
방법2:
<Text style={styles.name}>{tip.name}</Text>
<Text style={styles.website>{tip.website}</Text>
<Text style={styles.address}>{tip.address}</Text>
<Text style={styles.mobile}>{tip.mobile}</Text>
만약에 원상태로 사용할시에는
const styles = StyleSheet.create({ 내부에 각자 이름으로 fontsize를 입력해 주어야한다.
const styles = StyleSheet.create({
title: {
fontsize:20,
fontweight:'700',
color:"#eee"
},
desc: {
marginTop:10,
color:'#eee',
},
name: {
fontsize:10,
marginTop:10,
color:"#eee"
},
website: {......등
4. 프로젝트에 필요한 데이터 소스
수강내용을 바탕으로 expo 사이트에서 불러오거나 구글링해서 퍼오는 방법.
튜터님들과 1:1 코칭으로 배우는 과정에서 필요한 데이터 소스를 추가 수정했다.