Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Gemcookで使う ReactNativeで絶対使えるライブラリ

Avatar for Shunsuke . Shunsuke .
September 20, 2018
0
250

Gemcookで使う ReactNativeで絶対使えるライブラリ

Avatar for Shunsuke .

Shunsuke .

September 20, 2018
Tweet

More Decks by Shunsuke .

See All by Shunsuke .
環境構築なんて要らないESModulesで始めるWebComponents」
Avatar for Shunsuke . sr1994lu
0
240
Reactで状態管理とUIを作ってみよう！
Avatar for Shunsuke . sr1994lu
0
360

Featured

See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.9k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
72
4.9k
Docker and Python
Avatar for Tania Allard trallard
44
3.5k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
60k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
2.9k

Transcript

  1. GemcookͰ࢖͏ ReactNativeͰઈର࢖͑ΔϥΠϒϥϦ Osaka Mix Leap Study #23 - React Nativeษڧձ

  2. ੢໺ ॡ྄ Nishino Shunsuke גࣜձࣾGemcook

  3. ΞδΣϯμ • ϥΠϒϥϦͱ͸ • React Nativeͷ࢖͑ΔϥΠϒϥϦ • ࣗࣾOSSͷ঺հ(web)

  4. ΞδΣϯμ • ϥΠϒϥϦͱ͸ • React Nativeͷ࢖͑ΔϥΠϒϥϦ • ࣗࣾOSSͷ঺հ(web)

  5. ϥΠϒϥϦʁʁ

  6. None
  7. None

  8. ϥΠϒϥϦʁ

  9. ϥΠϒϥϦʁʁ ϥΠϒϥϦʁ

  10. None
  11. None

  12. React୯ମͰ͸Կ΋ಈ͔ͳ͍ͷͰCreate React AppΛೖΕΔɻ

  13. ىಈը໘

  14. ϥΠϒϥϦʁʁ ϥΠϒϥϦʁ

  15. None
  16. None

  17. React NativeΛೖΕΕ͹ɺͱΓ͋͑ͣಈ͘΋ͷ͕ग़དྷΔɻ

  18. ىಈը໘

  19. ๻͕ͨͪ݁ہͭͬͯ͘Δ΋ͷ͸ϥΠϒϥϦͷدͤूΊ

  20. ϥΠϒϥϦ͸૊Έ߹Θͤͯͦ͜ਅՁ͕ग़Δɻ

  21. ΞδΣϯμ • ϥΠϒϥϦͱ͸ • React Nativeͷ࢖͑ΔϥΠϒϥϦ • ࣗࣾOSSͷ঺հ(web)

  22. React NativeͷϥΠϒϥϦͷಛ௃

  23. React Nativeͷ࢖͑ΔϥΠϒϥϦ • ϧʔςΟϯά • Nativeػೳܥ • UIܥ

  24. React Nativeͷ࢖͑ΔϥΠϒϥϦ • ϧʔςΟϯά • Nativeػೳܥ • UIܥ

  25. React Navigation ӳޠ͚ͩͲެࣜυΩϡϝϯτ͕͔ͬ͠Γॻ͔Ε ͍ͯͯɺࡉ͔͍ͱ͜Ζ·Ͱ࡞ΓࠐΊΔɻ ͜ΕΛ࢖͍͜ͳͤΕ͹ා͍΋ͷͳ͠ʂʂ

  26. React Navigation StackNavigator

  27. React Navigation TabNavigator

  28. React Navigation DrawerNavigator (։ൃ్தͰ҆ఆͯ͠ͳ͍)

  29. Fluid Transitions for React Navigation React NavigationެࣜͰ΋঺հ͞ΕͨϥΠϒϥ Ϧɻ͔͍͍ͬ͘͢͜͝ԋग़΋΍Ε͹ग़དྷΔɻ

  30. react-native-router-flux ͱΓ͋͑ͣ؆୯ʹϧʔςΟϯά͍ͨ͠ͳΒ͜Ε ΋࢖͑Δɻ

  31. React Nativeͷ࢖͑ΔϥΠϒϥϦ • ϧʔςΟϯά • Nativeػೳܥ • UIܥ

  32. react-native-splash-screen ReactͷComponentDidMountͰɺεϓϥο γϡεΫϦʔϯͷ੍ޚ͕Ͱ͖·͢ɻ

  33. React Native Camera Կ΋ߟ͑ͣͱΓ͋͑ͣೖΕ͓ͯ͘ɻ ࣸਅɾಈըࡱӨΛՄೳʹ͠·͢ɻ إೝূ΍όʔίʔυεΩϟϯػೳ΋͍ͭͯΔͷ ͰɺಛʹࠔΔ͜ͱ͸͋Γ·ͤΜɻ

  34. react-native-maps propsΛྲྀ͠ࠐΉ͚ͩͰɺࣗ෼͕ࢥ͏Α͏ͳ MapΛදࣔͰ͖Δɻ

  35. react-native-maps propsΛྲྀ͠ࠐΉ͚ͩͰɺࣗ෼͕ࢥ͏Α͏ͳ MapΛදࣔͰ͖Δɻ

  36. React Nativeͷ࢖͑ΔϥΠϒϥϦ • ϧʔςΟϯά • Nativeػೳܥ • UIܥ

  37. NativeBase Webք۾ͷBootstrapɹ తͳཱͪҐஔΛ࣋ͭ React NativeͷUIίϯϙʔωϯτϥΠϒϥϦͰ ͢ɻ શ28छྨͷΧελϚΠζՄೳͳίϯϙʔωϯτ ͕͋ΔͷͰɺ࡞Γ࢝Ίʹ࠾༻͢Δͷ͕͓͢͢Ί Ͱ͢ʂ

  38. NativeBase

  39. react-native-vector-icons iOSɺAndroidͰɺͦΕͧΕͷύοέʔδϚωʔ δϟʔΛ࢖ͬͯૉࡐΛηοτΞοϓ͠·͢ɻ શ8,751ݸͷϕΫλʔΞΠίϯΛ࢖͏͜ͱ͕Ͱ͖ ΔͷͰɺཉ͍͠ૉࡐ͸͖ͬͱ͜͜ʹ͋Δʂ

  40. React Native Blur ը૾ͱ͜ͷϥΠϒϥϦΛ૊Έ߹ΘͤΕ͹ɺӈͷ ಈըͷΑ͏ͳʹ͍͍ײ͡ͷBlurʹͳͬͯ·͢ Ͷɻ

  41. react-native-lightbox ࣸਅΛ֦େදࣔ͢Δͱ͖ʹ࢖͍͍ͨϥΠϒϥϦɻ

  42. Lottie for React Native ͋Β͔͡ΊAdobe After EffectsͷϓϥάΠϯΛ ࢖ͬͯૉࡐΛ४උͯ͠ɺLottieʹಡΈࠐ·ͤ· ͢ɻ ଞʹ΋JavaScriptͰΰϦΰϦ࣮૷ͯ͠

    AnimationΛදݱ͢Δํ๏΍ɺଞϥΠϒϥϦ͕ ͋Γ·͕͢Lottie͸σβΠφʔΛ࠷େݶʹ׆͔ ͤΔϥΠϒϥϦͰ͢ɻ

  43. react-native-app-intro ΦϯϘʔσΟϯάΛߏங͢ΔϥΠϒϥϦɻ ͼͬ͘Γ͢Δ͙Β͍؆୯ʹ࢖͑·͢ɻ

  44. ΞδΣϯμ • ϥΠϒϥϦͱ͸ • React Nativeͷ࢖͑ΔϥΠϒϥϦ • ࣗࣾOSSͷ঺հ(web)

  45. ࣗࣾOSSͷ঺հ(গ͠)

  46. eslint-config-gemcook ͱΓ͋͑ͣɺESLint

  47. eslint-config-gemcook ɹ&

  48. @gemcook/table ςʔϒϧͷ࣮૷Ͱ࢖͑ͦ͏ͳϥΠϒϥϦΛ୳͠ճ͚ͬͨͲɺ ޷ΈͷσβΠϯ͕ແͯ͘࡞ͬͪΌ͍·ͨ͠ɻ

  49. @gemcook/pagination Reduxͱ૊Έ߹ΘͤΔ͜ͱͰɺϖʔδભҠͯ͠΋ϖʔδ൪߸͸ͦͷ··ɻ ύλʔϯ 1 ύλʔϯ 2

  50. ͋Γ͕ͱ͏͍͟͝·ͨ͠