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

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

Transcript

1. 3FBDU/BUJWFƢ
   ޟƭƥ؎ƮǡǔƽDŽௗ
   
   3FBDULZPUPW
   

   View Slide

2. ȬȆȬƀȌǼȫ
   !NJTVNJ@UBLVNB
   CMPHNJTNJUIQPSUGPMJPDPN
   NJTNJUI
   ૔՛ਸʬ
   3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
   

   View Slide

3. 3FBDU/BUJWFƢ
   ޟƭƥ؎Ʈǡǔƽ
   

   View Slide

4. 2ޟƭƥ؎ƮǡƹƼผ
   

   View Slide

5. "ʧǁǞǡ
   

   View Slide

6. ޟƭƥ؎ƮǡȪDZɀȕĹ
   • ܗ͢ǁȄȬȲȹɄȌɄƢ৘ƷɱƢƹƵ۶
   • ȚȐȕɱDŽȂɀȤȸȀɄȖǨ΋ơƭƼǕƵ۶
   • ȄȬȲȹɄȌɄǚӵ޺ƽ͢ǗƼ΋ƥƾƁƷǝƚ؎΋
   Ưǡ
   3FBDU/BUJWFƢޟƭƥ؎Ʈǡǔƽผ
   3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
   ƵƶƁӖƭƚƧƿƁƫƯƢǁܗ͢ƯƤǡDŽƽüƂ
   ȂɀȤȸDž૔͜Ƣ˖ǠƵƚǘDŽƮǙǀơƹƵǠƯǡ
   ƭüƂ
   

   View Slide

