안녕하세요.

2주차 [[실습] 복습겸, 공부겸 메인화면을 다음 화면처럼 바꾸어보세요]

를 하던 중에 최상위 <ScrollView>를 <View>로 바꿔도 상관이 없다고 하는데 그렇게 코딩하니까 왜 카드에 있는 텍스트가 안 나오는지 알 수 있을까요?

import React from 'react';


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


export default function App() {
  return (
    <ScrollView style={styles.container}>
      <Text style={styles.appName}>나만의 꿀팁</Text>
      <Image
      source={{uri:"https://storage.googleapis.com/sparta-image.appspot.com/lecture/main.png"}}
      resizeMode={"contain"}
      style={styles.mainImage}
      />


      <ScrollView horizontal style={styles.btns}>
        <TouchableOpacity style={styles.btn1}>
          <Text style={styles.btnText}>생활</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.btn2}>
          <Text style={styles.btnText}>재테크</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.btn3}>
          <Text style={styles.btnText}>반려견</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.btn4}>
          <Text style={styles.btnText}>꿀팁 찜</Text>
        </TouchableOpacity>
      </ScrollView>
      <View style={styles.contentContainer}>
        <View style={styles.contents}>
          <Image
            style={styles.thumbnail}
            source={{uri:"https://storage.googleapis.com/sparta-image.appspot.com/lecture/pizza.png"}}/>
          <View style={styles.content}>
              <Text style={styles.contentTitle}>먹다 남은 피자를 촉촉하게!</Text>
              <Text style={styles.contentDesc} numberOfLines={3}>먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분 30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이 전자레인지 안에서 수증기를 일으키고, 피자에 촉촉함을 더해줍니다.</Text>
              <Text style={styles.contentDate}>2020.09.09</Text>
          </View>
        </View>
      </View>
    </ScrollView>
  )


}


const styles = StyleSheet.create({
  container: {
    padding: 10,
    paddingTop: 40
  },
  appName: {
    fontSize: 20,
    fontWeight: "700",
  },
  mainImage: {
    width: "90%",
    height: 200,
    borderRadius: 10,
    marginTop: 20,
    alignSelf: "center"
  },
  
  btns: {
    marginTop: 20,
    marginLeft: 10,
    height: 60,
  },
  btn1: {
    width: 100,
    height: 50,
    borderRadius: 15,
    margin: 7,
    padding: 15,
    backgroundColor: "orange"
  },
  btn2: {
    width: 100,
    height: 50,
    borderRadius: 15,
    margin: 7,
    padding: 15,
    backgroundColor: "pink"
  },
  btn3: {
    width: 100,
    height: 50,
    borderRadius: 15,
    margin: 7,
    padding: 15,
    backgroundColor: "lightblue"
  },
  btn4: {
    width: 100,
    height: 50,
    borderRadius: 15,
    margin: 7,
    padding: 15,
    backgroundColor: "violet"
  },
  btnText: {
    textAlign: "center",
    fontWeight: "700",
    color: "white"
  },


  contentContainer:{
    marginTop: 10,
    marginLeft: 10
  },
  contents: {
    flex: 1,
    flexDirection: 'row',
    margin: 10,
    borderBottomWidth: 0.5,
    borderBottomColor: "#eee",
    paddingBottom: 10
  },
  thumbnail: {
    flex: 1,
    width: 100,
    height: 100,
    borderRadius: 10
  },
  content: {
    flexDirection: "column",
    flex: 2,
    marginLeft: 10
  },
  contentTitle: {
    fontSize: 20,
    fontWeight: "700"
  },
  contentDesc: {
    fontSize: 15,
    color: "black"
  },
  contentDate: {
    fontSize: 10,
    color: "#a6a6a6"
  }
});

아래는 <View>로 작성했을때 사진이고

return(
  <View>
// ~~~
</View>
 )

아래는 <ScrollView>로 작성했을때 화면입니다. 둘 다 아래처럼 나와야하는게 맞는거 같은데 View 태그만 쓰면 저렇게 사라지네요 ㅠ