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
50
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
AWS認定を取る中で感じたこと
siromi
1
150
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
180
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.2k
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.6k
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
110
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
1.3k
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
1.4k
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
120
OPENLOGI Company Profile for engineer
hr01
1
33k
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
220
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
250
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
160
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Agile that works and the tools we love
rasmusluckow
329
21k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Typedesign – Prime Four
hannesfritz
42
2.7k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
GraphQLとの向き合い方2022年版
quramy
49
14k
For a Future-Friendly Web
brad_frost
179
9.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Six Lessons from altMBA
skipperchong
28
3.9k
Practical Orchestrator
shlominoach
188
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
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͔ͬͨ͜͠ͱͳͯ͘ͳΜͱ͔ͳͬͨɻ
▸͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂʂ ▸ ·ͩ·ͩएͰ͕͢ɺԿଔΑΖ͓͘͠ئ͍ க͠·͢ʂ