7. [
   ޟƭƥ؎ƮǡȪDZɀȕĺ
   • ˖ǠƵƚǯȤȷDŽ޺ળǨӵச
   • ǯȤȷDŽक௬
   • ȷȷɄȆǔƽ
   3FBDU/BUJWFƢޟƭƥ؎Ʈǡǔƽผ
   3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
   আơǁ೉ೊЀƶƧƿƁ͢׏ઊǁDžƚƣǀǠ॑٥ƯѨ
   طƾƭƼDžƣljƭƚüƂ
   ۶ജƢơơƹƼ٫يDŽϛળסƂ
   "JSCOC
   

   View Slide

8. [
   ޟƭƥ؎ƮǡȪDZɀȕĻ
   • Ǟƥ˚ǥǢƼǡǯȤȷDŽȔȃDZɀǚ΋ƣƶƧǨग़ˊ
   ƼǕǡ
   • ȯȐǼƶƧ˖ƹƼǕǡ
   • ࣉǁ޺ળDžǀƚƧƿ
   3FBDU/BUJWFƢޟƭƥ؎Ʈǡǔƽผ
   3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
   மƵ॑ƢƽƣƵǠƁ΋ƣƢƘǡƾஸƹƼƼޟƭƚก
   ȶDZȣȶȷǨ˚ƞdžƁƧƹƩƜਅίǁƽƣƷǙƜƂ
   ʫ۞DžƩDŽ౬ǠǨޟƭƥ؎ƮǡȪDZɀȕǁƯǡƂ
   

   View Slide

9. 3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ
   • ƺǔƻƚƵƾƩ
   • ƺǔƻƚƵƾƩDŽஷ߽
   ʫ۞ௗƯƩƾ
   3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
   ȗȠǿɄȄȴɀ
   • ȗȠǿɄȄȴɀƚǣƚǣ
   • ಧǩƶȶDZȣȶȷ
   மƵ॑Ǩƺƥǡ
   • /BUJWF#BTF
   • 6*ȀɀȪɄȚɀȕ്ƽமƵ॑ǚ΋ƣǨƺƥǡƾޟ
   

   View Slide

10. 3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ
    

    View Slide

11. ǵȶɄȮȐȈɄȅƢƩǥƚ
    • ǗƹƷǙహƥǀǡ
    • ƵƚƭƵǵȶɄƮǙǀƥƼǘग़ƹహǁ
    3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    ǵȶɄȮȐȈɄȅǨǽǽǢdžஷ߽ࠒDžƽƼƥǡƂ
    ƶƚƵƚDŽǵȶɄDžȞȌɄɀΚƫǢǡDŽƽؕǢ
    ग़ƹహǁǀƹƼඵƥƧƿƁǔưǽǽǣƜƂ
    

    View Slide

12. ȔȝȐǽƿƜƯǩDŽ
    • ǵȶɄȮȐȈɄȅǨǽǽǡƶƧƽDžƿƜǁǘƩƜǁ
    ǘü
    3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    $NE%ƽȮȘȲɄƢ৘ƷɱƢǡ
    Ƌ%FCVH+43FNPUFMZƌǨಧٌ
    ȣȶdzȃƽƋ3FBDU/BUJWF%FCVHHFSƌƢ৘Ʒ
    ɱƢǡ
    ȀɀȊɄȸƽƚǣƚǣமǢǡ
    

    View Slide

13. 3FBDU/BUJWF%FCVHHFS
    • Ʃǩǀघ൧
    • ȢǮȠȀɀDŽ૬ǁࠗ؋
    3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    ੨
    ԫ
    λϒΛબ୒ͯ͠Δͱ͖
    ଞͷλϒΛ։͍ͯΔͱ͖
    γϛϡϨʔλʔͷಈ͖͕΋ͬ͞Γ͢Δ
    փ γϡϛϨʔλʔ͕ىಈͯ͠ͳ͍ͱ͖
    

    View Slide

14. غ΋ƽȷȺɄȖüผ
    • ȔȢǶȸȕƽDžغ΋ƽȷȺɄȖ
    • ҌܑƭƼߥйغ΋ȷȺɄȖDžƫƯƢǁǗǩƿƚ
    3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    $NE%ƽȮȘȲɄƢ৘ƷɱƢǡ
    Ƌ&OBCMF-JWF3FMPBEƌǨಧٌ
    ǵȔǰȌƽȢǮDZȸǨ˭ӝ
    ȄȬȲȹɄȌɄƢ૔΋ƽȷȺɄȖƫǢǡ
    

    View Slide

15. 3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕǔƾǗ
    • ǵȶɄȮȐȈɄȅDŽ̫ܛ
    • 3FBDU/BUJWF%FCVHHFSǨƺơƜ
    • -JWF3FMPBEǨ0/ǁƯǡ
    3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    ƩDŽƺǨǚǡƶƧƽǘƁƶƚnjȯȎȦɄȄȴɀƢҌǥǠǔƭƵƂ
    ʰǁǘങाǨ˧ͥǁƭƼƥǢǡǘDŽƢƘǡơǘƭǢǔƱǩƂ
    

    View Slide

16. ȗȠǿɄȄȴɀ
    

    View Slide

17. ǯȤȷDŽȗȠǿɄȄȴɀƚǣƚǣ
    ȗȠǿɄȄȴɀ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    4UBDL
    ্ʹॏͳ͍ͬͯ͘
    %SBXFS
    ࠨӈ͔Βग़ͯ͘Δ΍ͭ
    5BC
    λϒ੾Γସ͑
    εϫΠϓͰ੾Γସ͑ΒΕΔλϒ΋
    QY
    (PPHMF
    5XJUUFS
    *OTUBHSBN
    

    View Slide

18. ȗȠǿɄȄȴɀDžǸǷȆǟƭƚü
    • 3FBDU/BWJHBUJPO
    • 3FBDU3PVUFS/BUJWF
    • /BUJWF/BWJHBUJPOฆ"JSCOC஢ง
    • 3FBDU/BUJWF3PVUFS'MVY
    • 3FBDU/BUJWF/BWJHBUJPOฆ8JY஢ง
    ȗȠǿɄȄȴɀ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    ȶDZȣȶȷϪƢǸǷȆƂ
    ǽǽȶȠȷȓǰƢȱȝƚƂ
    /BWJHBUPSƾơ/BWJHBUPS*04ƾơƘǡƧƿƁǚƹLJȶDZȣȶȷƢƠغౙƂ
    

    View Slide

19. ௒ƭƼǕƵƺ
    3FBDU/BWJHBUJPO
    ȗȠǿɄȄȴɀ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    • ƶƚƵƚDŽƩƾDžƽƣǡƂ೔ǃƁȌȣฆȆȼDZȤǘงƁɲơǟƁȖȺȼɄ
    • ȀȬȲȘȓǰڇƭǟƭƚυઉ3FBDUKT3FBDU/BUJWFNFFUVQǯɀǾɄȕఴЙǁ৲ƞƵƚ
    3FBDU/BUJWF3PVUFS'MVY
    • ˚ƚǚƯƚ
    • ɬԍǀீʔƢƘƹƼƘǠƢƵƚυઉ3FBDU/BUJWF3PVUFS'MVYǨ˚ƹƼǕǔƱǩơɾɾɾผ
    3FBDU/BUJWF/BWJHBUJPO
    • ඹ޺ળƹǓƚ
    • Ԝ̱ƢƺǟơƹƵüฆJ04ǀǟ"QQ%FMFHBUFNƾƚƜȢǮDZȸǨ˰ߐƯǡא஫
    ƢƘǡ
    

    View Slide

20. ƿDŽȗȠǿɄȄȴɀƢƚƚผ
    ȗȠǿɄȄȴɀ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    • 3FBDU/BWJHBUJPOơ3FBDU/BUJWF3PVUFS'MVYƢǞƫƳ
    Ɯฆ܈ӱ
    • ȖǺȲȮɀȕǚȂɀȤȸȀɄȖǨǕǢdžǥơǡ
    • 3FBDU/BWJHBUJPODžǞǠȚDZȓǰȣƹǓƚDZȮɄȅ

    ȧɄȅDŽֺƾơ
    ƿǢƢƚƚơDžߐ॓͜ơǟǀƚƂ
    ಙ։ܡǀDŽƽƾǁơƥ˚ƹƼƚƣǔƭǝƜƂ
    ȣȺǽ৭ƽ̶ܙƭƼƥƶƫƚƂ
    

    View Slide

21. மƵ॑Ǩƺƥǡ
    

    View Slide

22. 3FBDU/BUJWFDŽமƵ॑ǚ΋ƣǨƺƥǡ
    • 3FBDU/BUJWFDž$44ƽܒƧǡกࣖࣉƶƧƿü
    • ȶDZȣȶȷƢமƺơǡƾਅίǁ
    • ȗȠǿɄȄȴɀǁ;ƞƼƁȹDZǯdzȕǨ˖ǡƾǯȤ
    ȷƹǓƥǀƹƼƥǡ
    மƵ॑Ǩƺƥǡ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    மƵ॑ǚ΋ƣƢƽƣǡƾޟƭƚƂ
    ޺ળDžǀƚǁƭƼǘƁǯȤȷ˖ƹƼǡ؎ƢƽǡƂ
    ࣉǁǯDZȔǰǯǀƚƜƷDžƁமƵ॑˖ƹƼಖǩƽǕǡDŽǘǯȷƂ
    

    View Slide

23. /BUJWF#BTFƾƚƜDŽƢƘǠǔƯ
    மƵ॑Ǩƺƥǡ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    • Ǟƥ˚ǥǢǡ6*ȀɀȪɄȚɀȕƢƚǣƚǣऐ؋ƫǢƼƚǡ
    • DZɀȪɄȕƭƼȖǺȲȮɀȕಇǠܒƧdžਅίǁ˚ƞǡ
    • Ƙǡ঵։DŽமƵ॑DžƩǢƽ0,
    IUUQTOBUJWFCBTFJP
    (JU)VCελʔ
    "QBDIF-JDFOTF
    

    View Slide

24. /BUJWF#BTFDŽ࡝̏
    மƵ॑Ǩƺƥǡ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    ZBSOBEEOBUJWFCBTF
    OQNJOTUBMMOBUJWFCBTFŠTBWF
    Πϯετʔϧ
    SFBDUOBUJWFMJOL
    ωΠςΟϒͱͷґଘؔ܎ΛϦϯΫ͢Δ
    

    View Slide

25. ˚ƚۖ
    மƵ॑Ǩƺƥǡ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    JNQPSU\)FBEFS $POUBJOFS^GSPNOBUJWFCBTF
    ඞཁͳ΋ͷΛΠϯϙʔτ
    dলུd
    SFOEFS
    \
    SFUVSO
    $POUBJOFS
    )FBEFS
    )FBEFS
    $POUBJOFS
    
    
    ^
    dলུd
    )FBEFS͕
    ௥Ճ͞Εͨ
    

    View Slide

