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
React Native のすゝめ Tipsまよゐみち
Search
@YutamaKotaro
June 10, 2016
Technology
2
660
React Native のすゝめ Tipsまよゐみち
React Native meetup#2 LTです!
ご指摘をいただき修正いたしました!
@YutamaKotaro
June 10, 2016
Tweet
Share
More Decks by @YutamaKotaro
See All by @YutamaKotaro
0->1 現場におけるReactNative
yutamakotaro
0
210
ライブラリはしご酒
yutamakotaro
0
160
React + Valtio
yutamakotaro
0
120
My experience for 3 years with React Native
yutamakotaro
0
51
React Nativeと共に歩んだ3年間【TECH STAND #3】
yutamakotaro
1
1.3k
React Native Game Engine in React Native Tech Blog Event
yutamakotaro
1
1.8k
React Native Book
yutamakotaro
0
63
AWS Summit2019 airCloset section
yutamakotaro
1
210
フルJSアーキテクトで作るエアークローゼット
yutamakotaro
2
580
Other Decks in Technology
See All in Technology
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
120
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
800
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
290
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
6.2k
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
150
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
3
11k
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
6
4k
Lazy application authentication with Tailscale
bluehatbrit
0
160
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
330
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
260
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
120
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
150
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
810
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
260
Visualization
eitanlees
146
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Rails Girls Zürich Keynote
gr2m
94
14k
Automating Front-end Workflow
addyosmani
1370
200k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Facilitating Awesome Meetings
lara
54
6.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
52k
Transcript
React Nativeͷ͢ʍΊ Tips·ΑΙΈͪ ˏYutamaKotaro
ABOUT ME @YutamaKotaro ▸ ໊ݹग़ͷͬΆ͜;ΖΜͱ͑Μ Ͳ͑Μ͡ʹ͋ʢ͍̎̒͞ʣ ▸ Webྺɿ̍ͪΐͬͱ ▸ ࣾձਓྺɿ2(3ಥೖɾɾɾ)
▸ React & ReduxΛͬͨ։ൃΛߦͬ ͍ͯ·͢ʢ᛭ୖຏֶश͠ͳ͕ Βɾɾɾʣ
React Native bring me events React Native Λ࢝Ίͯىͬͨ͜͜ͱɾɾɾɾʂ ▸ pureͳίϯϙʔωϯτ༷Ͱͭ·͖ͮ·ͨ͠ɻ
▸ ਖ਼ɺݸਓతʹެࣜυΩϡϝϯτ͕ݟͮΒ͍ɾɾɾɾͲ͏͍͍͔͔ͯ͠Βͳ͍ͳΓʹؤுͬ ͯΈ·ͨ͠ɻ ▸ ຊpureͳίϯϙʔωϯτΛ͍ͬͯͯ٧·ͬͨ͜ͱͱʹ͍ͭͯհ͠ ͍ͨͱࢥ͍·͢ʂ ▸ ͓ৄ͍͠ํଞʹ͍͍Γํ͕͋Εڭ͍͚͑ͯͨͩ·͢ͱ͍Ͱ͢ɻ
RECOMMEND REACT NATIVE React Native ͷ͢ʍΊ ▸ ϑϩϯτΤϯυΤϯδχΞ(Reacter) ͳΒ͔͚ͯ͠·͏ ▸
ϋΠϒϦουΞϓϦ(Cordova)ͱൺ ͯຊʹωΠςΟϒͬΆ͍ΞϓϦΛ ࡞Δ͜ͱ͕Ͱ͖Δɻ ▸ ίʔσΟϯάɺσόοά͍ͭͷ૬ Λ͑Δ(Atom( Sublime ) , Chrome ) ▸ ωΠςΟϒ։ൃٕज़ͦΜͳʹ͍Β ͳ͍
▸Γ࢝ΊΔૣɾɾɾɾ
▸ φϏήʔγϣϯόʔ͕̎छྨબΔʂʂ ▸ ͋ɾɾͳΜ͔ࢥͬͨ௨Γʹಈ͔ͳ͍ɾɾɾɾ
THE PATH OF DESTINY Navigator VS NavigatorIOS ▸ Navigator.NavigationBar ▸
iOS, AndroidͰಈ͘ ▸ React Component ▸ ࣗ༝ɹಈ࡞͕एׯ؇ຫ ▸ NavigatorIOS ▸ iOSͰ͔͠ಈ͔ͳ͍ ▸ UINavigationController ▸ റΓɹಈ࡞ߴ
THE PATH OF DESTINY Navigator VS NavigatorIOS ▸ Navigator.NavigationBar ▸
iOS, AndroidͰಈ͘ ▸ React Component ▸ ࣗ༝ɹಈ࡞͕؇ຫ ▸ NavigatorIOS ▸ iOSͰ͔͠ಈ͔ͳ͍ ▸ UINavigationController ▸ റΓɹಈ࡞ߴ Impression ▸ Navigator.NavigationBar ▸ Θ͔Γ͍͚͢Ͳαϯϓϧগͳ͍ ▸ ॻ͘ͷগ͠໘͍͘͞ ▸ NavigatorIOS ▸ ؆୯ʹ͑Δ͚Ͳɺͪΐͬͱบ ͕͋Δ͜ͱ ▸ ͱͯαΫαΫ ▸ บͱ͍͏͔റΓʁ
▸ ϘλϯΛӈԼʹஔ͖͍ͨ ▸ ͳ͔ͥright, bottom͕ͳ͍ ▸ ͳ͔ͥright, bottom͕ޮ͔ͳ͍
▸ Ͳ͏ͬͯӈԼஔ͢ΔΜͩɾɾʁ ▸ fixedͳ͍Μ͚ͩͲɾɾɾʂʂʂ ▸ flex…………1?
DEAR CSS PROPERTIES IN HEAVEN StyleSheet Properties like CSS ▸
CSSͬΆ͍͚ͲCSS͡Όͳ͍ϓϩύςΟ ▸ inlineʹ֮ΊΔɻ ▸ flex:1ͱ͍͏ṖΊ͍ͨهड़ ▸ positionͷϓϩύςΟabsolute, relativeͷΈ ▸ top, left͋Δ͕right, bottomͳ͍ ▸ top, left, right, bottomflexΛҙࣝ͠ͳ͍ͱ ޮ͔ͳ͍Α͏ʹײ͡Δ ▸ ˋࢦఆෆՄೳ ▸ top, leftΛݻఆͰࢦఆ͢Δͱԣ͖ଞͷ ͰϨΠΞτ่͕ΕΔ
DEAR CSS PROPERTIES IN HEAVEN What is flex? ▸ ͱΓ͋͑ͣ̍ʹ͠ͱ͚ʂͱ͍͏ͷͰͳ
͍ɻଟ͍͚Ͳɾɾɾɻ ▸ flexboxతͳϓϩύςΟͱηοτͰ͏ɻ alignItems, flexDirection…. ▸ flexDirectionʹର͢Δൺ Instead of right, bottom, ’fixed’ ▸ ӈԼஔ͕େมͳ͜ͱɻflexboxΛۦ ͯ͠ɺflex-endͳͲͰΓΔɻ ▸ ݻఆஔposition:’absolute’ ▸ εΫϩʔϧ(ScrollViewͳͲ)Λ࣮͠ͳ͚Ε εΫϩʔϧͰ͖ͳ͍
▸ ListΛදࣔͤ͞·ͤ͏
▸ ListViewɾɾɾ ▸ ScrollViewɾɾɾ ▸ Μɾɾɾɾʁ
SHOULD I USE LISTVIEW OR SCROLLVIEW Scroll View ▸ ७ਮʹεΫϩʔϧྖҬΛઃ͚Δ
▸ ײత͔ͭɺ൚༻త way to display List ▸ Ϧετ߲͕֬ఆ͍ͯ͠ͳ͍ͷͰε Ϋϩʔϧ͍ͤͨ͞߹͕ଟ͍ɻ ▸ ํ๏ೋͭʢ͙Β͍ʣ ▸ ScrollViewίϯϙʔωϯτΛ͏ ▸ ListViewίϯϙʔωϯτΛ͏ ▸ ListView Θͳͯ͘ScrollView͑ εΫϩʔϧͰ͖ΔϦετΛ࡞ΕΔɻ ListView ▸ Ϧετ༻ʹScroll ViewΛϥούʔͨ͠ ͷɻ ▸ දࣔʹσʔλ͕ඞཁ ▸ ͨͩ୯ʹը໘ʹऩ·Βͳ͘εΫϩʔϧ ͍ͤͨ͞߹ʹ͑ͳ͍ ▸ sectionΛ͏͜ͱ͕Ͱ͖Δɻ ▸ rowHasChangeͳͲͷΠϕϯτѻ͏͜ͱ ͕Ͱ͖Δɻ ▸ http://moduscreate.com/react-native-listview-with-section-headers/
CONCLUSION ·ͱΊ ▸ ݸਓతʹެࣜͷυΩϡϝϯτ͋Μ·Γৄ͘͠ͳ͍ͱࢥͬͨ ▸ ListView.dataSourceͱ͔ຊʹࡌͬͯͳͯ͘ٽ͖ͦ͏ʹͳͬͨ ▸ React NatvieίϯϙʔωϯτʹͦΕͧΕɺҙٛͱศརͳ͍ํ͕ ͋Δɻ
▸ Xcode͕ຊʹۂऀɻ ▸ ΄ͱΜͲ৮Βͳ͍͚ͲɺϑΥϯτՃ֎෦ίϯϙʔωϯτՃͰ৮Βͳ ͍ͱ͍͚ͳ͍γνϡΤʔγϣϯɾɾ ▸ গ͚͚ͩͩ͠ͲɺωΠςΟϒίʔυΛॻ͔ͳ͍ͱ͍͚ͳ͍γνϡΤʔγϣ ϯɾɾɾɻࠓޙʹظʂʂ ▸ ͔͠͠ɺjs͔ͬͨ͜͠ͱͳͯ͘ͳΜͱ͔ͳͬͨɻ
▸͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂʂ ▸ ·ͩ·ͩएͰ͕͢ɺԿଔΑΖ͓͘͠ئ͍ க͠·͢ʂ