[RN Library ๐Ÿ“š] react-native-fast-image ์ด๋ฏธ์ง€ placeholder์„ธํŒ…ํ•˜๊ธฐ

๋„๋””ยท2020๋…„ 11์›” 5์ผ
2

RN Library ๐Ÿ“š

๋ชฉ๋ก ๋ณด๊ธฐ
5/12

์šฐ๋ฆฌ ํšŒ์‚ฌ์˜ ์•ฑ์€ ์ด๋ฏธ์ง€๊ฐ€ ๋งŽ์ด ๋ณด์ด๋Š” ํŽธ์ด๋‹ค.
๋ฆฌ์ŠคํŠธ ํŽ˜์ด์ง€์™€ ๋””ํ…Œ์ผ ํŽ˜์ด์ง€์—์„œ ์ด๋ฏธ์ง€๊ฐ€ ์ž”๋œฉ ๋ณด์ธ๋‹ค.
๊ทผ๋ฐ react native ์ผ๋ฐ˜ Image ์ปดํฌ๋„ŒํŠธ๋Š” ๋ Œ๋”ฉ์ด ์กฐ๊ธˆ ๋Š๋ฆฌ๋‹ค.
๋น ๋ฅธ ์ด๋ฏธ์ง€ ๋ Œ๋”๋ฅผ ์œ„ํ•ด react-native-fast-image ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด๋ณด์•˜๋‹ค.

reac-native-fast-image ๊นƒํ—™ ๋ฐ”๋กœ๊ฐ€๊ธฐ

yarn add react-native-fast-image
cd ios
pod install

๊ธฐ๋ณธ ์‚ฌ์šฉ๋ฒ•

import FastImage from 'react-native-fast-image'

const YourImage = () => (
    <FastImage
        style={{ width: 200, height: 200 }}
        source={{uri: 'https://unsplash.it/400/400?image=1'}}
    />
)

placeholder ์„ธํŒ…ํ•˜๊ธฐ

image placeholder๋ž€ ์ด๋ฏธ์ง€๊ฐ€ ์™„์ „ํžˆ ๋ Œ๋” ๋˜๊ธฐ ์ „๊นŒ์ง€ ๋ณด์ด๋Š” ํ™”๋ฉด์„ ๋งํ•œ๋‹ค.

import react, {useState} from 'react';
import FastImage from 'react-native-fast-image';

funtion ImgPlaceHolder(){
	const [imgLoad, setImgLoad] = useState(false);
    
	render(
		{!imgLoad && (
			<FastImage
				style={{ width: 200, height: 200 }}
				source={{uri: placeholder ์ด๋ฏธ์ง€}}
			/>
		)}
		<FastImage
			style={[{ width: 200, height: 200 }, imgLoad ? {} : {width: 0}]}
			source={{uri: ๋ณด์—ฌ์•ผ ํ•˜๋Š” ์ด๋ฏธ์ง€}}
			onLoadEnd={() => setImgLoad(true)}
		/>
    )
}
profile
์ถฉ์ „์ค‘..๐Ÿค”

0๊ฐœ์˜ ๋Œ“๊ธ€