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