1 |
|
2 | import React, {
|
3 | Component, PropTypes,
|
4 | } from 'react';
|
5 |
|
6 | import {
|
7 | Text, TouchableWithoutFeedback, View,
|
8 | } from 'react-native';
|
9 |
|
10 | import ReactNativeImageGallery from './react-native-image-gallery';
|
11 |
|
12 | class Gallery extends Component {
|
13 | static defaultProps = {
|
14 | images: [],
|
15 | }
|
16 |
|
17 | static propTypes = {
|
18 | images: PropTypes.array,
|
19 | }
|
20 |
|
21 | set state(state) {
|
22 | if (state) {
|
23 | Object.keys(state).forEach((key) => {
|
24 | this[key] = state[key];
|
25 | });
|
26 | }
|
27 | }
|
28 |
|
29 | get images() {
|
30 | return this.props.images.map(image => ({ source: image }));
|
31 | }
|
32 |
|
33 | visible = false;
|
34 |
|
35 | show = () => {
|
36 | this.setState({
|
37 | visible: true,
|
38 | });
|
39 | }
|
40 |
|
41 | hide = () => {
|
42 | this.setState({
|
43 | visible: false,
|
44 | });
|
45 | }
|
46 |
|
47 | render() {
|
48 | const { visible, images, props, hide } = this;
|
49 | const { onSuccess, onCancel } = props;
|
50 | return visible && (
|
51 | <View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, backgroundColor: '#000' }}>
|
52 | <ReactNativeImageGallery
|
53 | images={images}
|
54 | />
|
55 | <TouchableWithoutFeedback onPress={onCancel || hide}>
|
56 | <View style={{ position: 'absolute', bottom: 10, left: 10, backgroundColor: 'rgba(0,0,0,.5)', padding: 4 }}>
|
57 | <Text style={{ color: '#fff' }}>取消</Text>
|
58 | </View>
|
59 | </TouchableWithoutFeedback>
|
60 | <TouchableWithoutFeedback onPress={onSuccess}>
|
61 | <View style={{ position: 'absolute', right: 10, bottom: 10, backgroundColor: 'rgba(0,0,0,.5)', padding: 4 }}>
|
62 | <Text style={{ color: '#fff' }}>保存</Text>
|
63 | </View>
|
64 | </TouchableWithoutFeedback>
|
65 | </View>
|
66 | );
|
67 | }
|
68 | }
|
69 |
|
70 | export default Gallery;
|