[RN Library ๐Ÿ“š] react native์— lottie ๋„ฃ๊ธฐ! lottie-react-native

๋„๋””ยท2020๋…„ 11์›” 4์ผ
1

RN Library ๐Ÿ“š

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

์œ ์ €์˜ ํ–‰๋™์œ ๋„๋ฅผ ์œ„ํ•ด ํ† ์ŠคํŠธ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๋„ฃ์œผ๋ ค ํ•œ๋‹ค.
react native์—์„œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ตฌํ˜„์ด ์–ด๋ ต๋‹ค๊ณ  ์†Œ๋ฌธ์„ ๋“ค์–ด์„œ, ํ›„๋œ๋œํ•˜๊ณ  ์žˆ์—ˆ๋Š”๋ฐ,
๊ฐ“ ๋””์ž์ด๋„ˆ ๋ถ„๊ป˜์„œ ์ž‘์—… ๋น ๋ฅด๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด ์• ๋‹ˆ๋ฉ”์ด์…˜ ํŒŒ์ผ์„ lottie๋กœ ๋งŒ๋“ค์–ด์„œ jsonํŒŒ์ผ์„ ๋˜์ ธ ์ฃผ์…จ๋‹ค.
gif๋ฅผ svg๋กœ ๋งŒ๋“ ๊ฑฐ๋ผ๋‚˜.. lottie ๋„ฃ๋Š” ๋ฒ•์ด๋ผ๊ณ  ์น˜๋ฉด ์–ด๋ ต์ง€ ์•Š์„๊ฑฐ๋ผ๊ณ  ํžŒํŠธ๊นŒ์ง€ ๋˜์ ธ์ฃผ์…”์„œ ๊ฐ€๋ฒผ์šด ๋งˆ์Œ์œผ๋กœ ์ž‘์—…์„ ์‹œ์ž‘ํ•ด๋ณธ๋‹ค.

install

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",

code

return (
    <>
      <LottieView
        source={require('../../gif/dody2.json')}
        autoPlay
        loop
      />
    </>
  );

source์— ๋“ค์–ด๊ฐ€๋Š” ํŒŒ์ผ์ด lottieํŒŒ์ผ์ด์–ด์•ผ ํ•˜๊ณ , https://lottiefiles.com/ ์—ฌ๊ธฐ์„œ ๋ฌด๋ฃŒ ์˜ˆ์‹œ๋“ค์„ ์‚ฌ์šฉํ•ด๋ณผ ์ˆ˜ ์žˆ๋‹ค. ๋„ˆ๋ฌด ์ข‹์€ ์‚ฌ์ดํŠธ๋‹ค.

๊ฒฐ๊ณผ ๋ฐ ๋ฌธ์ œ

android

์•ˆ๋“œ๋กœ์ด๋“œ์—์„œ๋Š” ์ž˜ ์ž‘๋™์ด ๋œ๋‹ค.
RubberDuck

ios

๋ฌธ์ œ๋Š” ios์ธ๋ฐ, gif๊ฐ€ ๋„์–ด์ง€์ง€ ์•Š๋Š”๋‹ค.์ฐพ์•„๋ณด๋‹ˆ ๋‚˜์™€ ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ๋ช‡๋ช‡ ๋ณด์˜€๋‹ค.
RubberDuck

xcode๋กœ runํ•˜๋ฉด ์ž˜ ๋‚˜์˜จ๋‹ค!
์•Œ์ˆ˜๊ฐ€์—†๋„ค ์ง„์งœ ์ผ๋‹จ xcode๋กœ runํ•ด์„œ ์ž‘์—…์„ ํ–ˆ๋‹ค. ์ด์œ ๋ฅผ ์•„์‹œ๋Š” ๋ถ„ ๋Œ“๊ธ€๋กœ ์ข€ ์•Œ๋ ค์ฃผ์„ธ์šฉ..

+๊ทธ๋Ÿฌ๋‹ค๊ฐ€ ๋ช‡์ผ ๋’ค cli๋กœ runํ•ด๋„ ์ž˜ ๋˜๋”๋ผ...... (๋˜๋ฅต)

profile
์ถฉ์ „์ค‘..๐Ÿค”

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