[스파르타] 앱개발 2주차 (2/2)

0
post-thumbnail

외부파일 불러오는 방법

//폴더안에 존재할경우
import data from './data.json';
//폴더 밖에 있는 경우
import data from '../data.json';

map 반복문으로 json불러오기

 <View style={styles.cardContainer}>
         {/* 하나의 카드 영역을 나타내는 View */}
         { 
          tip.map((content,i)=>{
            return (<View style={styles.card} key={i}>
              <Image style={styles.cardImage} source={{uri:content.image}}/>
              <View style={styles.cardText}>
                <Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>
                <Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>
                <Text style={styles.cardDate}>{content.date}</Text>
              </View>
            </View>)
          })
         }
      </View>

JS 삼항연산자

let result = 10 > 2 ? "참" : "거짓"

(기본 모습)
let result = 조건 ? 참일 때 : 거짓 일때

(예제)
let result = 10 == 9 ? true : false  // result <-- false 값 할당  
let result = 10 !== 9 ? true : false // result <-- true 값 할당  
let reuslt = 99 > 10 ? true : false // result <-- true 값 할당  

숙제


어바웃 화면만들기

import React from 'react'
import {View,Text,StyleSheet,Image, TouchableOpacity} from 'react-native'
import { color } from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';

export default function AboutPage(){
    return (<View style={styles.container}>
        <Text style = {styles.main}>Hi! 스파르타코딩 앱개발 반에 오신것을 환영합니다</Text>
        <View style={styles.imgcontainer}>
            <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'}}
                style={styles.imageStyle}
                resizeMode='cover'
            />
            <Text style={styles.desc01}>
                많은 내용을 간결하게 담아내려 노력했습니다!
            </Text>
            <Text style={styles.desc02}>
                꼭 완주하셔서 여러분들것으로 만들어가시길 바랍니다
            </Text>
            <TouchableOpacity style={styles.Button}>
                <Text style={styles.ButtonText}>
                    @0thousandboy
                </Text>
            </TouchableOpacity>
        </View>
      </View>);
}
const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor: '#252c74',
        alignItems:'center'
    },
    main:{
        fontSize : 30,
        color: '#fff',
        marginTop: 80,
        marginHorizontal: 30,
        fontWeight:"700"
    },
    imgcontainer:{
        backgroundColor:'#fff',
        height:500,
        width:'80%',
        justifyContent:'center',
        alignItems:'center',
        marginTop:50,
        borderRadius:30
    },
    imageStyle:{
        height:150,
        width:150,
        borderRadius:30
    },
    Button:{
        backgroundColor:'orange',
        padding:20,
        borderRadius:15
    },
    ButtonText:{
        fontSize:20,
        fontWeight:"700",
        color:'#fff'
    },
    desc01:{
        textAlign:"center",
        fontSize:20,
        fontWeight:"700",
        paddingLeft:22,
        paddingRight:22
    },
    desc02:{
        textAlign:"center",
        fontSize:15,
        fontWeight:"700",
        padding:22
    }
});

결과물

0개의 댓글