[RN] 갤러리 커스텀

리액트 네이티브에서 갤러리에 접근할 때, 

모달창으로 띄워 커스텀하기 위해 react-native-cameraroll 라이브러리를 사용했다.

https://github.com/react-native-cameraroll/react-native-cameraroll

 

위 라이브러리에서 CameraRoll.getPhotos 메서드를 사용하면

갤러리 이미지 정보를 가져올 수 있다.

const {edges, page_info} = await CameraRoll.getPhotos({
  first: 21,
  after: nextCursor,
  assetType: 'Photos',
});

first 파라미터는 처음 가져올 이미지 정보 개수이고,

after은 스크롤 시 다음 이미지 정보를 가져오기 위해 사용하였다.

그리고 사진만 가져오기 위해 assetType은 Photos로 설정해 주었다.

그 외에도 다양한 파라미터가 존재하는데 이것은 위 깃허브에 들어가면 자세히 나온다.

 

getPhotos 메서드의 반환값으로는 사진 정보가 들어있는 edges,

스크롤하여 다음 사진 정보를 가져오는데 필요한 page_info 등이 있다.

 

아래는 사진 정보를 가져오는 코드이다.

setGalleryList를 사용하여 사진 정보들을 담아주었다.

사진 정보가 담겨있는 galleryList를 FlatList로 보여주었다.

onEndReached를 사용해 스크롤이 바닥에 닿으면

다음 이미지 정보들을 가져오는 함수를 실행해 주었다.

<FlatList
  key="gallery_item"
  data={galleryList}
  keyExtractor={(index: number) => index.toString()}
  onEndReachedThreshold={0.7}
  numColumns={3}
  nestedScrollEnabled
  onEndReached={() => {
    loadNextPagePictures();
  }}
  renderItem={({item}) => {
    const clicked = selected.includes(item);
    return (
    	<Pressable onPress={() => selectedPhoto(item)}>
          <Image source={{uri: item.node.image.uri}} style={imgCustom(clicked).img}/>
        </Pressable>
    );
  }}
/>

 

+) react-native-community/camera-roll 버전이 업데이트 되었다.

https://github.com/react-native-cameraroll/react-native-cameraroll