Appearance
fetchAlbumPhotos
사용자의 앨범에서 사진 목록을 불러오는 함수예요. 최대 개수와 해상도를 설정할 수 있고 갤러리 미리보기, 이미지 선택 기능 등에 활용할 수 있어요.
시그니처
typescript
function fetchAlbumPhotos(options: FetchAlbumPhotosOptions): Promise<ImageResponse[]>;
파라미터
- options필수
조회 옵션을 담은 객체예요.
- options.maxCountnumber · 10
가져올 사진의 최대 개수를 설정해요. 숫자로 입력하며 기본값은 10이에요.
- options.maxWidthnumber · 1024
사진의 최대 폭을 제한해요. 단위는 픽셀이며 기본값은
1024
이에요. - options.base64boolean · false
이미지를 base64 형식으로 반환할지 설정해요. 기본값은
false
예요.
- options.maxCountnumber · 10
반환 값
- Promise<ImageResponse[]>
앨범 사진의 고유 ID와 데이터 URI를 포함한 배열을 반환해요.
예제
사진의 최대 폭을 360px로 제한하여 가져오기
tsx
import React, { useState } from 'react';
import { View, Image, Button } from 'react-native';
import { fetchAlbumPhotos } from '@apps-in-toss/framework';
const base64 = true;
// 앨범 사진 목록을 가져와 화면에 표시하는 컴포넌트
function AlbumPhotoList() {
const [albumPhotos, setAlbumPhotos] = useState([]);
const handlePress = async () => {
try {
const response = await fetchAlbumPhotos({
base64,
maxWidth: 360,
});
setAlbumPhotos((prev) => ([...prev, ...response]));
} catch (error) {
console.error('앨범을 가져오는 데 실패했어요:', error);
}
};
return (
<View>
{albumPhotos.map((image) => {
// base64 형식으로 반환된 이미지를 표시하려면 데이터 URL 스키마 Prefix를 붙여야해요.
const imageUri = base64 ? 'data:image/jpeg;base64,' + image.dataUri : image.dataUri;
return <Image source={{ uri: imageUri }} key={image.id} />;
})}
<Button title="앨범 가져오기" onPress={handlePress} />
</View>
);
}