이미지에 배경을 만드는 방법
3553 단어 reactnative
4개의 이미지가 있는 하나의 raw를 갖고 싶습니다. 각 이미지 아래에 짧은 텍스트를 표시하고 싶습니다. 일반적인 배경이 있습니다. 각 이미지에서 다른 색상의 정사각형을 갖고 싶습니다.
문제:
패딩과 올바른 크기의 backgroundColor 색상을 추가하는 방법
import React from 'react';
import { View, Image, StyleSheet , Text } from 'react-native'
function Settings(props) {
return (
<View style={styles.container}>
<View style={[styles.imageView,styles.smallBackground]}>
<Image
style={styles.smallImage}
source={require('../assets/DiceSize.png')}
></Image>
<View>
<Text style={styles.text} >
S
</Text>
</View>
</View>
<View style={[styles.imageView,styles.meduimBackground]}>
<Image
style={[styles.meduimImage]}
source={require('../assets/DiceSize.png')}
></Image>
<View>
<Text style={styles.text}>
M
</Text>
</View>
</View>
<View style={[styles.imageView,styles.largeBackground]}>
<Image
style={styles.largeImage}
source={require('../assets/DiceSize.png')}
></Image>
<View>
<Text style={styles.text}>
L
</Text>
</View>
</View>
<View style={[styles.imageView,styles.xlargeBackground]}>
<Image
style={styles.xlargeImage}
source={require('../assets/DiceSize.png')}
></Image>
<View>
<Text style={styles.text}>
XL
</Text>
</View>
</View>
</View>
);
}
export default Settings;
const styles = StyleSheet.create({
smallBackground: {
backgroundColor: 'black',
width: 80,
height: 110,
},
meduimBackground: {
backgroundColor: 'black',
width: 80,
height: 110,
},
largeBackground: {
backgroundColor: 'black',
width: 80,
height: 110,
},
xlargeBackground: {
backgroundColor: 'black',
width: 90,
height: 110,
},
text:{
padding: 20,
color: 'white',
},
imageView:{
paddingLeft: 30,
},
container: {
flex: 1,
backgroundColor: '#a9a9a9',
flexDirection:'row',
alignItems:'center',
// justifyContent:'center',
},
smallImage:{
width: 45,
height: 46,
},
meduimImage:{
width: 52,
height: 53,
},
largeImage: {
width: 60,
height: 61,
},
xlargeImage: {
width: 68,
height: 70,
}
})
Reference
이 문제에 관하여(이미지에 배경을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/yossi/how-i-can-create-background-to-image-lab텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)