Переглянути джерело

[样式][修改]:调整APP整体样式

tags/jenkins-front-end-screenad-53
hupeng 6 роки тому
джерело
коміт
ae95c3d9db
1 змінених файлів з 54 додано та 12 видалено
  1. +54
    -12
      App.js

+ 54
- 12
App.js Переглянути файл

@@ -138,23 +138,40 @@ render() {
<ImageBackground style={styles.container}
source={require('./image/background.png')}>

<View style={styles.title}>
<View style={styles.titleImagePlace}>
<Image source={require('./image/title.png')} resizeMode='center' style={styles.titleImage} />
</View>
<Image source={require('./image/title-qrcode.png')} resizeMode='center' style={styles.titleQrcode} />
</View>


<View style={styles.content}>
<Image source={require('./image/item-background.png')} resizeMode='center' style={styles.titleImage} />
<Image source={require('./image/item-background.png')} resizeMode='center' style={styles.titleImage} />
<Image source={require('./image/item-background.png')} resizeMode='center' style={styles.titleImage} />
<Image source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItem} />





<Image source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItem} />





<Image source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItem} />
</View>



<View style={styles.bottom}>
<Image source={require('./image/logo.png')} resizeMode='center' style={styles.bottomLogo} />
<Image source={require('./image/test-l.png')} resizeMode='center' style={styles.bottomQrcode1} />
<Image source={require('./image/test-l.png')} resizeMode='center' style={styles.bottomQrcode2} />
<Text style={styles.bottomPlacehold}></Text>
</View>

</ImageBackground>
);

@@ -162,11 +179,15 @@ render() {
}

const styles = StyleSheet.create({

//layer background
container:{
flex: 1,
paddingLeft: 16,
paddingRight: 16
},

//layer top
title:{
flex: 6,
flexDirection: 'row',
@@ -185,39 +206,60 @@ render() {
alignItems: 'center',
backgroundColor:'transparent'
},

//layer title
titleImagePlace: {
flex: 2,
paddingTop: '20%',
paddingLeft: '10%',
alignItems: 'center',
backgroundColor:'transparent'
},
titleImage: {
width:'100%',
height:'100%',
flex: 1,
alignItems:'center',
backgroundColor:'transparent'
},
titleQrcode: {
width:'100%',
height:'100%',
flex: 1,
backgroundColor:'transparent'
},

//layer bottom
bottomLogo: {
flex: 2,
alignItems: 'center',
flex: 50,
width:'100%',
height:'100%',
backgroundColor:'transparent'
},
bottomQrcode1: {
flex: 1,
alignItems: 'center',
flex: 30,
width:'100%',
height:'100%',
backgroundColor:'transparent'
},
bottomQrcode2: {
flex: 1,
alignItems: 'center',
flex: 30,
width:'100%',
height:'100%',
backgroundColor:'transparent'
},
bottomPlacehold: {
flex: 6,
flex: 180,
width:'100%',
height:'100%',
backgroundColor:'transparent'
},

//layer content item
contentItem:{
flex: 1,
flexDirection: 'column',
alignItems: 'center',
backgroundColor:'transparent'
}
},

});

Завантаження…
Відмінити
Зберегти