SHARE
TWEET

Player

a guest Dec 3rd, 2019 62 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, {Component} from 'react';
  2. import {
  3.   SafeAreaView,
  4.   ScrollView,
  5.   Text,
  6.   View,
  7.   Image,
  8. } from 'react-native';
  9.  
  10. class Player extends Component {
  11.  
  12. render() {
  13.   return (
  14.     <SafeAreaView style={{flex: 1}}>
  15.         <View style={{flex: 1, flexDirection: 'row'}}>
  16.             <View style={{flex:1, alignItems: 'flex-end', justifyContent: 'center', margin: 10}}>
  17.               <Image style={{width: 15, height: 15}} source={require('Player/img/musical-note.png')}/>
  18.             </View>
  19.             <View style={{flex: 8, justifyContent: 'center'}}>
  20.                 <Text style={{}}>NOW PLAYING</Text>
  21.             </View>
  22.         </View>
  23.         <View style={{flex: 1}}>
  24.             <View style={{flex: 1, justifyContent: 'flex-end', marginLeft: 40}}>
  25.                 <Text style={{fontSize: 32}}>Best Artist</Text>
  26.             </View>
  27.             <View style={{flex: 1, justifyContent: 'flex-start', marginLeft: 40}}>
  28.                 <Text style={{fontSize: 24}}>18 Compositions</Text>
  29.             </View>
  30.         </View>
  31.         <View style={{flex: 4, justifyContent: 'center', alignItems: 'center'}}>
  32.             <View style={{flex: 1, margin: 40}}>
  33.                 <Image style={{width: 280, height: 280, borderRadius: 40}} source={require('Player/img/cover.jpg')}/>
  34.             </View>
  35.         </View>
  36.         <View style={{flex: 1}}>
  37.             <View style={{flex: 1, flexDirection: 'row'}}>
  38.                 <View style={{flex: 1, justifyContent: 'center', alignItems: 'space-around'}}>
  39.                     <Text style={{}}>1:25</Text>
  40.                 </View>
  41.                 <View style={{flex: 4}}>
  42.                 </View>
  43.                 <View style={{flex: 1, justifyContent: 'center'}}>
  44.                     <Text style={{}}>3:12</Text>
  45.                 </View>
  46.             </View>
  47.             <View style={{flex: 1, justifyContent: 'flex-start', alignItems: 'center'}}>
  48.                 <View style={{width: 350, height: 3, backgroundColor: 'skyblue',}}></View>
  49.             </View>
  50.         </View>
  51.         <View style={{flex: 2}}>
  52.             <View style={{flex:1, flexDirection: 'row'}}>
  53.               <View style={{flex:1, alignItems: 'flex-end', justifyContent: 'center'}}>
  54.                 <View style={{width: 70, height: 70, alignItems: 'center', justifyContent: 'center'}}>
  55.                   <Image style={{width: 30, height: 30}} source={require('Player/img/back.png')}/>
  56.                 </View>
  57.               </View>
  58.               <View style={{flex:1, alignItems: 'center', justifyContent: 'center'}}>
  59.                 <View style={{width: 70, height: 70, borderRadius: 60, alignItems: 'center', justifyContent: 'center', backgroundColor: 'skyblue'}}>
  60.                   <Image style={{width: 30, height: 30, marginLeft: 5}} source={require('Player/img/play-button.png')}/>
  61.                 </View>
  62.               </View>
  63.               <View style={{flex:1, justifyContent: 'center'}}>
  64.                 <View style={{width: 70, height: 70, alignItems: 'center', justifyContent: 'center'}}>
  65.                   <Image style={{width: 30, height: 30}} source={require('Player/img/for.png')}/>
  66.                 </View>
  67.               </View>
  68.             </View>
  69.         </View>
  70.     </SafeAreaView>
  71.     )
  72.   }
  73. };
  74.  
  75. export default Player;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top