* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
실습으로 주어진 사진을 만들기에서 주어진 답안 코드를 붙였더니 오류가 있는거 같아서요
이부분에서 < View style={styles.cardText } >부분에 식별자가 필요하다고 뜨는데.. 완성코드를 이상하게 올려주신건가요..
작성한 코드 및 에러 메세지
import React from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView } from 'react-native';
const main = 'https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fmain.png?alt=media&token=8e5eb7'
export default function App() {
//return 구문 밖에서는 슬래시 두개 방식으로 주석
return (
/*
return 구문 안에서는 {슬래시 + * 방식으로 주석
*/
<ScrollView style={styles.container}>
<Text style={styles.title}>나만의 꿀팁</Text>
<Image style={styles.mainImage} source={{ uri: main }} />
<ScrollView style={styles.middleContainer} horizontal indicatorStyle={"white"}>
<TouchableOpacity style={styles.middleButton01}><Text style={styles.middleButtonText}>생활</Text></TouchableOpacity>
<TouchableOpacity style={styles.middleButton02}><Text style={styles.middleButtonText}>재테크</Text></TouchableOpacity>
<TouchableOpacity style={styles.middleButton03}><Text style={styles.middleButtonText}>반려견</Text></TouchableOpacity>
<TouchableOpacity style={styles.middleButton04}><Text style={styles.middleButtonText}>꿀팁 찜</Text></TouchableOpacity>
</ScrollView>
<View style={styles.cardContainer}>
{/* 하나의 카드 영역을 나타내는 View */}
<View style={styles.card}>
<Image style={styles.cardImage} source={{
uri: "https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o"}}
< View style={styles.cardText } >
<Text style={styles.cardTitle}>먹다 남은 피자를 촉촉하게!</Text>
<Text style={styles.cardDesc} numberOfLines={3}>먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우</Text>
<Text style={styles.cardDate}>2020.09.09</Text>
</View>
</View>
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
//앱의 배경 색
backgroundColor: '#fff',
},
title: {
//폰트 사이즈
fontSize: 20,
//폰트 두께
fontWeight: '700',
//위 공간으로 부터 이격
marginTop: 50,
//왼쪽 공간으로 부터 이격'
marginLeft: 20
},
mainImage: {
//컨텐츠의 넓이 값
width: '90%',
//컨텐츠의 높이 값
height: 200,
//컨텐츠의 모서리 구부리기
borderRadius: 10,
marginTop: 20,
//컨텐츠 자체가 앱에서 어떤 곳에 위치시킬지 결정(정렬기능)
//각 속성의 값들은 공식문서에 고대로~ 나와 있음
alignSelf: "center"
},
middleContainer: {
marginTop: 20,
marginLeft: 10,
height: 60
},
middleButton01: {
width: 100,
height: 50,
padding: 15,
backgroundColor: "#fdc453",
borderColor: "deeppink",
borderRadius: 15,
margin: 7
},
middleButton02: {
width: 100,
height: 50,
padding: 15,
backgroundColor: "#fe8d6f",
borderRadius: 15,
margin: 7
},
middleButton03: {
width: 100,
height: 50,
padding: 15,
backgroundColor: "#9adbc5",
borderRadius: 15,
margin: 7
},
middleButton04: {
width: 100,
height: 50,
padding: 15,
backgroundColor: "#f886a8",
borderRadius: 15,
margin: 7
},
middleButtonText: {
color: "#fff",
fontWeight: "700",
//텍스트의 현재 위치에서의 정렬
textAlign: "center"
},
cardContainer: {
marginTop: 10,
marginLeft: 10
},
card: {
flex: 1,
//컨텐츠들을 가로로 나열
//세로로 나열은 column <- 디폴트 값임
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",
}
});오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.
Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.
Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!
