Explorar el Código

[样式][修改]:调整二维码显示样式

tags/jenkins-front-end-screenad-53
hupeng hace 6 años
padre
commit
e69604c191
Se han modificado 1 ficheros con 56 adiciones y 46 borrados
  1. +56
    -46
      App.js

+ 56
- 46
App.js Ver fichero

@@ -27,7 +27,7 @@ export default class MyPage extends Component {
this.state = {
baseInfo: {
imgUrl:'',
imgUrlH:'',
imgQrcodeWeapp:'',
imgQrcodeWemp:''
},
@@ -152,46 +152,41 @@ render() {
}

return (
<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} />
<ImageBackground style={styles.background} resizeMode='center' 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>

<ImageBackground source={require('./image/title-qrcode.png')} resizeMode='center' style={styles.titleQrcodeBonder} >
<View style={styles.titleQrcodePlacehold}></View>
<Image source={{uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.titleQrcode} />
<View style={styles.titleQrcodePlacehold}></View>
</ImageBackground>
</View>

<ImageBackground source={require('./image/title-qrcode.png')} resizeMode='center' style={styles.titleQrcodeBonder} >
<Image source={{uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.titleQrcode} />
</ImageBackground>
</View>


<View style={styles.content}>
<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 style={styles.content}>
<ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItem} >
</ImageBackground>


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


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

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



<View style={styles.bottom}>
<Image source={{ uri: this.state.baseInfo.imgUrl, cache: 'force-cache'}} resizeMode='center' style={styles.bottomLogo} />
<Image source={{ uri: 'http://hangge.com/img.png',cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode1} />
<Image source={{ uri: 'http://hangge.com/img.png',cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode2} />
<Text style={styles.bottomPlacehold}>{this.state.text}</Text>
</View>
<View style={styles.bottom}>
<Image source={{ uri: this.state.baseInfo.imgUrlH, cache: 'force-cache'}} resizeMode='center' style={styles.bottomLogo} />
<Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp, cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode1} />
<Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp, cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode2} />
<Text style={styles.bottomPlacehold}>{this.state.text}</Text>
</View>

</ImageBackground>
);
@@ -202,10 +197,10 @@ render() {
const styles = StyleSheet.create({

//layer background
container:{
background:{
flex: 1,
paddingLeft: 16,
paddingRight: 16
width:'100%',
height:'100%'
},

//layer top
@@ -213,18 +208,24 @@ render() {
flex: 6,
flexDirection: 'row',
alignItems: 'center',
paddingLeft:16,
paddingRight:16,
backgroundColor:'transparent'
},

content:{
flex: 18,
flexDirection: 'column',
alignItems: 'center',
backgroundColor:'transparent'
},

bottom:{
flex: 2,
flexDirection: 'row',
alignItems: 'center',
paddingLeft:16,
paddingRight:16,
backgroundColor:'transparent'
},

@@ -232,7 +233,7 @@ render() {
titleImagePlace: {
flex: 2,
paddingTop: '20%',
paddingLeft: '10%',
paddingLeft: '15%',
alignItems: 'center',
backgroundColor:'transparent'
},
@@ -246,40 +247,47 @@ render() {
titleQrcodeBonder: {
width:'100%',
height:'100%',
alignItems: 'center',
flexDirection: 'column',
flex: 1,
backgroundColor:'transparent'
},

titleQrcodePlacehold: {
flex: 2,
backgroundColor:'blue'
},

titleQrcode: {
margin: '20%',
marginTop: '40%',
marginBottom: '2%',
width:'60%',
height:'30%',
flex: 2,
width:'100%',
height:'100%',
backgroundColor:'transparent'
},

//layer bottom
bottomLogo: {
flex: 50,
flex: 3,
width:'100%',
height:'100%',
backgroundColor:'transparent'
},
bottomQrcode1: {
flex: 30,
flex: 1,
width:'100%',
height:'100%',
marginLeft: 8,
backgroundColor:'transparent'
},
bottomQrcode2: {
flex: 30,
flex: 1,
width:'100%',
height:'100%',
marginLeft: 8,
backgroundColor:'transparent'
},
bottomPlacehold: {
flex: 180,
flex: 8,
width:'100%',
height:'100%',
backgroundColor:'transparent'
@@ -288,6 +296,8 @@ render() {
//layer content item
contentItem:{
flex: 1,
width:'100%',
height:'100%',
flexDirection: 'column',
alignItems: 'center',
backgroundColor:'transparent'


Cargando…
Cancelar
Guardar