如何打造一個百人 stars 的 React Native 元件

簡報於「前端人們一拉一，大家作伙ㄙㄣˋ（前端魔法師五月份小聚）」

前端魔法師社團，萬年召集中
https://www.facebook.com/groups/1635233983410054

React Quick Tutorial
https://github.com/shiningjason1989/react-quick-tutorial

「24 小時，快速入門 React」線上課程
https://4cats.teachable.com/courses/24hrs-react-101

Transcript

1. 㥶⡦䩧鸤♧⦐
 涰➃
   TUBST
   涸
   3FBDU
   /BUJWF
   ⯋⟝
3. ⯓闍穡锸
4. 穡锸
   
5. 䧮涸䧭卓
   鼩尝剤♧涰겎
   TUBST 穡锸
   
7. 穡锸
   
8. 锞⾲锯䧮
   ⿶僽♶頾顑⟤涸
   荆儘䫵⡱艁˘ 穡锸
   
9. 穡锸
   
10. 穡锸
     䧮➛㣔剚湈䧮♧ⴗ涸⸗⸂
 雊ぐ⡙✫鍑
11. 穡锸
     䧮➛㣔剚湈䧮♧ⴗ涸⸗⸂
 雊ぐ⡙✫鍑
    
    3FBDU
    /BUJWF
    涸ꅾ銴
12. 穡锸
     䧮➛㣔剚湈䧮♧ⴗ涸⸗⸂
 雊ぐ⡙✫鍑
    
    3FBDU
    /BUJWF
    涸ꅾ銴
 
    3FBDU
    涸ꅾ銴
13. 穡锸
     䧮➛㣔剚湈䧮♧ⴗ涸⸗⸂
 雊ぐ⡙✫鍑
    
    3FBDU
    /BUJWF
    涸ꅾ銴
 
    3FBDU
    涸ꅾ銴
    
    0QFO
    4PVSDF
    涸ꅾ銴
15. 佦✲饱彂
16. 䎃ⴲ
 䧮攛㢹聃✫
    3FBDU
    $POG
    
18. 㢹幀➃ꬆ涸䧮⟃捀
    3FBDU
    /BUJWF
    〳⟃佖隶⚆歲
19. 䨾⟃ꥬ㣔䧮㽠㉏
    J04
    "OESPJE
    UFBN
    ➮⦛植㖈㖈ⵠ➊랃⯋⟝
 
 䧮䖤ⵌ⟃♴瘸呪
21. 鸏⦐⯋⟝〫
    GPS
    J04
    

22. ⡹僽♶僽姻㖈䟝㽠皿⡹ⵠ✫鸏⦐⯋⟝
 ⛳剤鳵岁䖤ⵌ♧涰겎
    TUBST
    ㌨
24. ⡎僽礶遺㞅嵳
 馊⨞㽠剚馊㢵
 㼩ゅ
25. -FUT
    HFU
    TUBSUFE
26. 䧮剤ㆭ❉姿끐銴⨞ヤ
27. 
    湡⵹剤植剤涸
    3FBDU
    /BUJWF
    鍑对倰呪㌨

28. 
    湡⵹剤植剤涸
    3FBDU
    /BUJWF
    鍑对倰呪㌨
 
    㸐銴〭➊랃そ㶶

29. 
    湡⵹剤植剤涸
    3FBDU
    /BUJWF
    鍑对倰呪㌨
 
    㸐銴〭➊랃そ㶶
 
    䪮遯♳〳遤㌨3FBDU
    /BUJWF
    涸ꣳⵖ僽➊랃

30. 
    湡⵹剤植剤涸
    3FBDU
    /BUJWF
    鍑对倰呪㌨
 
    㸐銴〭➊랃そ㶶
 
    䪮遯♳〳遤㌨3FBDU
    /BUJWF
    涸ꣳⵖ僽➊랃
 
    ⴽ➃銴䙦랃⢪欽㸐
31. 
    湡⵹剤植剤涸
    3FBDU
    /BUJWF
    鍑对倰呪㌨
 
    㸐銴〭➊랃そ㶶
 
    䪮遯♳〳遤㌨3FBDU
    /BUJWF
    涸ꣳⵖ僽➊랃
 
    ⴽ➃銴䙦랃⢪欽㸐
 
    玑䒭銴䙦랃㻨
32. 
    湡⵹剤植剤涸
    3FBDU
    /BUJWF
    鍑对倰呪㌨
33. 
    湡⵹剤植剤涸
    3FBDU
    /BUJWF
    鍑对倰呪㌨ 尝剤わ⹛殥涸
36. 
    㸐銴〭➊랃そ㶶
37. 
    㸐銴〭➊랃そ㶶 呏亙湡⵹涮植涸ㄐそ鋊⵱
 SFBDUOBUJWFBOJNBUFETFHNFOUFEDPOUSPM
