Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Gemcookで使う ReactNativeで絶対使えるライブラリ
Search
Shunsuke .
September 20, 2018
0
250
Gemcookで使う ReactNativeで絶対使えるライブラリ
Shunsuke .
September 20, 2018
Tweet
Share
More Decks by Shunsuke .
See All by Shunsuke .
環境構築なんて要らないESModulesで始めるWebComponents」
sr1994lu
0
240
Reactで状態管理とUIを作ってみよう!
sr1994lu
0
360
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Documentation Writing (for coders)
carmenintech
72
4.9k
Docker and Python
trallard
44
3.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Cult of Friendly URLs
andyhume
79
6.5k
Statistics for Hackers
jakevdp
799
220k
Typedesign – Prime Four
hannesfritz
42
2.7k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Transcript
GemcookͰ͏ ReactNativeͰઈର͑ΔϥΠϒϥϦ Osaka Mix Leap Study #23 - React Nativeษڧձ
ॡ྄ Nishino Shunsuke גࣜձࣾGemcook
ΞδΣϯμ • ϥΠϒϥϦͱ • React Nativeͷ͑ΔϥΠϒϥϦ • ࣗࣾOSSͷհ(web)
ΞδΣϯμ • ϥΠϒϥϦͱ • React Nativeͷ͑ΔϥΠϒϥϦ • ࣗࣾOSSͷհ(web)
ϥΠϒϥϦʁʁ
None
None
ϥΠϒϥϦʁ
ϥΠϒϥϦʁʁ ϥΠϒϥϦʁ
None
None
React୯ମͰԿಈ͔ͳ͍ͷͰCreate React AppΛೖΕΔɻ
ىಈը໘
ϥΠϒϥϦʁʁ ϥΠϒϥϦʁ
None
None
React NativeΛೖΕΕɺͱΓ͋͑ͣಈ͘ͷ͕ग़དྷΔɻ
ىಈը໘
͕ͨͪ݁ہͭͬͯ͘ΔͷϥΠϒϥϦͷدͤूΊ
ϥΠϒϥϦΈ߹Θͤͯͦ͜ਅՁ͕ग़Δɻ
ΞδΣϯμ • ϥΠϒϥϦͱ • React Nativeͷ͑ΔϥΠϒϥϦ • ࣗࣾOSSͷհ(web)
React NativeͷϥΠϒϥϦͷಛ
React Nativeͷ͑ΔϥΠϒϥϦ • ϧʔςΟϯά • Nativeػೳܥ • UIܥ
React Nativeͷ͑ΔϥΠϒϥϦ • ϧʔςΟϯά • Nativeػೳܥ • UIܥ
React Navigation ӳޠ͚ͩͲެࣜυΩϡϝϯτ͕͔ͬ͠Γॻ͔Ε ͍ͯͯɺࡉ͔͍ͱ͜Ζ·Ͱ࡞ΓࠐΊΔɻ ͜ΕΛ͍͜ͳͤΕා͍ͷͳ͠ʂʂ
React Navigation StackNavigator
React Navigation TabNavigator
React Navigation DrawerNavigator (։ൃ్தͰ҆ఆͯ͠ͳ͍)
Fluid Transitions for React Navigation React NavigationެࣜͰհ͞ΕͨϥΠϒϥ Ϧɻ͔͍͍ͬ͘͢͜͝ԋग़Εग़དྷΔɻ
react-native-router-flux ͱΓ͋͑ͣ؆୯ʹϧʔςΟϯά͍ͨ͠ͳΒ͜Ε ͑Δɻ
React Nativeͷ͑ΔϥΠϒϥϦ • ϧʔςΟϯά • Nativeػೳܥ • UIܥ
react-native-splash-screen ReactͷComponentDidMountͰɺεϓϥο γϡεΫϦʔϯͷ੍ޚ͕Ͱ͖·͢ɻ
React Native Camera Կߟ͑ͣͱΓ͋͑ͣೖΕ͓ͯ͘ɻ ࣸਅɾಈըࡱӨΛՄೳʹ͠·͢ɻ إೝূόʔίʔυεΩϟϯػೳ͍ͭͯΔͷ ͰɺಛʹࠔΔ͜ͱ͋Γ·ͤΜɻ
react-native-maps propsΛྲྀ͠ࠐΉ͚ͩͰɺ͕ࣗࢥ͏Α͏ͳ MapΛදࣔͰ͖Δɻ
react-native-maps propsΛྲྀ͠ࠐΉ͚ͩͰɺ͕ࣗࢥ͏Α͏ͳ MapΛදࣔͰ͖Δɻ
React Nativeͷ͑ΔϥΠϒϥϦ • ϧʔςΟϯά • Nativeػೳܥ • UIܥ
NativeBase Webք۾ͷBootstrapɹ తͳཱͪҐஔΛ࣋ͭ React NativeͷUIίϯϙʔωϯτϥΠϒϥϦͰ ͢ɻ શ28छྨͷΧελϚΠζՄೳͳίϯϙʔωϯτ ͕͋ΔͷͰɺ࡞Γ࢝Ίʹ࠾༻͢Δͷ͕͓͢͢Ί Ͱ͢ʂ
NativeBase
react-native-vector-icons iOSɺAndroidͰɺͦΕͧΕͷύοέʔδϚωʔ δϟʔΛͬͯૉࡐΛηοτΞοϓ͠·͢ɻ શ8,751ݸͷϕΫλʔΞΠίϯΛ͏͜ͱ͕Ͱ͖ ΔͷͰɺཉ͍͠ૉࡐ͖ͬͱ͜͜ʹ͋Δʂ
React Native Blur ը૾ͱ͜ͷϥΠϒϥϦΛΈ߹ΘͤΕɺӈͷ ಈըͷΑ͏ͳʹ͍͍ײ͡ͷBlurʹͳͬͯ·͢ Ͷɻ
react-native-lightbox ࣸਅΛ֦େදࣔ͢Δͱ͖ʹ͍͍ͨϥΠϒϥϦɻ
Lottie for React Native ͋Β͔͡ΊAdobe After EffectsͷϓϥάΠϯΛ ͬͯૉࡐΛ४උͯ͠ɺLottieʹಡΈࠐ·ͤ· ͢ɻ ଞʹJavaScriptͰΰϦΰϦ࣮ͯ͠
AnimationΛදݱ͢Δํ๏ɺଞϥΠϒϥϦ͕ ͋Γ·͕͢LottieσβΠφʔΛ࠷େݶʹ׆͔ ͤΔϥΠϒϥϦͰ͢ɻ
react-native-app-intro ΦϯϘʔσΟϯάΛߏங͢ΔϥΠϒϥϦɻ ͼͬ͘Γ͢Δ͙Β͍؆୯ʹ͑·͢ɻ
ΞδΣϯμ • ϥΠϒϥϦͱ • React Nativeͷ͑ΔϥΠϒϥϦ • ࣗࣾOSSͷհ(web)
ࣗࣾOSSͷհ(গ͠)
eslint-config-gemcook ͱΓ͋͑ͣɺESLint
eslint-config-gemcook ɹ&
@gemcook/table ςʔϒϧͷ࣮Ͱ͑ͦ͏ͳϥΠϒϥϦΛ୳͠ճ͚ͬͨͲɺ ΈͷσβΠϯ͕ແͯ͘࡞ͬͪΌ͍·ͨ͠ɻ
@gemcook/pagination ReduxͱΈ߹ΘͤΔ͜ͱͰɺϖʔδભҠͯ͠ϖʔδ൪߸ͦͷ··ɻ ύλʔϯ 1 ύλʔϯ 2
͋Γ͕ͱ͏͍͟͝·ͨ͠