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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
import React, { Component } from 'react';
import {
Image,
StyleSheet,
TouchableOpacity,
View,
Platform
} from 'react-native';
import { Link } from 'react-router-dom'
import ClearText from '../components/text'
import FadeInView from 'react-native-fade-in-view'
const sections = [
'/timeline',
'/drones',
'/livestream',
'/information',
'/contact'
]
const labels = [
'SURVEILLANCE',
'MILITARY DRONE STATISTICS',
'LIVESTREAM',
'ABOUT THIS WORK',
'CONTACT',
]
const images = [
require('../../img/nav/home/timeline.png'),
require('../../img/nav/home/drones.png'),
require('../../img/nav/home/livestream.png'),
require('../../img/nav/home/information.png'),
require('../../img/nav/home/contact.png'),
]
export default class Home extends Component {
constructor() {
super()
}
render() {
const links = sections.map((path, i) => {
const image = images[i]
const label = labels[i]
return view(path, image, label)
})
if (navigator.userAgent.match('Firefox')) {
return (
<View style={styles.container}>
{links}
</View>
)
}
else {
return (
<FadeInView duration={500} style={styles.container}>
{links}
</FadeInView>
)
}
}
}
function view (path, image, label, isSelected) {
let key = ('home_' + path).replace('/','')
let imageKey = 'image_' + key + String(isSelected)
return (
<Link to={path} key={key}>
<View style={styles.navItem}>
<Image key={imageKey} style={styles.image} source={image} />
<ClearText style={styles.text}>{label}</ClearText>
</View>
</Link>
)
}
const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
const isIpad = (navigator.userAgent.match(/iPad/i))
const isAndroid = (navigator.userAgent.match(/Android/i))
const isMobile = isIphone || isIpad || isAndroid
const isDesktop = ! isMobile
const shortHeight = isIphone || window.innerHeight < 700
const buttonSide = shortHeight ? 50 : 70
const buttonMargin = shortHeight ? 5 : 10
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: -80
},
navItem: {
justifyContent: 'center',
alignItems: 'center',
minHeight: shortHeight ? '10vh' : '13vh',
},
text: {
lineHeight: 16,
marginBottom: shortHeight ? 5 : 10,
},
image: {
width: buttonSide,
height: buttonSide,
margin: buttonMargin,
}
})
|
