React Nativeが 楽しく感じるまでの話

React NativeでナビゲーションのライブラリやUIコンポーネント集を使って楽しくなってくるまでの話です。
言葉足らずでうまく伝えられなかったところはブログに書きました。
https://blog.mismithportfolio.com/web/reactkyoto1

Transcript

1. 3FBDU
   /BUJWFƢ
   ޟƭƥ؎ƮǡǔƽDŽௗ 
   3FBDULZPUP
   W
2. ȬȆȬƀȌǼȫ !NJTVNJ@UBLVNB CMPHNJTNJUIQPSUGPMJPDPN NJTNJUI ૔՛ਸʬ 3FBDU
   /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
3. 3FBDU
   /BUJWFƢ
   ޟƭƥ؎Ʈǡǔƽ
4. 2
   ޟƭƥ؎ƮǡƹƼผ
5. "
   ʧǁǞǡ
6. ޟƭƥ؎ƮǡȪDZɀȕĹ • ܗ͢ǁȄȬȲȹɄȌɄƢ৘ƷɱƢƹƵ۶
   • ȚȐȕɱDŽȂɀȤȸȀɄȖǨ΋ơƭƼǕƵ۶
   • ȄȬȲȹɄȌɄǚӵ޺ƽ͢ǗƼ΋ƥƾƁƷǝƚ؎΋ Ưǡ 3FBDU
   /BUJWFƢޟƭƥ؎Ʈǡǔƽผ 3FBDU
   /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ ƵƶƁӖƭƚƧƿƁƫƯƢǁܗ͢ƯƤǡDŽƽüƂ
   ȂɀȤȸDž૔͜Ƣ˖ǠƵƚǘDŽƮǙǀơƹƵǠƯǡ ƭüƂ
