SelectPhoto.js
4.62 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import React, {useEffect, useState} from 'react';
import * as MediaLibrary from 'expo-media-library';
import * as Permission from 'expo-permissions';
import {Image, ImageBackground, ScrollView, View, Text, TouchableOpacity} from "react-native";
import {useNavigation} from '@react-navigation/native';
import LoadingComponent from "../components/LoadingComponent";
import screen from '../constants/layout';
import {UploadPhoto} from './UploadPhoto';
const SelectPhoto = (props) => {
const navigation = useNavigation();
const [loading, setLoading] = useState(false);
const [hasPermission, setHasPermission] = useState(true);
const [selectedPhoto, setSelectedPhoto] = useState([]);
const [allPhotos, setAllPhotos] = useState([]);
const getPhotos = async () => {
try {
const {assets} = await MediaLibrary.getAssetsAsync();
const [firstPhoto] = assets;
setSelectedPhoto([firstPhoto]);
setAllPhotos(assets);
} catch (e) {
console.error(e)
} finally {
setLoading(false);
}
};
const askPermission = async () => {
try {
setLoading(true);
const {status} = await Permission.askAsync(Permission.CAMERA_ROLL);
console.log(status);
if (status === 'granted') {
setHasPermission(true);
await getPhotos();
}
} catch (e) {
console.error(e);
setHasPermission(false);
}
};
const changeSelectedPhoto = (photo) => {
setSelectedPhoto([photo]);
};
const uploadPhoto = () => {
navigation.navigate('UploadPhoto', {photos: selectedPhoto})
};
useEffect(() => {
askPermission();
return () => {
setLoading(true);
setHasPermission(false);
setSelectedPhoto([]);
setAllPhotos([]);
}
}, []);
return (
<View>
{loading
?
<LoadingComponent/>
:
hasPermission
?
selectedPhoto[0]
?
<>
<ImageBackground
style={{width: screen.width, height: screen.height / 2}}
source={{uri: selectedPhoto[0].uri}}
>
<TouchableOpacity
style={{
justifyContent: 'center',
alignItems: 'center',
}}
key={selectedPhoto.id}
onPress={uploadPhoto}
>
<Text>선택</Text>
</TouchableOpacity>
</ImageBackground>
<ScrollView>
<>
<ScrollView horizontal contentContainerStyle={{flexDirection: 'row'}}>
{allPhotos.map(photo => {
return (
<TouchableOpacity
key={photo.id}
onPress={() => changeSelectedPhoto(photo)}>
<Image
source={{uri: photo.uri}}
style={{
width: screen.width / 3,
height: screen.height / 4,
opacity: photo.id === selectedPhoto[0].id ? 0.6 : 1
}}/>
</TouchableOpacity>
)
}
)}
</ScrollView>
</>
</ScrollView>
</>
:
null
:
<Text>사용자 권한이 없습니다</Text>
}
</View>
)
};
export default SelectPhoto;