์ ์ ์ ํ๋์ ๋๋ฅผ ์ํด ํ ์คํธ ์ ๋๋ฉ์ด์
์ ๋ฃ์ผ๋ ค ํ๋ค.
react native์์ ์ ๋๋ฉ์ด์
๊ตฌํ์ด ์ด๋ ต๋ค๊ณ ์๋ฌธ์ ๋ค์ด์, ํ๋๋ํ๊ณ ์์๋๋ฐ,
๊ฐ ๋์์ด๋ ๋ถ๊ป์ ์์
๋น ๋ฅด๊ฒ ํ๊ธฐ ์ํด ์ ๋๋ฉ์ด์
ํ์ผ์ lottie๋ก ๋ง๋ค์ด์ jsonํ์ผ์ ๋์ ธ ์ฃผ์
จ๋ค.
gif๋ฅผ svg๋ก ๋ง๋ ๊ฑฐ๋ผ๋.. lottie ๋ฃ๋ ๋ฒ์ด๋ผ๊ณ ์น๋ฉด ์ด๋ ต์ง ์์๊ฑฐ๋ผ๊ณ ํํธ๊น์ง ๋์ ธ์ฃผ์
์ ๊ฐ๋ฒผ์ด ๋ง์์ผ๋ก ์์
์ ์์ํด๋ณธ๋ค.
npm i --save lottie-react-native
npm i --save lottie-ios@3.1.8
cd ios
pod install
[๋ฒ์ ์ ๋ณด]
"lottie-ios": "^3.1.8",
"lottie-react-native": "^3.5.0",
return (
<>
<LottieView
source={require('../../gif/dody2.json')}
autoPlay
loop
/>
</>
);
source์ ๋ค์ด๊ฐ๋ ํ์ผ์ด lottieํ์ผ์ด์ด์ผ ํ๊ณ , https://lottiefiles.com/ ์ฌ๊ธฐ์ ๋ฌด๋ฃ ์์๋ค์ ์ฌ์ฉํด๋ณผ ์ ์๋ค. ๋๋ฌด ์ข์ ์ฌ์ดํธ๋ค.
์๋๋ก์ด๋์์๋ ์ ์๋์ด ๋๋ค.
๋ฌธ์ ๋ ios์ธ๋ฐ, gif๊ฐ ๋์ด์ง์ง ์๋๋ค.์ฐพ์๋ณด๋ ๋์ ๊ฐ์ ๋ฌธ์ ๊ฐ ๋ช๋ช ๋ณด์๋ค.
xcode๋ก runํ๋ฉด ์ ๋์จ๋ค!
์์๊ฐ์๋ค ์ง์ง ์ผ๋จ xcode๋ก runํด์ ์์
์ ํ๋ค. ์ด์ ๋ฅผ ์์๋ ๋ถ ๋๊ธ๋ก ์ข ์๋ ค์ฃผ์ธ์ฉ..
+๊ทธ๋ฌ๋ค๊ฐ ๋ช์ผ ๋ค cli๋ก runํด๋ ์ ๋๋๋ผ...... (๋๋ฅต)