7. [ ޟƭƥ؎ƮǡȪDZɀȕĺ • ˖ǠƵƚǯȤȷDŽ޺ળǨӵச
   • ǯȤȷDŽक௬
   • ȷȷɄȆǔƽ 3FBDU
   /BUJWFƢޟƭƥ؎Ʈǡǔƽผ 3FBDU
   /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ আơǁ೉ೊЀƶƧƿƁ͢׏ઊǁDžƚƣǀǠ॑٥ƯѨ طƾƭƼDžƣljƭƚüƂ
   ۶ജƢơơƹƼ٫يDŽϛળסƂ "JSCOC
8. [ ޟƭƥ؎ƮǡȪDZɀȕĻ • Ǟƥ˚ǥǢƼǡǯȤȷDŽȔȃDZɀǚ΋ƣƶƧǨग़ˊ ƼǕǡ
   • ȯȐǼƶƧ˖ƹƼǕǡ
   • ࣉǁ޺ળDžǀƚƧƿ 3FBDU
   /BUJWFƢޟƭƥ؎Ʈǡǔƽผ 3FBDU
   /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ மƵ॑ƢƽƣƵǠƁ΋ƣƢƘǡƾஸƹƼƼޟƭƚก
   ȶDZȣȶȷǨ˚ƞdžƁƧƹƩƜਅίǁƽƣƷǙƜƂ
   ʫ۞DžƩDŽ౬ǠǨޟƭƥ؎ƮǡȪDZɀȕǁƯǡƂ
9. 3FBDU
   /BUJWFDŽƺǔƻƣȪDZɀȕ • ƺǔƻƚƵƾƩ
   • ƺǔƻƚƵƾƩDŽஷ߽ ʫ۞ௗƯƩƾ 3FBDU
   /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ ȗȠǿɄȄȴɀ • ȗȠǿɄȄȴɀƚǣƚǣ
   • ಧǩƶȶDZȣȶȷ மƵ॑Ǩƺƥǡ • /BUJWF
   #BTF
   • 6*ȀɀȪɄȚɀȕ്ƽமƵ॑ǚ΋ƣǨƺƥǡƾޟ
10. 3FBDU
    /BUJWFDŽƺǔƻƣȪDZɀȕ
11. ǵȶɄȮȐȈɄȅƢƩǥƚ • ǗƹƷǙహƥǀǡ
    • ƵƚƭƵǵȶɄƮǙǀƥƼǘग़ƹహǁ 3FBDU
    /BUJWFDŽƺǔƻƣȪDZɀȕ 3FBDU
    /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ ǵȶɄȮȐȈɄȅǨǽǽǢdžஷ߽ࠒDžƽƼƥǡƂ
    ƶƚƵƚDŽǵȶɄDžȞȌɄɀΚƫǢǡDŽƽؕǢ
    ग़ƹహǁǀƹƼඵƥƧƿƁǔưǽǽǣƜƂ
12. ȔȝȐǽƿƜƯǩDŽ • ǵȶɄȮȐȈɄȅǨǽǽǡƶƧƽDžƿƜǁǘƩƜǁ ǘü 3FBDU
    /BUJWFDŽƺǔƻƣȪDZɀȕ 3FBDU
    /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ  $NE
    
    %ƽȮȘȲɄƢ৘ƷɱƢǡ
     Ƌ%FCVH
    +4
    3FNPUFMZƌǨಧٌ
     ȣȶdzȃƽƋ3FBDU
    /BUJWF
    %FCVHHFSƌƢ৘Ʒ ɱƢǡ
     ȀɀȊɄȸƽƚǣƚǣமǢǡ
13. 3FBDU
    /BUJWF
    %FCVHHFS • Ʃǩǀघ൧
    • ȢǮȠȀɀDŽ૬ǁࠗ؋ 3FBDU
    /BUJWFDŽƺǔƻƣȪDZɀȕ 3FBDU
    /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ ੨ ԫ λϒΛબ୒ͯ͠Δͱ͖ ଞͷλϒΛ։͍ͯΔͱ͖
    γϛϡϨʔλʔͷಈ͖͕΋ͬ͞Γ͢Δ փ γϡϛϨʔλʔ͕ىಈͯ͠ͳ͍ͱ͖
14. غ΋ƽȷȺɄȖüผ • ȔȢǶȸȕƽDžغ΋ƽȷȺɄȖ
    • ҌܑƭƼߥйغ΋ȷȺɄȖDžƫƯƢǁǗǩƿƚ 3FBDU
    /BUJWFDŽƺǔƻƣȪDZɀȕ 3FBDU
    /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ  $NE
    
    %ƽȮȘȲɄƢ৘ƷɱƢǡ
     Ƌ&OBCMF
    -JWF
    3FMPBEƌǨಧٌ
     ǵȔǰȌƽȢǮDZȸǨ˭ӝ
     ȄȬȲȹɄȌɄƢ૔΋ƽȷȺɄȖƫǢǡ
15. 3FBDU
    /BUJWFDŽƺǔƻƣȪDZɀȕǔƾǗ • ǵȶɄȮȐȈɄȅDŽ̫ܛ
    • 3FBDU
    /BUJWF
    %FCVHHFSǨƺơƜ
    • -JWF
    3FMPBEǨ0/ǁƯǡ 3FBDU
    /BUJWFDŽƺǔƻƣȪDZɀȕ 3FBDU
    /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ ƩDŽƺǨǚǡƶƧƽǘƁƶƚnjȯȎȦɄȄȴɀƢҌǥǠǔƭƵƂ
    ʰǁǘങाǨ˧ͥǁƭƼƥǢǡǘDŽƢƘǡơǘƭǢǔƱǩƂ
16. ȗȠǿɄȄȴɀ
17. ǯȤȷDŽȗȠǿɄȄȴɀƚǣƚǣ ȗȠǿɄȄȴɀ 3FBDU
    /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ 4UBDL ্ʹॏͳ͍ͬͯ͘ %SBXFS ࠨӈ͔Βग़ͯ͘Δ΍ͭ 5BC λϒ੾Γସ͑ εϫΠϓͰ੾Γସ͑ΒΕΔλϒ΋ QY (PPHMF 5XJUUFS *OTUBHSBN
18. ȗȠǿɄȄȴɀDžǸǷȆǟƭƚü • 3FBDU
    /BWJHBUJPO
    • 3FBDU
    3PVUFS
    /BUJWF
    • /BUJWF
    /BWJHBUJPOฆ"JSCOC஢ง
    • 3FBDU
    /BUJWF
    3PVUFS
    'MVY
    • 3FBDU
    /BUJWF
    /BWJHBUJPOฆ8JY஢ง ȗȠǿɄȄȴɀ 3FBDU
    /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ ȶDZȣȶȷϪƢǸǷȆƂ
    ǽǽȶȠȷȓǰƢȱȝƚƂ
    /BWJHBUPSƾơ/BWJHBUPS*04ƾơƘǡƧƿƁǚƹLJȶDZȣȶȷƢƠغౙƂ
19. ௒ƭƼǕƵƺ 3FBDU
    /BWJHBUJPO ȗȠǿɄȄȴɀ 3FBDU
    /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ • ƶƚƵƚDŽƩƾDžƽƣǡƂ೔ǃƁȌȣฆȆȼDZȤǘงƁɲơǟƁȖȺȼɄ
    • ȀȬȲȘȓǰڇƭǟƭƚ
    υઉ
    3FBDUKT
    
    3FBDU
    /BUJWF
    NFFUVQ
    ǯɀǾɄȕఴЙǁ৲ƞƵƚ 3FBDU
    /BUJWF
    3PVUFS
    'MVY • ˚ƚǚƯƚ
    • ɬԍǀீʔƢƘƹƼƘǠƢƵƚ
    υઉ
    3FBDU
    /BUJWF
    3PVUFS
    'MVYǨ˚ƹƼǕǔƱǩơɾɾɾผ 3FBDU
    /BUJWF
    /BWJHBUJPO • ඹ޺ળƹǓƚ
    • Ԝ̱ƢƺǟơƹƵüฆJ04ǀǟ"QQ%FMFHBUFNƾƚƜȢǮDZȸǨ˰ߐƯǡא஫ ƢƘǡ
20. ƿDŽȗȠǿɄȄȴɀƢƚƚผ ȗȠǿɄȄȴɀ 3FBDU
    /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ • 3FBDU
    /BWJHBUJPOơ3FBDU
    /BUJWF
    3PVUFS
    'MVYƢǞƫƳ Ɯฆ܈ӱ
    • ȖǺȲȮɀȕǚȂɀȤȸȀɄȖǨǕǢdžǥơǡ
    • 3FBDU
    /BWJHBUJPODžǞǠȚDZȓǰȣƹǓƚDZȮɄȅ
 ȧɄȅDŽֺƾơ ƿǢƢƚƚơDžߐ॓͜ơǟǀƚƂ
    ಙ։ܡǀDŽƽƾǁơƥ˚ƹƼƚƣǔƭǝƜƂ
    ȣȺǽ৭ƽ̶ܙƭƼƥƶƫƚƂ
21. மƵ॑Ǩƺƥǡ
22. 3FBDU
    /BUJWFDŽமƵ॑ǚ΋ƣǨƺƥǡ • 3FBDU
    /BUJWFDž$44ƽܒƧǡกࣖࣉƶƧƿü
    • ȶDZȣȶȷƢமƺơǡƾਅίǁ
    • ȗȠǿɄȄȴɀǁ;ƞƼƁȹDZǯdzȕǨ˖ǡƾǯȤ ȷƹǓƥǀƹƼƥǡ மƵ॑Ǩƺƥǡ 3FBDU
    /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ மƵ॑ǚ΋ƣƢƽƣǡƾޟƭƚƂ
    ޺ળDžǀƚǁƭƼǘƁǯȤȷ˖ƹƼǡ؎ƢƽǡƂ
    ࣉǁǯDZȔǰǯǀƚƜƷDžƁமƵ॑˖ƹƼಖǩƽǕǡDŽǘǯȷƂ
23. /BUJWF
    #BTFƾƚƜDŽƢƘǠǔƯ மƵ॑Ǩƺƥǡ 3FBDU
    /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ • Ǟƥ˚ǥǢǡ6*ȀɀȪɄȚɀȕƢƚǣƚǣऐ؋ƫǢƼƚǡ
    • DZɀȪɄȕƭƼȖǺȲȮɀȕಇǠܒƧdžਅίǁ˚ƞǡ
    • Ƙǡ঵։DŽமƵ॑DžƩǢƽ0, IUUQTOBUJWFCBTFJP (JU)VC
    ελʔ "QBDIF
    -JDFOTF
24. /BUJWF#BTFDŽ࡝̏ மƵ॑Ǩƺƥǡ 3FBDU
    /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ ZBSO
    BEE
    OBUJWFCBTF OQN
    JOTUBMM
    OBUJWFCBTF
    ŠTBWF 
    Πϯετʔϧ SFBDUOBUJWF
    MJOL 
    ωΠςΟϒͱͷґଘؔ܎ΛϦϯΫ͢Δ
25. ˚ƚۖ மƵ॑Ǩƺƥǡ 3FBDU
    /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ JNQPSU
    \
    )FBEFS
    $POUBJOFS
    ^
    GSPN
    OBUJWFCBTF 
    ඞཁͳ΋ͷΛΠϯϙʔτ d
    লུ
    d
    
    
    SFOEFS
    \
    
    
    
    
    
    
    
    
    SFUVSO
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    $POUBJOFS
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    )FBEFS
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    )FBEFS
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    $POUBJOFS
    
    
    
    
    
    
    
    
    
    
    
    ^
    d
    লུ
    d )FBEFS͕
    ௥Ճ͞Εͨ
