| @@ -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' | ||||
| } | |||||
| }, | |||||
| }); | }); | ||||