-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathBandDetailsScreen.js
77 lines (70 loc) · 2.38 KB
/
BandDetailsScreen.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import React from 'react';
import { View, Text, Image } from 'react-native';
import { Container, Header, Title, Content, Button, Left, Right, Body, Icon, Item, Input, List, ListItem, Thumbnail} from 'native-base';
import styles from './Styles';
class BandDetailsScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({
title: `${navigation.state.params.band.name}`,
modal: true,
headerTitleStyle : {
textAlign: 'center'
},
headerStyle: {
height: 85
}
});
constructor(props) {
super(props);
const b = this.props.navigation.state.params.band;
const labels = this.buildLabels();
this.state = {
band: b,
bandInfo : this.buildBandInfo(b, labels)
};
}
buildLabels(){
let labels = {};
labels["trans"] = {
"active":"Status",
"yearActive":"Year active",
"genre":"Genre",
"country":"Country",
"location":"Location",
"formedIn":"Formation date",
"lyricsTheme":"Lyrics theme"
};
labels["order"] = ["genre", "active","country","location","formedIn","yearActive","lyricsTheme"];
return labels;
}
buildBandInfo(band, labels){
let data = [];
labels.order.forEach((key)=>{
let row = {};
row.label = labels.trans[key];
row.val = band[key];
data.push(row);
});
return data;
}
render(){
return (
<Container>
<Content>
<Image resizeMode={'contain'} style={{width: 250, height: 150}} source={{uri: this.state.band.logo}}/>
<List dataArray={this.state.bandInfo}
renderRow={(rowData) =>
<ListItem>
<Left><Text>{rowData.label}</Text></Left>
<Body>
<Text>{rowData.val}</Text>
</Body>
</ListItem>
}>
</List>
<Image resizeMode={'contain'} style={{width: 300, height:200}} source={{uri: this.state.band.photo}}/>
</Content>
</Container>
);
}
};
export default BandDetailsScreen;