26. ʰǁǘɾɾɾ
    மƵ॑Ǩƺƥǡ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    JNQPSU\)FBEFS $POUBJOFS #PEZ -FGU 3JHIU 5JUMF
    #VUUPO *DPO^GSPNOBUJWFCBTF
    )FBEFSҎ֎ʹ΋-FGU 3JHIU΍*DPOͳͲ௥Ճ
    λΠτϧ΍
    ΞΠίϯ΋௥Ճ
    -FGU 3JHIUƽ՗ϟǁಾੳƂ
    *DPOƽǯDZȀɀǨಾੳƽƣǡƂ
    

    View Slide

27. -JTU
    மƵ॑Ǩƺƥǡ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    JNQPSU\ʜলུ -JTU -JTU*UFN^GSPNOBUJWFCBTF
    -JTU -JTU*UFNΛ௥Ճ
    ޮ࡝DŽȷȆȕDŽமƵ॑ƢਅίǁƂ
    dলུd
    -JTU
    -JTU*UFN
    5FYUԘλϯম͖5FYU
    -JTU*UFN
    -JTU
    

    View Slide

28. -JTUǁம͘ƭǨ
    மƵ॑Ǩƺƥǡ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    JNQPSU\ʜলུ -JTU -JTU*UFN^GSPNOBUJWFCBTF
    JUFN%JWJEFS௥Ճ
    ȷȆȕǁம͘ƭǨƺƧǡDŽǘਅίƂ
    dলུd
    -JTU
    -JTU*UFNJUFN%JWJEFS
    5FYUԘম͖෺5FYU
    -JTU*UFN
    -JTU
    

    View Slide

