* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
안녕하세요. 주말 밤 늦게까지 고생 많으십니다. 저도 노력은 하는데 잘 안되는 부분이 있어서 답답하군요. 이미지 부분을 정의하고 호출한 명령문은 매뉴얼 대로이고 이미지도 assets폴더 안에 그대로 있는데 아이패드 화면에 출력이 안되고 다른 내용은 나오는데 안드로이드의 경우에는 전체 화면이 안나오는 문제가 있네요. 무엇이 문제일까요?
import main from './assets/main.png';
import card from './assets/pizza.png';
<Image style={Styles.mainImage} source={{uri:main}}/>
<Image style={Styles.cardImage} source={{uri:card}}/>
아이패드 출력화면
안드로이드 출력화면
작성한 코드 및 에러 메세지
오류 발생 시, 작성한 코드 import React from 'react';
import main from './assets/main.png';
import card from './assets/pizza.png';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView } from 'react-native';
export default function App() {
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 style={Styles.card}>
<Image style={Styles.cardImage} source={{uri:card}}/>
<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",
},
containerOne: {
flex:1,
backgroundColor:"red"
},
containerTwo:{
flex:2,
flexDirection:"row",
backgroundColor:"yellow"
},
innerOne: {
flex:1,
backgroundColor:"blue"
},
innerTwo: {
flex:4,
backgroundColor:"orange"
}
});
전체와 에러 메시지를 첨부해 주세요.
Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.
Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!
