| @@ -27,7 +27,7 @@ export default class MyPage extends Component { | |||||
| this.state = { | this.state = { | ||||
| baseInfo: { | baseInfo: { | ||||
| imgUrl:'', | |||||
| imgUrlH:'', | |||||
| imgQrcodeWeapp:'', | imgQrcodeWeapp:'', | ||||
| imgQrcodeWemp:'' | imgQrcodeWemp:'' | ||||
| }, | }, | ||||
| @@ -152,46 +152,41 @@ render() { | |||||
| } | } | ||||
| return ( | 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> | </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> | </ImageBackground> | ||||
| ); | ); | ||||
| @@ -202,10 +197,10 @@ render() { | |||||
| const styles = StyleSheet.create({ | const styles = StyleSheet.create({ | ||||
| //layer background | //layer background | ||||
| container:{ | |||||
| background:{ | |||||
| flex: 1, | flex: 1, | ||||
| paddingLeft: 16, | |||||
| paddingRight: 16 | |||||
| width:'100%', | |||||
| height:'100%' | |||||
| }, | }, | ||||
| //layer top | //layer top | ||||
| @@ -213,18 +208,24 @@ render() { | |||||
| flex: 6, | flex: 6, | ||||
| flexDirection: 'row', | flexDirection: 'row', | ||||
| alignItems: 'center', | alignItems: 'center', | ||||
| paddingLeft:16, | |||||
| paddingRight:16, | |||||
| backgroundColor:'transparent' | backgroundColor:'transparent' | ||||
| }, | }, | ||||
| content:{ | content:{ | ||||
| flex: 18, | flex: 18, | ||||
| flexDirection: 'column', | flexDirection: 'column', | ||||
| alignItems: 'center', | alignItems: 'center', | ||||
| backgroundColor:'transparent' | backgroundColor:'transparent' | ||||
| }, | }, | ||||
| bottom:{ | bottom:{ | ||||
| flex: 2, | flex: 2, | ||||
| flexDirection: 'row', | flexDirection: 'row', | ||||
| alignItems: 'center', | alignItems: 'center', | ||||
| paddingLeft:16, | |||||
| paddingRight:16, | |||||
| backgroundColor:'transparent' | backgroundColor:'transparent' | ||||
| }, | }, | ||||
| @@ -232,7 +233,7 @@ render() { | |||||
| titleImagePlace: { | titleImagePlace: { | ||||
| flex: 2, | flex: 2, | ||||
| paddingTop: '20%', | paddingTop: '20%', | ||||
| paddingLeft: '10%', | |||||
| paddingLeft: '15%', | |||||
| alignItems: 'center', | alignItems: 'center', | ||||
| backgroundColor:'transparent' | backgroundColor:'transparent' | ||||
| }, | }, | ||||
| @@ -246,40 +247,47 @@ render() { | |||||
| titleQrcodeBonder: { | titleQrcodeBonder: { | ||||
| width:'100%', | width:'100%', | ||||
| height:'100%', | height:'100%', | ||||
| alignItems: 'center', | |||||
| flexDirection: 'column', | |||||
| flex: 1, | flex: 1, | ||||
| backgroundColor:'transparent' | backgroundColor:'transparent' | ||||
| }, | }, | ||||
| titleQrcodePlacehold: { | |||||
| flex: 2, | |||||
| backgroundColor:'blue' | |||||
| }, | |||||
| titleQrcode: { | titleQrcode: { | ||||
| margin: '20%', | |||||
| marginTop: '40%', | |||||
| marginBottom: '2%', | |||||
| width:'60%', | |||||
| height:'30%', | |||||
| flex: 2, | |||||
| width:'100%', | |||||
| height:'100%', | |||||
| backgroundColor:'transparent' | backgroundColor:'transparent' | ||||
| }, | }, | ||||
| //layer bottom | //layer bottom | ||||
| bottomLogo: { | bottomLogo: { | ||||
| flex: 50, | |||||
| flex: 3, | |||||
| width:'100%', | width:'100%', | ||||
| height:'100%', | height:'100%', | ||||
| backgroundColor:'transparent' | backgroundColor:'transparent' | ||||
| }, | }, | ||||
| bottomQrcode1: { | bottomQrcode1: { | ||||
| flex: 30, | |||||
| flex: 1, | |||||
| width:'100%', | width:'100%', | ||||
| height:'100%', | height:'100%', | ||||
| marginLeft: 8, | |||||
| backgroundColor:'transparent' | backgroundColor:'transparent' | ||||
| }, | }, | ||||
| bottomQrcode2: { | bottomQrcode2: { | ||||
| flex: 30, | |||||
| flex: 1, | |||||
| width:'100%', | width:'100%', | ||||
| height:'100%', | height:'100%', | ||||
| marginLeft: 8, | |||||
| backgroundColor:'transparent' | backgroundColor:'transparent' | ||||
| }, | }, | ||||
| bottomPlacehold: { | bottomPlacehold: { | ||||
| flex: 180, | |||||
| flex: 8, | |||||
| width:'100%', | width:'100%', | ||||
| height:'100%', | height:'100%', | ||||
| backgroundColor:'transparent' | backgroundColor:'transparent' | ||||
| @@ -288,6 +296,8 @@ render() { | |||||
| //layer content item | //layer content item | ||||
| contentItem:{ | contentItem:{ | ||||
| flex: 1, | flex: 1, | ||||
| width:'100%', | |||||
| height:'100%', | |||||
| flexDirection: 'column', | flexDirection: 'column', | ||||
| alignItems: 'center', | alignItems: 'center', | ||||
| backgroundColor:'transparent' | backgroundColor:'transparent' | ||||