29. -JTUǁȂȭȚDZȸǚ१εǘ
    மƵ॑Ǩƺƥǡ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    dলུd
    -JTU
    -JTU*UFNJUFN%JWJEFS
    5IVNCOBJMTRVBSFTJ[F\^
    TPVSDF\SFRVJSF ը૾ύε
    ^
    #PEZ
    5FYUԘλϯম͖5FYU
    #PEZ
    3JHIU
    *DPOOBNFBSSPXGPSXBSE
    3JHIU
    -JTU*UFN
    -JTU
    

    View Slide

30. ƩǢƦǟƚǀǟ
    $44ƽܒƧƳƜผผ
    

    View Slide

31. "OESPJEऐǘ
    மƵ॑Ǩƺƥǡ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    • /BUJWF#BTFDŽƚƚƾƩǣDžɫƺDŽȀɄȖƽJ04ƾ
    "OESPJEDŽɻۖǨ˖ƹƼƥǢǡƾƩǣ
    • J04ǚ"OESPJEDŽமƵ॑DŽಜƚǨઉƞǀƥƼǞƥǀǡ
    • ѝঌDž/BUJWF#BTFǁʻƱƼƁਸ਼ơƚ௪ۂDž౼;ƽ$44
    ǨܒƚƼƚƧdžޟǁƽƣǡ
    

    View Slide

32. ʰǁǘƵƥƫǩऐ؋ƫǢƼƚǔƯ
    • ȩȌɀ
    • ȢǶɄȭഝಌ
    • ǸɄȖ
    • ȌȣฆȆȼDZȤƽ͝ǠܖƞǟǢǡǚƺǘง
    • ȆȡȗɄ
    மƵ॑Ǩƺƥǡ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    ௙ƭƥDž/BUJWF#BTFDŽȖǺȲȮɀȕȂDZȕƽƂ

    ƷǝƚƷǝƚജಜƹƼǡDŽƽࠗ؋üƂ
    ജಜƚǨமƺƧƵǟȤȸȷǼ౾ǢǔƯƂ
    ·ͩ·ͩͨ͘͞Μʜ
    IUUQTHJUIVCDPN(FFLZ"OUTOBUJWFCBTFEPDT
    

    View Slide

33. ȂɀȤȸǨƺƥƹƼǕƵ
    

    View Slide

34. ȗȠǿɄȄȴɀฉ/BUJWF#BTF
    • ȗȠǿɄȄȴɀƾ/BUJWF#BTFǨ˚ƞdžƘǡ঵։DŽǘ
    DŽDžƽƣƘƢǡ
    • 4UBDLฆ೔ǀǠงƾȌȣDž3FBDU/BWJHBUJPO
    • ȷȆȕǚȆȼDZȤƽ͝ǠܖǥǡȌȣƁȥȐȍɄǀƿ
    Dž/BUJWF#BTF
    ȂɀȤȸǨƺƥƹƼǕƵ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    

    View Slide

35. 813&45"1*ǘ̱ǢƼǕǡ
    • 8PSE1SFTTDŽீʔȔɄȌǀƿǨώ׆ƽƣǡ"1*
    • 8PSE1SFTTƽ˖ƹƵȣȺǽǨǯȤȷΚƭƼǕǡฆ$PEF(SJEǯȤȷǕƵƚǀǚƺ
    • ீʔɫளȧɄȅǚǸȓȁȷǨȆȼDZȤƽ͝ǠܖƞƁޑਲȧɄȅǀƿ
    ȂɀȤȸǨƺƥƹƼǕƵ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    

    View Slide

36. %FNP
    

    View Slide

37. ਅίǀȣȺǽȷɄȍɄǯȤȷ
    ȂɀȤȸǨƺƥƹƼǕƵ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    هࣄҰཡϖʔδ
    هࣄΛબ୒͢Δͱ
    هࣄৄࡉ΁
    εϫΠϓૢ࡞͔
    ΧςΰϦͷλϒΛબ୒͢Δͱ
    ৽ண΍ΧςΰϦͷ੾Γସ͑
    ݕࡧϖʔδͰ͸
    ϑϦʔϫʔυݕࡧͱ
    λάݕࡧ
    

    View Slide

38. ਅίǁǯȤȷƢƽƣƵ
    • ܗˏബDŽ޺ળƶƧƿƁǯȤȷDžƽƣƵ
    • $44ǨܒơǀƥƼǘȗȠǿɄȄȴɀDŽȶDZȣȶȷƾ
    /BUJWF#BTFǨ˚ƞǢdžƁƘǡ঵։DŽமƵ॑Ƣƽƣǡ
    • மƵ॑ƫƞ˖ǢǢdžƘƾDžǯDZȔǰǯ߅৩
    • 813&45"1*ƾơ˔ơ̴ങƫǢƼǡ"1*Ǩ˚ƜƶƧƽ
    ǘ൧ीƚǘDŽƽƣƳƜ
    ǔƾǗ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    "OESPJE΋Ͱ͖ͯͨ
    +
    ƚǣǩǀȶDZȣȶȷஸƹƼǕǞƜƂ
    ƩDŽǯǸdzɀȕƢƽƣƵƼDŽȶDZȣȶȷǨǞƥȑ
    DZɄȕƭƼǔƯ +4$PBDI !@KTDPBDI
    

    View Slide

39. 813&45"1*ǁƺƚƼDžü
    • ̊ࢠǁǘʤಹƽ8PSE$BOQ,ZPUPƢങ̐ƫǢǔƯ
    • 813&45"1*ǨDžƮǗƁ8PSE1SFTTǁബǟưƚǣƚǣǀௗƢઓƧǡơǘ

    ฆȌDZȭȆǾȅȲɄȸDžƩǢơǟง
    • ȆȌȐȢǚƹƼǔƯฆƵƶDŽӷ˄ƽƯกง
    ǔƾǗ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    շܘ ۞
    ˃ѨทʤಹҔӣ
    IUUQTLZPUPXPSEDBNQPSH
    

    View Slide

40. ƠǥǠ
    
    3FBDULZPUPW
    

    View Slide