import { StatusBar } from 'expo-status-bar';

import React from 'react';

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

const main = 'https://storage.googleapis.com/sparta-image.appspot.com/lecture/main.png'

export default function App() {

  return (

    <ScrollView style={styles.container}>

      <View style={styles.textContainer}>

        <Text style={styles.textStyle}>나만의 꿀팁</Text>

        <Image style={styles.mainImage} source={{uri:main}}/>

        <ScrollView horizontal={true}>

        <Button

          style={styles.buttonStyle}

          title="버튼입니다 "

          color="#f194ff"

          onPress={function(){

            Alert.alert('팝업 알람입니다!!')

          }}

        />

        {/* ES6 문법으로 배웠던 화살표 함수로 연결 할 수도 있습니다. */}

        <Button

            style={styles.buttonStyle}

            title="버튼입니다 "

            color="#FF0000"

            onPress={()=>{

              Alert.alert('팝업 알람입니다!!')

            }}

          />

        </ScrollView>

      </View>

      <StatusBar style="light" />

    </ScrollView>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

  },

  textContainer: {

    borderRadius:10,

    margin:20,

    padding:0,

  },

  textStyle: {

    fontSize : 30,

    fontWeight : "800",

    textAlign : 'left',

    marginTop : 20,

  },

  mainImage: {

    flex : 1,

    width:'90%',

    height:200,

    borderRadius:10,

    marginTop:20,

  },

  buttonStyle : {

    flex : 1,

    flexDirection:'row',

    alignItems:'flex-start',

    borderRadius:10,

    marginTop:20,

    marginRight:10,

  }

  }

)

버튼 margin 값을 줘도 왜 간격이동이 안될까요...?