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

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

강의 내용에 따라서 코드를 입력하고 있는데, 제가 어떤 부분에서 실수한건지 main image가 나타나지 않네요, 도와주세요.

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


const main = "https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fmain.png?alt=media&token=8e5eb78d-19ee-4359-9209-347d125b322c"


export default function App() {
  return (


    <ScrollView style={styles.container}>
      <Text style={styles.title}>나만의 꿀팁</Text>
      <Image style={styles.mainImage} source={{uri:main}}/>
      <ScrollView style={styles.middleContainer} horizontal = {true} indicatorStyle={"white"}>
        <TouchableOpacity style={styles.middleButton01}><Text style={styles.middleButtonText}>생활</Text></TouchableOpacity>
        <TouchableOpacity style={styles.middleButton02}><Text style={styles.middleButtonText}>건강</Text></TouchableOpacity>
        <TouchableOpacity style={styles.middleButton03}><Text style={styles.middleButtonText}>재테크</Text></TouchableOpacity>
        <TouchableOpacity style={styles.middleButton04}><Text style={styles.middleButtonText}>스케줄</Text></TouchableOpacity>
      </ScrollView>
      <View style={styles.cardContainer}>
        {/* 하나의 카드 영역을 나타내는 View */}
        <View style={styles.card}>
          <Image style={styles.cardImage} source={{uri:"https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fpizza.png?alt=media&token=1a099927-d818-45d4-b48a-7906fd0d2ad3"}}/>
          <View style={styles.cardText}>
            <Text style={styles.cardTitle}>먹다 남은 피자를 촉촉하게!</Text>
            <Text style={styles.cardDesc} numberOfLines={4}>먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분 30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이 전자레인지 안에서 수증기를 일으키고, 피자에 촉촉함을 더해줍니다.</Text>
            <Text style={styles.cardDate}>2020.09.09</Text>
          </View>
        </View>
        
      </View>
    </ScrollView>


  );
}


const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 20,
    fontWeight:'700',
    marginTop: 50,
    marginLeft: 20
  },
  mainImage: {
    width: '90%',
    heigth: 200,
    borderRadius: 10,
    marginTop: 20,
    alignSelf: "center"
  },
  middleContainer: {
    marginTop: 20,
    marginLeft: 10,
    height: 60
  },
  middleButton01: {
    width:100,
    height: 50,
    padding: 15,
    backgroundColor: '#00a7e1',
    borderColor: 'deeppink',
    borderRadius: 15,
    margin: 7
  },
  middleButton02:{
    width:100,
    height: 50,
    padding: 15,
    backgroundColor: '#8e3a59',
    borderRadius: 15,
    margin: 7
  },
  middleButton03:{
    width:100,
    height: 50,
    padding: 15,
    backgroundColor: '#d8e815',
    borderRadius: 15,
    margin: 7
  },
  middleButton04:{
    width:100,
    height: 50,
    padding: 15,
    backgroundColor: '#f4c430',
    borderRadius: 15,
    margin: 7
  },
  middleButtonText:{
    color:"#fff",
    fontSize: 20,
    fontWeight: "700",
    textAlign:"center"
  },
  cardContainer: {
    marginTop: 10,
    margiLeft: 10
  },
  card: {
      flex: 1,  
      flexDirection: "row",
      margin: 10,
      borderBottomWidth:0.5,
      borderBottomColor: "#eee",
      paddingBottom: 10
  },
  cardImage: {
    flex: 1,
    width: 100,
    height: 100,
    borderadius: 10
  },
  cardText: {
    flex: 2,
    flexDirection: "column",
    marginLeft: 10
  },
  cardTitle: {
    fontSize: 20,
    fontWeight: "700"
  },
  cardDesc: {
    fontSize: 16
  },
  cardDate:{
    fontSize: 12,
    color: "#A6A6A6"
  },
})