ImageView.js
1.87 KB
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
import React from "react"
import {
View,
StyleSheet,
Text,
Image,
TouchableOpacity,
TouchableWithoutFeedback,
ScrollView,
Dimensions
} from "react-native"
import {observer} from 'mobx-react/native'
import {observable} from 'mobx'
import ImageZoom from 'react-native-image-pan-zoom';
import Swiper from 'react-native-swiper'
const width = Dimensions.get('window').width
const height = Dimensions.get("window").height
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'black'
},
img: {
height: width,
width,
},
text: {
fontSize: 14,
color: "white",
position: "absolute",
bottom: 30,
width: width,
textAlign: 'center',
},
backImgView: {
position: 'absolute',
left: 15,
top: 20,
width:40,
height:40,
},
backImg: {
height: 25,
width: 25,
}
})
@observer
export default class ImageView extends React.Component {
@observable
active = 1
item = (v, i) => {
return (
<ImageZoom cropWidth={width}
cropHeight={height}
imageWidth={width}
imageHeight={width}
key={i}
>
<Image style={styles.img} source={{uri:v}} resizeMode={"contain"}/>
</ImageZoom>
)
}
componentWillMount(){
this.active=this.props.navigation.state.params.index
}
render() {
const {img} = this.props.navigation.state.params
return (
<View style={styles.container}>
<Swiper
width={width}
height={height}
loop={false}
index={this.active - 1}
onIndexChanged={v => this.active = v + 1}
dot={<View/>} activeDot={<View/>}
>
{img.map(this.item)}
</Swiper>
<Text style={styles.text}>{this.active + "/" + img.length}</Text>
<TouchableOpacity style={styles.backImgView} onPress={()=>this.props.navigation.goBack()}>
<Image source={require("./imgs/left.png")} resizeMode={"contain"} style={styles.backImg}/>
</TouchableOpacity>
</View>
)
}
}