38. 
    䪮遯♳〳遤㌨3FBDU
    /BUJWF
    涸ꣳⵖ僽➊랃
39. 
    䪮遯♳〳遤㌨3FBDU
    /BUJWF
    涸ꣳⵖ僽➊랃 溏饱⢵〫剤⹛殥䧮尝剤焥麕♶麕
    3FBDU
    /BUJWF
    剤
    "OJNBUJPO
    垸穉
40. 
    䪮遯♳〳遤㌨3FBDU
    /BUJWF
    涸ꣳⵖ僽➊랃 溏饱⢵〫剤⹛殥䧮尝剤焥麕♶麕
    3FBDU
    /BUJWF
    剤
    "OJNBUJPO
    垸穉
 
 IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWFEPDT BOJNBUJPOTIUNM
41. 
    ⴽ➃銴䙦랃⢪欽㸐
43. ⚛⚂〫꨾銴鷴麕♴倰䭸⟂♴鯺
    $ npm install —save react-native-animated-segmented-control
44. 搭䖕䒸Ⰵⵌ荈䊹涸
    "QQ
    ⚥⽰〳
    
45. 
    玑䒭銴䙦랃㻨
46. 
    玑䒭銴䙦랃㻨 〫闍♴꬗䎙⦐鿈ⴕ
     䧮麂ⵌ涸㔮ꨈ㶶⚮銴䙦랃ず㻫䙦랃雊⹛殥♶剚馄ⴀ⯋⟝㢫呥 ⹛殥銴䙦랃㻜⡲
     玑䒭之㻨갫䎸
    IUUQTHJUIVCDPNTIJOJOHKBTPOSFBDUOBUJWFBOJNBUFE TFHNFOUFEDPOUSPMCMPCNBTUFS"OJNBUFE4FHNFOUFE$POUSPMKT
47. 
    玑䒭銴䙦랃㻨  3FBDU
    /BUJWF
    涸⯋⟝穡圓銴䙦랃佞
     ⾲㨥焺僽や銴竤麕
    DPNQJMF
     僽や銴庠鑑墂
     銴㥶⡦佞ⵌ
    OQN
    ♳
     僽や剤
    QFSGPSNBODF
    JTTVFT
48. 䧮涸넓剚
49. 䧮涸넓剚  䧮㸤䧭✫껷佅荈䊹涸
    J04
    
    "OESPJE
    "QQ
50. 䧮涸넓剚  䧮㸤䧭✫껷佅荈䊹涸
    J04
    
    "OESPJE
    "QQ
     3FBDU
    涸ꅾ銴䚍㖈倴〫銴䧮㷸剚✫⯋⟝涸鏤鎙䙼笞䧮⛳ 〳⟃㼟鸏垺涸䙼笞欽㖈Ⱖ➮䎂〵♳
51. 䧮涸넓剚  䧮㸤䧭✫껷佅荈䊹涸
    J04
    
    "OESPJE
    "QQ
     3FBDU
    涸ꅾ銴䚍㖈倴〫銴䧮㷸剚✫⯋⟝涸鏤鎙䙼笞䧮⛳ 〳⟃㼟鸏垺涸䙼笞欽㖈Ⱖ➮䎂〵♳
     -FBSO
    PODF
    SVO
    BOZXIFSF♶僽
    8SJUF
    PODF
52. 䧮涸넓剚  䧮㸤䧭✫껷佅荈䊹涸
    J04
    
    "OESPJE
    "QQ
     3FBDU
    涸ꅾ銴䚍㖈倴〫銴䧮㷸剚✫⯋⟝涸鏤鎙䙼笞䧮⛳ 〳⟃㼟鸏垺涸䙼笞欽㖈Ⱖ➮䎂〵♳
     -FBSO
    PODF
    SVO
    BOZXIFSF♶僽
    8SJUF
    PODF
     3FBDU
    /BUJWF
    欽⢵㻨
    "QQ
    溫涸䖎溁儘
53. 䧮涸넓剚  䧮㸤䧭✫껷佅荈䊹涸
    J04
    
    "OESPJE
    "QQ
     3FBDU
    涸ꅾ銴䚍㖈倴〫銴䧮㷸剚✫⯋⟝涸鏤鎙䙼笞䧮⛳ 〳⟃㼟鸏垺涸䙼笞欽㖈Ⱖ➮䎂〵♳
     -FBSO
    PODF
    SVO
    BOZXIFSF♶僽
    8SJUF
    PODF
     3FBDU
    /BUJWF
    欽⢵㻨
    "QQ
    溫涸䖎溁儘
     䧮鼩僽꨾銴♧⦐㻨
    OBUJWF
    涸剦⿼
