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
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
353
21k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.5k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
Scaling GitHub
Avatar for Zach Holman holman
463
140k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.9k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
Visualization
Avatar for Eitan Lees eitanlees
149
16k

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