App.js

import React from 'react'
import MainPage from './pages/MainPage';
import AboutPage from './pages/AboutPage';
import DetailPage from './pages/DetailPage';


export default function App() {
  // return (<MainPage/>)
  // return (<AboutPage/>)
  return (<DetailPage />)
}

DetailPage.js

import React from 'react';
import { StyleSheet, Text, View, Image, ScrollView, TouchableOpacity, Alert } from 'react-native';


export default function DetailPage() {



    const tip = {
        "idx": 9,
        "category": "재테크",
        "title": "렌탈 서비스 금액 비교해보기",
        "image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/money1.png",
        "desc": "요즘은 정수기, 공기 청정기, 자동차나 장난감 등 다양한 대여서비스가 활발합니다. 사는 것보다 경제적이라고 생각해 렌탈 서비스를 이용하는 분들이 늘어나고 있는데요. 다만, 이런 렌탈 서비스 이용이 하나둘 늘어나다 보면 그 금액은 겉잡을 수 없이 불어나게 됩니다. 특히, 렌탈 서비스는 빌려주는 물건의 관리비용까지 포함된 것이기에 생각만큼 저렴하지 않습니다. 직접 관리하며 사용할 수 있는 물건이 있는지 살펴보고, 렌탈 서비스 항목에서 제외해보세요. 렌탈 비용과 구매 비용, 관리 비용을 여러모로 비교해보고 고민해보는 것이 좋습니다. ",
        "date": "2020.09.09"
    }


    const popup = () => {
        Alert.alert("팝업!!")
    }
    return (
        // ScrollView에서의 flex 숫자는 의미가 없습니다. 정확히 보여지는 화면을 몇등분 하지 않고
        // 화면에 넣은 컨텐츠를 모두 보여주려 스크롤 기능이 존재하기 때문입니다. 
        // 여기선 내부의 컨텐츠들 영역을 결정짓기 위해서 height 값과 margin,padding 값을 적절히 잘 이용해야 합니다. 
        <ScrollView style={styles.container}>
            <Image style={styles.image} source={{ uri: tip.image }} />
            <View style={styles.textContainer}>
                <Text style={styles.title}>{tip.title}</Text>
                <Text style={styles.desc}>{tip.desc}</Text>
                <TouchableOpacity style={styles.button} onPress={() => popup()}><Text style={styles.buttonText}>팁 찜하기</Text></TouchableOpacity>
            </View>


        </ScrollView>


    )
}


const styles = StyleSheet.create({
    container: {
        backgroundColor: "#000"
    },
    image: {
        height: 400,
        margin: 10,
        marginTop: 40,
        borderRadius: 20
    },
    textContainer: {
        padding: 20,
        justifyContent: 'center',
        alignItems: 'center'
    },
    title: {
        fontSize: 20,
        fontWeight: '700',
        color: "#eee"
    },
    desc: {
        marginTop: 10,
        color: "#eee"
    },
    button: {
        width: 100,
        marginTop: 20,
        padding: 10,
        borderWidth: 1,
        borderColor: 'deeppink',
        borderRadius: 7
    },
    buttonText: {
        color: '#fff',
        textAlign: 'center'
    }
})

아까 전에 튜터님이 말씀하신대로 ctrl+s를 깜박했는지 확인하고 expo start -c로 바꿔서 해보라고 했었는데 QR코드가 나왔지만 인식했음에도 오류가 나서 어떤 이유인지 잘 모르겠습니다...