<TouchableOpacity style={styles.middleButton0} onPress={()=>{category("건강");}}><Text style={styles.middleButtonText}>건강</Text></TouchableOpacity>
추가하고
middleButton00: {
width:100,
height:50,
padding:15,
backgroundColor:"#fdc453#4ACC3F",
borderColor:"deeppink",
borderRadius:15,
margin:7
이것도 추가했거든요~?
근데 버튼생성이 안되있어요;;
뭐가 문제일까요~?
<Image style={styles.mainImage} source={{uri:main}} />
<ScrollView style={styles.middleContainer} horizontal indicatorStyle={"white"}>
<TouchableOpacity style={styles.middleButtonAll} onPress={()=>{category("전체보기");}}><Text style={styles.middleButtonTextAll}>전체보기</Text></TouchableOpacity>
<TouchableOpacity style={styles.middleButton0} onPress={()=>{category("건강");}}><Text style={styles.middleButtonText}>건강</Text></TouchableOpacity>
<TouchableOpacity style={styles.middleButton01} onPress={()=>{category("생활");}}><Text style={styles.middleButtonText}>생활</Text></TouchableOpacity>
<TouchableOpacity style={styles.middleButton02} onPress={()=>{category("재테크");}}><Text style={styles.middleButtonText}>재테크</Text></TouchableOpacity>
<TouchableOpacity style={styles.middleButton03} onPress={()=>{category("반려견");}}><Text style={styles.middleButtonText}>반려견</Text></TouchableOpacity>
<TouchableOpacity style={styles.middleButton04} onPress={()=>{navigation.navigate("LikePage");}}><Text style={styles.middleButtonText}>꿀팁 찜</Text></TouchableOpacity>
</ScrollView>
.
.
.
const styles = StyleSheet.create({
container: {
//앱의 배경 색
backgroundColor: '#fff',
},
container1: {
//앱의 배경 색
backgroundColor: '#fff',
height:100,
flex: 1,
flexDirection: "row"
},
title: {
//폰트 사이즈
fontSize: 20,
//폰트 두께
fontWeight: '700',
//위 공간으로 부터 이격
marginTop:50,
//왼쪽 공간으로 부터 이격
marginLeft:20
},
weather:{
marginTop:35
},
mainImage: {
//컨텐츠의 넓이 값
width:'90%',
//컨텐츠의 높이 값
height:200,
//컨텐츠의 모서리 구부리기
borderRadius:10,
//컨텐츠 자체가 앱에서 어떤 곳에 위치시킬지 결정(정렬기능)
//각 속성의 값들은 공식문서에 고대로~ 나와 있음
alignSelf:"center"
},
middleContainer:{
marginTop:20,
marginLeft:10,
height:60
},
middleButtonAll: {
width:100,
height:50,
padding:15,
backgroundColor:"#20b2aa",
borderColor:"deeppink",
borderRadius:15,
margin:7
},
middleButton00: {
width:100,
height:50,
padding:15,
backgroundColor:"#fdc453#4ACC3F",
borderColor:"deeppink",
borderRadius:15,
margin:7
},
middleButton01: {
width:100,
height:50,
padding:15,
backgroundColor:"#fdc453",
borderColor:"deeppink",
borderRadius:15,
margin:7
},
middleButton02: {
width:100,
height:50,
padding:15,
backgroundColor:"#fe8d6f",
borderRadius:15,
margin:7
},
middleButton03: {
width:100,
height:50,
padding:15,
backgroundColor:"#9adbc5",
borderRadius:15,
margin:7
},
middleButton04: {
width:100,
height:50,
padding:15,
backgroundColor:"#f886a8",
borderRadius:15,
margin:7
},
middleButtonText: {
color:"#fff",
fontWeight:"700",
//텍스트의 현재 위치에서의 정렬
textAlign:"center"
},
middleButtonTextAll: {
color:"#fff",
fontWeight:"700",
//텍스트의 현재 위치에서의 정렬
textAlign:"center"
},
cardContainer: {
marginTop:10,
marginLeft:10
},
aboutButton: {
backgroundColor:"pink",
width:100,
height:40,
borderRadius:10,
marginLeft:20,
marginRight:20,
marginTop:30
},
aboutButtonText: {
color:"#fff",
textAlign:"center",
marginTop:10
},
banner:{
width:"100%",
height:100,
marginLeft:5,
marginRight:25
}
});
