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



export default function App() {
  const [count, setCount] =useState(0)
  const onPress=()=>setCount(prevCount=>prevCount +1)
  return(
    <SafeAreaView style={styles.containerzero}>
      <View style={styles.containerzero}>
        <Text style={styles.titleText}>나만의 꿀팁</Text>
        <Image style={styles.imageStyle}
        source={{uri:'https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fmain.png?alt=media&token=8e5eb78d-19ee-4359-9209-347d125b322c'}}/>
      </View>
      <ScrollView style={styles.containerzero}
      horizontal={true}>
        <TouchableOpacity style={styles.textContainer}>
          <Text style={styles.boxText}>생활</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.textContainer}>
          <Text style={styles.boxText}>재테크</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.textContainer}>
          <Text style={styles.boxText}>반려견</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.textContainer}>
          <Text style={styles.boxText}>꿀팁 찜</Text>
        </TouchableOpacity>
      </ScrollView>
   
    </SafeAreaView>
  );
}


const styles = StyleSheet.create({
  containerzero: {
    flex:1,
    margin:10
  },
  titleText:{
    fontSize: 30,
    fontWeight:'bold',
  },
  imageStyle:{
    padding:10,
    width: "100%",
    height: "100%",
  },
  textContainer:{
    margin: 10,
    padding:10,
    borderRadius:10,
    borderWidth:2,
    borderColor:"black",
    borderStyle:"solid",
  },
  boxText:{
    fontSize:15,
    textAlign:"center"
  }
});

이렇게 코드를 구성하였고

위와 같은 화면이 만들어졌는데,

이미지와 버튼이 겹치는 부분과, 버튼의 크기를 조절하는 방법에 대하여 전혀 감이 오질 않습니다..

몰라서 찾아보려해도 무엇을 모르는지 조차 감을 못잡겠어서 ㅠㅠ

어떻게 해결해야할까요?