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
250
Reactで状態管理とUIを作ってみよう！
Avatar for Shunsuke . sr1994lu
0
360

Featured

See All Featured
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
120
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
74
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
115
100k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
120
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
530
New Earth Scene 8
Avatar for Sydney Stone popppiees
0
1.3k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
0
83
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.5k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.9k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
420

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