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

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

2주차 과제중인데, 아래 캡쳐 화면에서 이미지부터 버튼까지 해당되는 곳 배경에 흰색 박스를 만들려고 하는데

<TouchableOpacity style={styles.middleBackgrond}></TouchableOpacity>

    middleBackground: {
        alignItems: 'center',
        backgroundColor: '#ffffff',
    }

이런식으로 TouchableOpacity를 이용해서 넣는게 맞나요? 화면에는 아무것도 나오지가 않습니다.

</>

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


const main = 'https://storage.googleapis.com/sparta-image.appspot.com/lecture/about.png'
export default function AboutPage(){
  return (<ScrollView style={styles.container}>
        <Text style={styles.title}>HI! 스파르타코딩 앱개발반에 오신것을 환영합니다</Text>
        <Image style={styles.mainImage} source={{uri:main}}/>
        <Text style={styles.subTitle}>많은 내용을 간결하게 담아내려 노력했습니다!</Text>
        <Text style={styles.description}>꼭 완주 하셔서 꼭 여러분것으로 만들어가시길 바랍니다.</Text>
        <TouchableOpacity style={styles.Button}><Text style={styles.ButtonText}>여러분의 인스타계정</Text></TouchableOpacity>
        <TouchableOpacity style={styles.middleBackgrond}></TouchableOpacity>
      </ScrollView>)
}


const styles = StyleSheet.create({
    container: {
      //앱의 배경 색
      backgroundColor: '#262C74',
    },
    title: {
      //폰트 사이즈
      fontSize: 35,


      color: '#ffffff',
      //폰트 두께
      fontWeight: '700',
      //위 공간으로 부터 이격
      marginTop:120,
      //왼쪽 공간으로 부터 이격
      marginLeft:20,
      
      marginRight:20
    },
    subTitle: {
      //폰트 사이즈
      fontSize: 25,
      //폰트 두께
      fontWeight: '700',
      //위 공간으로 부터 이격
      marginTop:20,
      //왼쪽 공간으로 부터 이격
      marginLeft:40,


      marginRight:40,


      textAlign:'center'
    },
    description: {
      //폰트 사이즈
      fontSize: 20,
      //폰트 두께
      fontWeight: '500',
      //위 공간으로 부터 이격
      marginTop:50,
      //왼쪽 공간으로 부터 이격
      marginLeft:20,


      marginRight:20,


      textAlign:'center'
    },
    mainImage: {
      //컨텐츠의 넓이 값
      width:'90%',
      //컨텐츠의 높이 값
      height:200,
      //컨텐츠의 모서리 구부리기
      borderRadius:10,
      marginTop:20,
      //컨텐츠 자체가 앱에서 어떤 곳에 위치시킬지 결정(정렬기능)
      //각 속성의 값들은 공식문서에 고대로~ 나와 있음
      alignSelf:"center"
    },
    Button: {
        alignItems: 'center',
        backgroundColor: '#F3B13E',
        padding: 30,
        margin: 50,
        borderRadius: 10
      },
    ButtonText: {
        color:"#fff",
        fontWeight:"700",
        //텍스트의 현재 위치에서의 정렬 
        textAlign:"center"
      },
    middleBackground: {
        alignItems: 'center',
        backgroundColor: '#ffffff',
    }
});