アイコン画面の作成

4482 ワード

import React from 'react'
import {View,Text,StyleSheet,Image, TouchableOpacity, ScrollView} from 'react-native'
export default function AboutPage_02() {
const aboutImage = "https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2FaboutImage.png?alt=media&token=13e1c4f6-b802-4975-9773-e305fc7475c4 "
return (
HI! スパルタエンコーディングアプリケーション開発クラスへようこそ
   <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}>여러분의 인스타계정</Text>
       </TouchableOpacity>
   </View>
      
    </ScrollView>
  );
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor:"#1F266A",
        
      
    },
    title: {
        fontSize:30,
        fontWeight:"700",
        color:"#fff",
        paddingLeft:30,
        paddingTop:50,
        paddingRight:30
    },
    textContainer: {
        width:300,
        height:700,
        backgroundColor:"#fff",
        marginTop:50,
        marginLeft:30,
        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
    },
    button:{
        backgroundColor:"orange",
        padding:20,
        borderRadius:15
    },
    buttonText: {
        color:"#fff",
        fontSize:15,
        fontWeight:"700"
    }
})

화면이 폰에 안맞아 스크롤뷰를 적용함.