132 lines
3.0 KiB
JavaScript
132 lines
3.0 KiB
JavaScript
import React, { Component } from 'react'
|
|
import {
|
|
Text,
|
|
View,
|
|
Image,
|
|
TouchableOpacity,
|
|
TouchableWithoutFeedback,
|
|
Dimensions
|
|
} from 'react-native'
|
|
import Swiper from 'react-native-swiper'
|
|
import PhotoView from 'react-native-photo-view'
|
|
const { width, height } = Dimensions.get('window')
|
|
|
|
var styles = {
|
|
wrapper: {
|
|
backgroundColor: '#000',
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0
|
|
},
|
|
slide: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center'
|
|
},
|
|
photo: {
|
|
width,
|
|
height,
|
|
flex: 1
|
|
},
|
|
text: {
|
|
color: '#fff',
|
|
fontSize: 30,
|
|
fontWeight: 'bold'
|
|
},
|
|
thumbWrap: {
|
|
marginTop: 100,
|
|
borderWidth: 5,
|
|
borderColor: '#000',
|
|
flexDirection: 'row'
|
|
},
|
|
thumb: {
|
|
width: 50,
|
|
height: 50
|
|
}
|
|
}
|
|
|
|
const renderPagination = (index, total, context) => {
|
|
return (
|
|
<View style={{
|
|
position: 'absolute',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
top: 25,
|
|
left: 0,
|
|
right: 0
|
|
}}>
|
|
<View style={{
|
|
borderRadius: 7,
|
|
backgroundColor: 'rgba(255,255,255,.15)',
|
|
padding: 3,
|
|
paddingHorizontal: 7
|
|
}}>
|
|
<Text style={{
|
|
color: '#fff',
|
|
fontSize: 14
|
|
}}>{index + 1} / {total}</Text>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const Viewer = props => <Swiper index={props.index} style={styles.wrapper} renderPagination={renderPagination}>
|
|
{
|
|
props.imgList.map((item, i) => <View key={i} style={styles.slide}>
|
|
<TouchableWithoutFeedback onPress={e => props.pressHandle()}>
|
|
<PhotoView
|
|
source={{uri: item}}
|
|
resizeMode='contain'
|
|
minimumZoomScale={0.5}
|
|
maximumZoomScale={3}
|
|
androidScaleType='center'
|
|
style={styles.photo} />
|
|
</TouchableWithoutFeedback>
|
|
</View>)
|
|
}
|
|
</Swiper>
|
|
|
|
export default class extends Component {
|
|
constructor (props) {
|
|
super(props)
|
|
this.state = {
|
|
imgList: [
|
|
'https://avatars3.githubusercontent.com/u/533360?v=3&s=466',
|
|
'https://assets-cdn.github.com/images/modules/site/business-hero.jpg',
|
|
'https://placeholdit.imgix.net/~text?txtsize=29&txt=350%C3%971150&w=350&h=1150'
|
|
],
|
|
showViewer: true,
|
|
showIndex: 0
|
|
}
|
|
this.viewerPressHandle = this.viewerPressHandle.bind(this)
|
|
this.thumbPressHandle = this.thumbPressHandle.bind(this)
|
|
}
|
|
viewerPressHandle () {
|
|
this.setState({
|
|
showViewer: false
|
|
})
|
|
}
|
|
thumbPressHandle (i) {
|
|
this.setState({
|
|
showIndex: i,
|
|
showViewer: true
|
|
})
|
|
}
|
|
render () {
|
|
return (<View style={{position: 'relative'}}>
|
|
{this.state.showViewer && <Viewer
|
|
index={this.state.showIndex}
|
|
pressHandle={this.viewerPressHandle}
|
|
imgList={this.state.imgList} />}
|
|
<View style={styles.thumbWrap}>
|
|
{
|
|
this.state.imgList.map((item, i) => <TouchableOpacity key={i} onPress={e => this.thumbPressHandle(i)}>
|
|
<Image style={styles.thumb} source={{uri: item}} />
|
|
</TouchableOpacity>)
|
|
}
|
|
</View>
|
|
</View>)
|
|
}
|
|
}
|