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

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

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

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
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.3k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
200
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
1.9k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k
Design in an AI World
Avatar for tapps tapps
0
170
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
200
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.8k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
640
How to make the Groovebox
Avatar for あそなす asonas
2
2k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
220
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k

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