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
640
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
130
ライブラリはしご酒
yutamakotaro
0
130
React + Valtio
yutamakotaro
0
110
My experience for 3 years with React Native
yutamakotaro
0
43
React Nativeと共に歩んだ3年間【TECH STAND #3】
yutamakotaro
1
1.2k
React Native Game Engine in React Native Tech Blog Event
yutamakotaro
1
1.4k
React Native Book
yutamakotaro
0
54
AWS Summit2019 airCloset section
yutamakotaro
1
200
フルJSアーキテクトで作るエアークローゼット
yutamakotaro
2
490
Other Decks in Technology
See All in Technology
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.7k
一生覚えておきたい「システム開発=コミュニケーション」〜初めての実務案件振り返りLT〜
maimyyym
1
170
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
360
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
3
2.7k
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
3
920
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
3
360
いつか使うかも貯金してたらめちゃめちゃ機能が増えてた話
riyaamemiya
0
350
Building Dashboards as a Hobby
egmc
0
240
Postman v10リリース後を振り返る / Looking back at Postman v10 after release
yokawasa
1
160
今年のRubyKaigiはProfiler Year🤘
osyoyu
0
170
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
220
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
240
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Rails Girls Zürich Keynote
gr2m
91
13k
Done Done
chrislema
178
15k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
Making Projects Easy
brettharned
108
5.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
YesSQL, Process and Tooling at Scale
rocio
164
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Writing Fast Ruby
sferik
621
60k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
Building an army of robots
kneath
300
41k
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͔ͬͨ͜͠ͱͳͯ͘ͳΜͱ͔ͳͬͨɻ
▸͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂʂ ▸ ·ͩ·ͩएͰ͕͢ɺԿଔΑΖ͓͘͠ئ͍ க͠·͢ʂ