55. 穡勲✫㌨
56. ✲㻜♳
 
    ⚛♶剚剤齡랃㢵➃騟麕⡹涸
    SFQP
    
    騟麕✫⛳♶濼麥⡹涸
    SFQP
    銴䙦랃欽搭䖕ꨆꟚ
57. 䭸㼬倰ꆚ  㸤䧭
    3&"%.&
59. 䭸㼬倰ꆚ  㸤䧭
    3&"%.&
     ⨞ⴀ〳⟃䘰鸠邍麨鑪
    SFQP
    ⸆腋⿶礶繡涸
    (*'
60. 䧮僽㥶⡦⨞
    (*'
    涸
 ⡹〳⟃⢪欽
    TDSFFOPX
    ꏗ醢呲꬗䕧晚
    ⚛⚂㖈䬘荛
    QIPUPTIPQ
    欴ⴀ
    (*'
61. 䭸㼬倰ꆚ  㸤䧭
    3&"%.&
     ⨞ⴀ〳⟃䘰鸠邍麨鑪
    SFQP
    ⸆腋⿶礶繡涸
    (*'
     《䖤
    GFFECBDL⚛⚂㔐䗂
62. 䭸㼬倰ꆚ  㸤䧭
    3&"%.&
     ⨞ⴀ〳⟃䘰鸠邍麨鑪
    SFQP
    ⸆腋⿶礶繡涸
    (*'
     《䖤
    GFFECBDL⚛⚂㔐䗂
    IUUQTNFEJVNDPN!DX3JDIBSE,JNIPXUPHFUIVOESFET PGTUBSTPOZPVSHJUIVCQSPKFDUCFBEEPRBT
63. 䭸㼬倰ꆚ  㸤䧭
    3&"%.&
     ⨞ⴀ〳⟃䘰鸠邍麨鑪
    SFQP
    ⸆腋⿶礶繡涸
    (*'
     《䖤
    GFFECBDL⚛⚂㔐䗂
     㼟醢⡲麕玑㻨䧭鿈衆呔
    
64. 䭸㼬倰ꆚ  㸤䧭
    3&"%.&
     ⨞ⴀ〳⟃䘰鸠邍麨鑪
    SFQP
    ⸆腋⿶礶繡涸
    (*'
     《䖤
    GFFECBDL⚛⚂㔐䗂
     㼟醢⡲麕玑㻨䧭鿈衆呔
     ⢵⵹畮㼭翹걆《♧⦐
    UBML
65. 䧮涸넓剚  銴䧭捀♧涰겎
    TUBS⡹銴騥ⴀ䪮遯涸䙼笞
66. 䧮涸넓剚  銴䧭捀♧涰겎
    TUBS⡹銴騥ⴀ䪮遯涸䙼笞
     %FTJHO
    5IJOLJOH
    (SPXUI
    )BDL
    -FBO
    4UBSUVQ
    〳⟃ 䍲⸔⡹
67. 䧮涸넓剚  銴䧭捀♧涰겎
    TUBS⡹銴騥ⴀ䪮遯涸䙼笞
     %FTJHO
    5IJOLJOH
    (SPXUI
    )BDL
    -FBO
    4UBSUVQ
    〳⟃ 䍲⸔⡹
     ⸈Ⰵ爢纈䧮剓鵜⸈Ⰵ
    TPGUOTIBSF
    
68. 䧮涸넓剚  銴䧭捀♧涰겎
    TUBS⡹銴騥ⴀ䪮遯涸䙼笞
     %FTJHO
    5IJOLJOH
    (SPXUI
    )BDL
    -FBO
    4UBSUVQ
    〳⟃ 䍲⸔⡹
     ⸈Ⰵ爢纈䧮剓鵜⸈Ⰵ
    TPGUOTIBSF
     ➰ⴀㄤⴕ❧〳⟃雊⡹䘰鸠䧭Ꟁ
69. 䊨㉂儘꟦
70. 㥶卓⡹㼩
    3FBDU
    剤莇馱  3FBDU
    2VJDL
    5VUPSJBM
 IUUQTHJUIVCDPNTIJOJOHKBTPOSFBDURVJDLUVUPSJBM
     չ
    㼭儘䘰鸠ⰅꟌ
    3FBDUպ箁♳铭玑갸飑⚥
 IUUQTDBUTUFBDIBCMFDPNDPVSTFTISTSFBDU
     姹鵔⡹㖈爢纈䧴
    (JUIVC
    ♳莅䧮耢窄
71. 剓䖕䧮僽や剤麨䧭
72. 穡锸
     䧮➛㣔剚湈䧮♧ⴗ涸⸗⸂
 雊ぐ⡙✫鍑
    
    3FBDU
    /BUJWF
    涸ꅾ銴
 
    3FBDU
    涸ꅾ銴
    
    0QFO
    4PVSDF
    涸ꅾ銴