26. ʰǁǘɾɾɾ மƵ॑Ǩƺƥǡ 3FBDU
    /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ JNQPSU
    \
    )FBEFS
    $POUBJOFS
    #PEZ
    -FGU
    3JHIU
    5JUMF
    #VUUPO
    *DPO
    ^
    GSPN
    OBUJWFCBTF 
    )FBEFSҎ֎ʹ΋-FGU 3JHIU΍*DPOͳͲ௥Ճ λΠτϧ΍
    ΞΠίϯ΋௥Ճ -FGU 3JHIUƽ՗ϟǁಾੳƂ
    *DPOƽǯDZȀɀǨಾੳƽƣǡƂ
27. -JTU மƵ॑Ǩƺƥǡ 3FBDU
    /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ JNQPSU
    \
    ʜলུ
    -JTU
    -JTU*UFN
    ^
    GSPN
    OBUJWFCBTF 
    -JTU
    -JTU*UFNΛ௥Ճ ޮ࡝DŽȷȆȕDŽமƵ॑ƢਅίǁƂ d
    লུ
    d
    -JTU
    
    
    
    
    
    
    -JTU*UFN
    
    
    
    
    
    
    
    
    
    
    
    
    5FYUԘλϯম͖5FYU
    
    
    
    
    
    
    -JTU*UFN
    -JTU
