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