[RN] 이미지의 상단 부분만 display하고 싶을 때 - how to display top of image in react native | react native object position

react native에서 긴 이미지를 보여줄 때, 썸네일 형식으로 이미지를 보여준 후 해당 이미지에 버튼 이벤트를 걸어 전체보기 화면을 구현하고 싶을 때가 있다.

 

이 경우 css에서는 object position : top 을 주면 바로 해결되지만, 안타깝게도 react native에서는 해당 기능을 지원하지 않는다.

 

이 문제를 해결하기 위해 내가 생각해낸 방법은 ScrollView의 height를 원하는 고정값으로 선언하고 그 안에 Image를 감싼 후,

scrollenabled={false} 로 스크롤을 막아내면 되지 않을까? 였다.

 

결과는 매우 성공적이었다.

 

아래는 예시 코드이다.

 

Usage

type TImageSizeProps = {
    width: number;
    height: number;
  };
 const [imgSize, setImgSize] = useState<TImageSizeProps>();
 const {width} = useWindowDimensions();


<ScrollContainer scrollEnabled={false}>
   <Btn
	onPress={onYourEvent}>
          <FastImage
            source={{
              uri: '', // your url
            }}
            style={{
              width: '100%',
              height: imgSize ? width * (imgSize?.height / imgSize?.width) : 0,
            }}
            resizeMode="stretch"
            onLoad={e => {
              const _imageSize: TImageSizeProps = {
                width: e.nativeEvent.width,
                height: e.nativeEvent.height,
              };
              setImgSize(_imageSize);
            }}
          />
   </Btn>
</ScrollContainer>

 

 

Result

 

before

 

after