28. -JTUǁம͘ƭǨ மƵ॑Ǩƺƥǡ 3FBDU
    /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ JNQPSU
    \
    ʜলུ
    -JTU
    -JTU*UFN
    ^
    GSPN
    OBUJWFCBTF 
    JUFN%JWJEFS௥Ճ ȷȆȕǁம͘ƭǨƺƧǡDŽǘਅίƂ d
    লུ
    d
    -JTU
    
    
    
    
    
    
    -JTU*UFN
    JUFN%JWJEFS
    
    
    
    
    
    
    
    
    
    
    
    
    5FYUԘম͖෺5FYU
    
    
    
    
    
    
    -JTU*UFN
    -JTU
29. -JTUǁȂȭȚDZȸǚ१εǘ மƵ॑Ǩƺƥǡ 3FBDU
    /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ d
    লུ
    d
    -JTU
    
    
    
    
    
    
    -JTU*UFN
    JUFN%JWJEFS
    
    
    
    
    
    
    
    
    
    
    
    
    5IVNCOBJM
    TRVBSF
    TJ[F\^
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    TPVSDF\SFRVJSF ը૾ύε ^
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    #PEZ
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    5FYUԘλϯম͖5FYU
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    #PEZ
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    3JHIU
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    *DPO
    OBNFBSSPXGPSXBSE
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    3JHIU
    
    
    
    
    
    
    -JTU*UFN
    -JTU
30. ƩǢƦǟƚǀǟ
    $44ƽܒƧƳƜผผ
31. "OESPJEऐǘ மƵ॑Ǩƺƥǡ 3FBDU
    /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ • /BUJWF#BTFDŽƚƚƾƩǣDžɫƺDŽȀɄȖƽJ04ƾ "OESPJEDŽɻۖǨ˖ƹƼƥǢǡƾƩǣ
    • J04ǚ"OESPJEDŽமƵ॑DŽಜƚǨઉƞǀƥƼǞƥǀǡ
    • ѝঌDž/BUJWF#BTFǁʻƱƼƁਸ਼ơƚ௪ۂDž౼;ƽ$44 ǨܒƚƼƚƧdžޟǁƽƣǡ
32. ʰǁǘƵƥƫǩऐ؋ƫǢƼƚǔƯ • ȩȌɀ
    • ȢǶɄȭഝಌ
    • ǸɄȖ
    • ȌȣฆȆȼDZȤƽ͝ǠܖƞǟǢǡǚƺǘง
    • ȆȡȗɄ மƵ॑Ǩƺƥǡ 3FBDU
    /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ ௙ƭƥDž/BUJWF#BTFDŽȖǺȲȮɀȕȂDZȕƽƂ
 ƷǝƚƷǝƚജಜƹƼǡDŽƽࠗ؋üƂ
    ജಜƚǨமƺƧƵǟȤȸȷǼ౾ǢǔƯƂ ·ͩ·ͩͨ͘͞Μʜ IUUQTHJUIVCDPN(FFLZ"OUTOBUJWFCBTFEPDT
33. ȂɀȤȸǨƺƥƹƼǕƵ
34. ȗȠǿɄȄȴɀ
    ฉ
    /BUJWF#BTF • ȗȠǿɄȄȴɀƾ/BUJWF#BTFǨ˚ƞdžƘǡ঵։DŽǘ DŽDžƽƣƘƢǡ
    • 4UBDLฆ೔ǀǠงƾȌȣDž3FBDU
    /BWJHBUJPO
    • ȷȆȕǚȆȼDZȤƽ͝ǠܖǥǡȌȣƁȥȐȍɄǀƿ Dž/BUJWF#BTF ȂɀȤȸǨƺƥƹƼǕƵ 3FBDU
    /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
35. 81
    3&45
    "1*ǘ̱ǢƼǕǡ • 8PSE1SFTTDŽீʔȔɄȌǀƿǨώ׆ƽƣǡ"1*
    • 8PSE1SFTTƽ˖ƹƵȣȺǽǨǯȤȷΚƭƼǕǡฆ$PEF
    (SJEǯȤȷǕƵƚǀǚƺ
    • ீʔɫளȧɄȅǚǸȓȁȷǨȆȼDZȤƽ͝ǠܖƞƁޑਲȧɄȅǀƿ ȂɀȤȸǨƺƥƹƼǕƵ 3FBDU
    /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
36. %FNP
37. ਅίǀȣȺǽȷɄȍɄǯȤȷ ȂɀȤȸǨƺƥƹƼǕƵ 3FBDU
    /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ هࣄҰཡϖʔδ
    هࣄΛબ୒͢Δͱ
    هࣄৄࡉ΁ εϫΠϓૢ࡞͔
    ΧςΰϦͷλϒΛબ୒͢Δͱ
    ৽ண΍ΧςΰϦͷ੾Γସ͑ ݕࡧϖʔδͰ͸
    ϑϦʔϫʔυݕࡧͱ
    λάݕࡧ
38. ਅίǁǯȤȷƢƽƣƵ • ܗˏബDŽ޺ળƶƧƿƁǯȤȷDžƽƣƵ
    • $44ǨܒơǀƥƼǘȗȠǿɄȄȴɀDŽȶDZȣȶȷƾ /BUJWF#BTFǨ˚ƞǢdžƁƘǡ঵։DŽமƵ॑Ƣƽƣǡ
    • மƵ॑ƫƞ˖ǢǢdžƘƾDžǯDZȔǰǯ߅৩
    • 81
    3&45
    "1*ƾơ˔ơ̴ങƫǢƼǡ"1*Ǩ˚ƜƶƧƽ ǘ൧ीƚǘDŽƽƣƳƜ ǔƾǗ 3FBDU
    /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ "OESPJE΋Ͱ͖ͯͨ + ƚǣǩǀȶDZȣȶȷஸƹƼǕǞƜƂ
    ƩDŽǯǸdzɀȕƢƽƣƵƼDŽȶDZȣȶȷǨǞƥȑ DZɄȕƭƼǔƯ +4
    $PBDI !@KTDPBDI
39. 81
    3&45
    "1*ǁƺƚƼDžü • ̊ࢠǁǘʤಹƽ8PSE$BOQ
    ,ZPUP
    Ƣങ̐ƫǢǔƯ
    • 81
    3&45
    "1*ǨDžƮǗƁ8PSE1SFTTǁബǟưƚǣƚǣǀௗƢઓƧǡơǘ
 ฆȌDZȭȆǾȅȲɄȸDžƩǢơǟง
    • ȆȌȐȢǚƹƼǔƯฆƵƶDŽӷ˄ƽƯกง ǔƾǗ 3FBDU
    /BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ շܘ
    ۞
    ˃ѨทʤಹҔӣ IUUQTLZPUPXPSEDBNQPSH
40. ƠǥǠ 
    3FBDULZPUP
    W