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
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.3k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Docker and Python
Avatar for Tania Allard trallard
44
3.5k
Side Projects
Avatar for Sacha Greif sachag
455
42k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
740
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
48
2.9k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.7k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
72
4.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. ͋Γ͕ͱ͏͍͟͝·ͨ͠