Browse Source

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

tags/jenkins-front-end-screenad-53
hupeng 6 years ago
parent
commit
ae95c3d9db
1 changed files with 54 additions and 12 deletions
  1. +54
    -12
      App.js

+ 54
- 12
App.js View File

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


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


<View style={styles.content}> <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>



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

</ImageBackground> </ImageBackground>
); );


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


const styles = StyleSheet.create({ const styles = StyleSheet.create({

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

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

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

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

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


}); });

Loading…
Cancel
Save