์ฐ๋ฆฌ ํ์ฌ์ ์ฑ์ ์ด๋ฏธ์ง๊ฐ ๋ง์ด ๋ณด์ด๋ ํธ์ด๋ค.
๋ฆฌ์คํธ ํ์ด์ง์ ๋ํ
์ผ ํ์ด์ง์์ ์ด๋ฏธ์ง๊ฐ ์๋ฉ ๋ณด์ธ๋ค.
๊ทผ๋ฐ 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'}}
/>
)
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)}
/>
)
}