import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, ScrollView, Image, TouchableOpacity } 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 style={styles.mybutton} horizontal={true}>
<TouchableOpacity style={styles.button01}><Text style={styles.middleButtonText}>생활</Text></TouchableOpacity>
<TouchableOpacity style={styles.button02}><Text style={styles.middleButtonText}>재테크</Text></TouchableOpacity>
<TouchableOpacity style={styles.button03}><Text style={styles.middleButtonText}>반려견</Text></TouchableOpacity>
<TouchableOpacity style={styles.button04}><Text style={styles.middleButtonText}>꿀팁 찜</Text></TouchableOpacity>
</ScrollView>
</View>
<StatusBar style="light" />
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
textStyle: {
fontSize : 20,
fontWeight : "700",
marginTop : 50,
marginLeft: 20,
},
mainImage: {
width:'90%',
height:200,
borderRadius:10,
marginTop:20,
alignSelf:"center"
},
mybutton: {
margintop:20,
marginLeft:10,
height:60,
},
button01: {
width:100,
height:50,
padding:15,
backgroundColor:"#ffd700",
borderColor:"#fff",
borderRadius:15,
margin:7,
},
button02: {
width:100,
height:50,
padding:15,
backgroundColor:"#FFA07A",
borderColor:"#fff",
borderRadius:15,
margin:7
},
button03: {
width:100,
height:50,
padding:15,
backgroundColor:"#B0E0E6",
borderColor:"#fff",
borderRadius:15,
margin:7
},
button04: {
width:100,
height:50,
padding:15,
backgroundColor:"#FF69B4",
borderColor:"#fff",
borderRadius:15,
margin:7
},
middleButtonText: {
color:"#fff",
alignSelf:"center",//text 가운데정렬
fontWeight: "bold"
}
}
)
magintop을 건드려도 간격이 안떨어지네요. 버튼들을 더 밑으로 내리고 싶은데
