Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, {Component} from 'react';
- import {
- SafeAreaView,
- ScrollView,
- Text,
- View,
- Image,
- } from 'react-native';
- class Player extends Component {
- render() {
- return (
- <SafeAreaView style={{flex: 1}}>
- <View style={{flex: 1, flexDirection: 'row'}}>
- <View style={{flex:1, alignItems: 'flex-end', justifyContent: 'center', margin: 10}}>
- <Image style={{width: 15, height: 15}} source={require('Player/img/musical-note.png')}/>
- </View>
- <View style={{flex: 8, justifyContent: 'center'}}>
- <Text style={{}}>NOW PLAYING</Text>
- </View>
- </View>
- <View style={{flex: 1}}>
- <View style={{flex: 1, justifyContent: 'flex-end', marginLeft: 40}}>
- <Text style={{fontSize: 32}}>Best Artist</Text>
- </View>
- <View style={{flex: 1, justifyContent: 'flex-start', marginLeft: 40}}>
- <Text style={{fontSize: 24}}>18 Compositions</Text>
- </View>
- </View>
- <View style={{flex: 4, justifyContent: 'center', alignItems: 'center'}}>
- <View style={{flex: 1, margin: 40}}>
- <Image style={{width: 280, height: 280, borderRadius: 40}} source={require('Player/img/cover.jpg')}/>
- </View>
- </View>
- <View style={{flex: 1}}>
- <View style={{flex: 1, flexDirection: 'row'}}>
- <View style={{flex: 1, justifyContent: 'center', alignItems: 'space-around'}}>
- <Text style={{}}>1:25</Text>
- </View>
- <View style={{flex: 4}}>
- </View>
- <View style={{flex: 1, justifyContent: 'center'}}>
- <Text style={{}}>3:12</Text>
- </View>
- </View>
- <View style={{flex: 1, justifyContent: 'flex-start', alignItems: 'center'}}>
- <View style={{width: 350, height: 3, backgroundColor: 'skyblue',}}></View>
- </View>
- </View>
- <View style={{flex: 2}}>
- <View style={{flex:1, flexDirection: 'row'}}>
- <View style={{flex:1, alignItems: 'flex-end', justifyContent: 'center'}}>
- <View style={{width: 70, height: 70, alignItems: 'center', justifyContent: 'center'}}>
- <Image style={{width: 30, height: 30}} source={require('Player/img/back.png')}/>
- </View>
- </View>
- <View style={{flex:1, alignItems: 'center', justifyContent: 'center'}}>
- <View style={{width: 70, height: 70, borderRadius: 60, alignItems: 'center', justifyContent: 'center', backgroundColor: 'skyblue'}}>
- <Image style={{width: 30, height: 30, marginLeft: 5}} source={require('Player/img/play-button.png')}/>
- </View>
- </View>
- <View style={{flex:1, justifyContent: 'center'}}>
- <View style={{width: 70, height: 70, alignItems: 'center', justifyContent: 'center'}}>
- <Image style={{width: 30, height: 30}} source={require('Player/img/for.png')}/>
- </View>
- </View>
- </View>
- </View>
- </SafeAreaView>
- )
- }
- };
- export default Player;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement