커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
detailPage화면이 안뜨고 메인페이지 화면이 떠요
[왕초보] 나만의 수익성 앱, 앱개발 종합반
3주차
북마크
조*빈
댓글
3
추천
0
조회수
4
조회수
4
답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.








작성한 코드 및 에러 메세지

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/>)

}



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'

    }

})



취소
 공유
취소
댓글 0
댓글 알림
나의얼굴