スパルタエンコーディングクラブ2週目[作業]
14974 ワード
<スワップページの作成>
import React from 'react'
import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native'
export default function AboutPage() { //함수 이름은 파일 이름과 같게!
return (
<View style={styles.container}>
<View style={styles.text_box}>
<Text style={styles.main_text}>HI! 스파르타코딩 앱개발{"\n"}반에 오신것을 환영합니다</Text>
</View>
<View style={styles.content_box}>
<Image style={styles.main_image}
source={{ uri: 'https://firebasestorage.googleapis.com/v0/b/sparta-image.
appspot.com/o/lecture%2FaboutImage.png?alt
=media&token=13e1c4f6-b802-4975-9773-e305fc7475c4' }}
/>
<View style={styles.inner_box}>
<Text style={styles.inner_text1}>많은 내용을 간결하게 담아내려{"\n"}노력했습니다!</Text>
<Text style={styles.inner_text2}>꼭 완주하셔셔 꼭 여러분것으로 만들어가시{"\n"}길 바랍니다</Text>
</View>
<TouchableOpacity style={styles.social_button}>
<Text style={styles.button_text}>여러분의 인스타계정</Text>
</TouchableOpacity>
</View>
</View> // {"\n"} 사용해서 줄바꿈
)
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#15106b',
flex: 1,
},
text_box: {
flex: 1,
marginTop: 70,
alignItems:"center",
},
main_text: {
flex: 1,
color: '#ffffff',
fontSize:25,
},
content_box: {
backgroundColor:'#ffffff',
marginLeft:30,
marginRight:30,
marginBottom:80,
borderRadius:25,
flex: 5,
alignItems:"center"
},
main_image: {
alignItems:"center",
borderRadius:35,
width:"45%",
height:"30%",
marginTop:80,
},
inner_box: {
margin:0,
alignItems:"center",
justifyContent:"center",
},
inner_text1: {
textAlign:"center", //텍스트 가운데 정렬에 유용!
fontSize:20,
fontWeight:"700",
},
inner_text2: {
fontSize:16,
marginTop:25,
textAlign:"center",
fontWeight:"700",
},
social_button: {
fontSize:16,
backgroundColor:"#edba00",
paddingTop:20,
paddingBottom:20,
paddingLeft:20,
paddingRight:20,
marginTop:30,
borderRadius:15,
},
button_text: {
color:'#ffffff',
}
})
Reference
この問題について(スパルタエンコーディングクラブ2週目[作業]), 我々は、より多くの情報をここで見つけました https://velog.io/@toto9602/스파르타코딩클럽-2주차숙제テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol