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
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
420
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
2
2.1k
毎晩の 負荷試験自動実行による効果
recruitengineers
PRO
5
180
SREのためのeBPF活用ステップアップガイド
egmc
2
1.3k
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
670
Deep Security Conference 2025:生成AI時代のセキュリティ監視 /dsc2025-genai-secmon
mizutani
4
2.9k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.7k
推し書籍📚 / Books and a QA Engineer
ak1210
0
140
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
1k
Transformerを用いたアイテム間の 相互影響を考慮したレコメンドリスト生成
recruitengineers
PRO
2
440
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
130
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
18
7.6k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
We Have a Design System, Now What?
morganepeng
53
7.7k
For a Future-Friendly Web
brad_frost
179
9.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Optimizing for Happiness
mojombo
379
70k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Music & Morning Musume
bryan
46
6.7k
GraphQLとの向き合い方2022年版
quramy
49
14k
Six Lessons from altMBA
skipperchong
28
3.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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͔ͬͨ͜͠ͱͳͯ͘ͳΜͱ͔ͳͬͨɻ
▸͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂʂ ▸ ·ͩ·ͩएͰ͕͢ɺԿଔΑΖ͓͘͠ئ͍ க͠·͢ʂ