* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
3주차 과제 해설 중 AboutPage.js 부분을 똑같이 따라쳐보며 연습 중인데 아래와 같이 표시됩니다. 왜 인지 궁금합니다.
import React from "react";
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
import { StatusBar } from "expo-status-bar";
export default function AboutPage({navigation, route}){
const aboutImage = "https://storage.googleapis.com/sparta-image.appspot.com/lecture/about.png"
useEffect(()=>{
navigation.setOptions({
title:"소개 페이지",
headerStyle: {
backgroundColor: '#1F266A',
shadowColor: '#1F266A',
},
headerTintColor: "#fff",
})
},[])
return(
<View style={styles.container}>
<StatusBar style="light"/>
<Text style={styles.title}HI! 스파르타코딩 앱개발 반에 오신 것을 환영합니다</Text>
<View style={styles.textContainer}>
<Image style={styles.aboutImage} source={{uri:aboutImage}} resizeMode={"cover"}/>
<Text style={styles.desc01}>많은 내용을 간결하게 담아내려 노력했습니다!</Text>
<Text style={styles.desc02}>꼭 완주 하셔서 꼭 여러분 것으로 만들어가시길 바랍니다</Text>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>https://www.instagram.com/learningcrafter/</Text>
</TouchableOpacity>
</View>
</View>)
}
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor:"#1F266A",
alignItems:"center"
},
title: {
fontSize: 30,
fontWeight:"700",
color:"#fff",
paddingLeft:30,
paddingTop:20,
paddingRight:30
},
textContainer:{
width:300,
height:500,
backgroundColor:"#fff",
marginTop:50,
borderRadius:30,
justifyContent:"center",
alignItems:"center"
},
aboutImage:{
width:150,
height:150,
borderRadius:30
},
desc01:{
textAlign:"center",
fontSize:20,
fontWeight:"700",
paddingLeft:22,
paddingRight:22
},
desc02:{
textAlign:"center",
fontSize:15,
fontWeight:"700",
padding:22,
}
})
