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

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

Card.js를 코드스니펫했는데, 저장하니 바로 모바일화면 에러뜹니다. --;

import React from "react";

import { View, Image, Text, StyleSheet, TouchableOpacity } from "react-native";

//MainPage로 부터 navigation 속성을 전달받아 Card 컴포넌트 안에서 사용

export default function Card({ content, navigation }) {

  return (

    //카드 자체가 버튼역할로써 누르게되면 상세페이지로 넘어가게끔 TouchableOpacity를 사용

    <TouchableOpacity

      style={styles.card}

      onPress={() => {

        navigation.navigate("DetailPage", { idx: content.idx });

      }}>

      <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>{" "}

    </TouchableOpacity>

  );

}

const styles = StyleSheet.create({

  card: {

    flex: 1,

    flexDirection: "row",

    margin: 10,

    borderBottomWidth: 0.5,

    borderBottomColor: "#eee",

    paddingBottom: 10,

  },

  cardImage: { flex: 1, width: 100, height: 100, borderRadius: 10 },

  cardText: { flex: 2, flexDirection: "column", marginLeft: 10 },

  cardTitle: { fontSize: 20, fontWeight: "700" },

  cardDesc: { fontSize: 15 },

  cardDate: { fontSize: 10, color: "#A6A6A6" },

});보고 계신 화면 전체를 캡처해 주시면, 튜터님들이 빠르게 상황을 이해할 수 있어요.

작성한 코드 및 에러 메세지

오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!