Upgrade to Pro — share decks privately, control downloads, hide ads and more …

First Taste of React Native

First Taste of React Native

Bert (Chih-Wei) Chang

May 27, 2015
Tweet

Other Decks in Programming

Transcript

  1. ƐŃť Ęŝ ņ q­Ð È + р ßê р ӂ†Ćāû°

    ÐÉ #°ê(ï’ р q’ ϯЙÈÉêÐßϜ°Ðϰ ͯ
  2. ƐŃť Ęŝ ņ q­Ð È + р ßê р ӂ†Ćāû°

    ÐÉ #°ê(ï’ р q’ ϯЙÈÉêÐßϜ°Ðϰ р @†“­°É :†ßɰɨ ϯ::†’ӂA`eϰ ͯ
  3. ƐŃť Ęŝ ņ q­Ð È + р ßê р ӂ†Ćāû°

    ÐÉ #°ê(ï’ р q’ ϯЙÈÉêÐßϜ°Ðϰ р @†“­°É :†ßɰɨ ϯ::†’ӂA`eϰ р @В°Â ͯ
  4. ƐŃť Ęŝ ņ q­Ð È + р ßê р ӂ†Ćāû°

    ÐÉ #°ê(ï’ р q’ ϯЙÈÉêÐßϜ°Ðϰ р @†“­°É :†ßɰɨ ϯ::†’ӂA`eϰ р @В°Â р Vï’ā Ϣ V†°Âã Ϣ #Ð Ϣ Sāê­ÐÉ ͯ
  5. ƐŃť Ęŝ ņ q­Ð È + р ßê р ӂ†Ćāû°

    ÐÉ #°ê(ï’ р q’ ϯЙÈÉêÐßϜ°Ðϰ р @†“­°É :†ßɰɨ ϯ::†’ӂA`eϰ р @В°Â р Vï’ā Ϣ V†°Âã Ϣ #Ð Ϣ Sāê­ÐÉ р  °êê 6†ú†Z“ß°Üê Ϣ V†“ê6Z Ϣ ɨï†ß6Z ͯ
  6. ƐįĤ ĤĘŸįī S­Ðɝ#†Ü Ϣ ÐߙÐú† р q’p°û °É † Éïê㭝ÂÂ

    р (`@: Ϣ ZZ р ÐÐêãêß†Ü р @†êß°†Â e+ ͮʹ
  7. ƐįĤ ĤĘŸįī S­Ðɝ#†Ü Ϣ ÐߙÐú† р q’p°û °É † Éïê㭝ÂÂ

    р (`@: Ϣ ZZ р ÐÐêãêß†Ü р @†êß°†Â e+ р `û°êêß V†ê“­ê ͮʹ
  8. ƐįĤ ĤĘŸįī S­Ðɝ#†Ü Ϣ ÐߙÐú† р q’p°û °É † Éïê㭝ÂÂ

    р (`@: Ϣ ZZ р ÐÐêãêß†Ü р @†êß°†Â e+ р `û°êêß V†ê“­ê р `ÐãêÐɝϜ¼ã ͮʹ
  9. ƐįĤ ĤĘŸįī S­Ðɝ#†Ü Ϣ ÐߙÐú† р q’p°û °É † Éïê㭝ÂÂ

    р (`@: Ϣ ZZ р ÐÐêãêß†Ü р @†êß°†Â e+ р `û°êêß V†ê“­ê р `ÐãêÐɝϜ¼ã р V†ÜÜ ͮʹ
  10. ĤįŞįĹņſŸ V†“ê A†ê°ú :ê eã Ϙ р e㝠V†“ê6Z р

    e㝠(`@: S߰ɓ°Üã р e㝠ZZ S߰ɓ°Üã ͯͯ
  11. ĤįŞįĹņſŸ V†“ê A†ê°ú :ê eã Ϙ р e㝠V†“ê6Z р

    e㝠(`@: S߰ɓ°Üã р e㝠ZZ S߰ɓ°Üã р q°ê­Ðïê (`@: Ϙ ͯͯ
  12. ĤįŞįĹņſŸ V†“ê A†ê°ú :ê eã Ϙ р e㝠V†“ê6Z р

    e㝠(`@: S߰ɓ°Üã р e㝠ZZ S߰ɓ°Üã р q°ê­Ðïê (`@: Ϙ р q°ê­Ðïê ZZ Ϙ ͯͯ
  13. ĤįŞįĹņſŸ V†“ê A†ê°ú :ê eã Ϙ р e㝠V†“ê6Z р

    e㝠(`@: S߰ɓ°Üã р e㝠ZZ S߰ɓ°Üã р q°ê­Ðïê (`@: Ϙ р q°ê­Ðïê ZZ Ϙ р q°ê­Ðïê q’p°û Ϙ ͯͯ
  14. ĤįŞįĹņſŸ ZÂÐû ™úÂÐÜȝÉê +Éãê†Éê VÂІ™ã ZÂÐû ™ÜÂÐāȝÉê ÐûÉÂІ™ eܙ†êã G`

    q°ê­Ðïê Vãï’È°ãã°ÐÉ Ͽ Üܝ ã†āã G8 ZÜ†ß†ê™ `†Èã Z­†ß™ Z¿°ÂÂЁãê ͯͰ
  15. ĤįŞįĹņſŸ ZÂÐû ™úÂÐÜȝÉê +Éãê†Éê VÂІ™ã ZÂÐû ™ÜÂÐāȝÉê ÐûÉÂІ™ eܙ†êã G`

    q°ê­Ðïê Vãï’È°ãã°ÐÉ Ͽ Üܝ ã†āã G8 ZÜ†ß†ê™ `†Èã Z­†ß™ Z¿°ÂÂЁãê AÐÉЁA†ê°ú "Â A†ê°ú e+ ͯͰ
  16. ĤįŞįĹņſŸ ZÂÐû ™úÂÐÜȝÉê +Éãê†Éê VÂІ™ã ZÂÐû ™ÜÂÐāȝÉê ÐûÉÂІ™ eܙ†êã G`

    q°ê­Ðïê Vãï’È°ãã°ÐÉ Ͽ Üܝ ã†āã G8 ZÜ†ß†ê™ `†Èã Z­†ß™ Z¿°ÂÂЁãê AÐÉЁA†ê°ú "Â A†ê°ú e+ (†ß™ `Ð ’ï¨ ߝ†¿ÜаÉêã Ϣ ­ßÐȝ ú `ÐÐÂã ͯͰ
  17. ĤįŞįĹņſŸ ZÂÐû ™úÂÐÜȝÉê +Éãê†Éê VÂІ™ã ZÂÐû ™ÜÂÐāȝÉê ÐûÉÂІ™ eܙ†êã G`

    q°ê­Ðïê Vãï’È°ãã°ÐÉ Ͽ Üܝ ã†āã G8 ZÜ†ß†ê™ `†Èã Z­†ß™ Z¿°ÂÂЁãê AÐÉЁA†ê°ú "Â A†ê°ú e+ (†ß™ `Ð ’ï¨ ߝ†¿ÜаÉêã Ϣ ­ßÐȝ ú `ÐÐÂã eÉ­†ÜÜā SßШ߆Èȝßã V†“ê6Z @†¿ã úßāÐɝ (†ÜÜā ͯͰ
  18. ĤįŞįĹņſŸ ZÂÐû ™úÂÐÜȝÉê +Éãê†Éê VÂІ™ã ZÂÐû ™ÜÂÐāȝÉê ÐûÉÂІ™ eܙ†êã G`

    q°ê­Ðïê Vãï’È°ãã°ÐÉ Ͽ Üܝ ã†āã G8 ZÜ†ß†ê™ `†Èã Z­†ß™ Z¿°ÂÂЁãê AÐÉЁA†ê°ú "Â A†ê°ú e+ (†ß™ `Ð ’ï¨ ߝ†¿ÜаÉêã Ϣ ­ßÐȝ ú `ÐÐÂã eÉ­†ÜÜā SßШ߆Èȝßã V†“ê6Z @†¿ã úßāÐɝ (†ÜÜā :°È°ê™ "†êïߝ ZïÜÜÐßê †É úÉ e㝠AЙ @Йïã ͯͰ
  19. ŃťƐ Ɛį ŝņľŴĘſį (Ðû q @°¨ß†êϝ `­†É¿ã V†“ê6Z S†°É G™

    (`@: <input name=”email” ... /> V†ÜÜ Ϣ @†êß°†Â e+ <Input name=”email” ... /> ͯͱ
  20. ŃťƐ Ɛį ŝņľŴĘſį (Ðû q @°¨ß†êϝ `­†É¿ã V†“ê6Z S†°É G™

    (`@: <input name=”email” ... /> V†ÜÜ Ϣ @†êß°†Â e+ <Input name=”email” ... /> V†“ê A†ê°ú <TextInput name=”email” ... /> ͯͱ
  21. ƐŃƖ ĘŞī ŃťƐ brew install node brew install watchman brew

    install flow npm install -g react-native-cli react-native init AwesomeProject ͯʹ
  22. ƐŃƖ ĘŞī ŃťƐ brew install node brew install watchman brew

    install flow npm install -g react-native-cli react-native init AwesomeProject †ãā ÉÐ鶴ϗ ß°¨­êϝ ͯʹ
  23. űŴťŒįĥſ ŸſŴƄĥſƄŴį °GZϢ ÐÉê†°É AppDelegate.mϜ e㝧ï û­É āÐï ­†ú êÐ

    §†“ `( ™†ß¿ ú°Â G’¼“ê°úЁ “ЙãϜ "Ðß Ā†Èܝϗ ™†Â°É¨ û°ê­ Sïã­ AÐê°đ“†ê°ÐÉϜ Ͱͯ
  24. ŗņĤŴĘŴņįŸ :°’߆߰ãϢ ÐÉꆰÉã V†“ê A†ê°ú :°’߆߰ãϜ ÂÈÐãê úßāꭰɨ āÐïВ™ ɝ™

    °ã ­ßϜ +ɓÂɨ ú°Â *.h, .*m †É™ “ïê *.jsϜ "Ðß Ā†Èܝϗ Network/NetInfo.js ™đɝã ꭝ 6†ú†Z“ß°Üê S+ §Ðß ÉêûÐß¿ ߝ†“­†’°Â°êāϜ ͰͲ
  25. Şťīį ŝťīƄŗįŸ AЙ @Йïã р †ã°“†ÂÂā "ߝ êÐ e㝠р

    GÉÂā  û†ß Ч 6Z VïÉê°È Ͽ ûВ ê†Â¿ ÈÐߝ †êß Ͱʹ
  26. Şťīį ŝťīƄŗįŸ AЙ @Йïã р †ã°“†ÂÂā "ߝ êÐ e㝠р

    GÉÂā  û†ß Ч 6Z VïÉê°È Ͽ ûВ ê†Â¿ ÈÐߝ †êß р VÈÈ’ß êÐ :°É¿ °É†ß°ã +§ AÐê Sïߝ 6Z Ͱʹ
  27. Şťīį ŝťīƄŗįŸ AЙ @Йïã р †ã°“†ÂÂā "ߝ êÐ e㝠р

    GÉÂā  û†ß Ч 6Z VïÉê°È Ͽ ûВ ê†Â¿ ÈÐߝ †êß р VÈÈ’ß êÐ :°É¿ °É†ß°ã +§ AÐê Sïߝ 6Z р q e㝙ϖ "ÂïĀĀÐßϗ +ÈÈïꆒ6Zϗ ÂЙ†ã­ Ϙ Ͱʹ
  28. ŃťƐ ņſ ĹįįŗŸ ŗņŔį VÉ™ß°É¨ render() { var chatData =

    this.state.ChatData; var msgForm = ...; return ( <View style={styles.chatBox}> <MessageList messages={...} /> {msgForm} </View> ); } Ͱ͵
  29. ŃťƐ ņſ ĹįįŗŸ ŗņŔį Zêā°ɨ var styles = StyleSheet.create({ container:

    { flex: 1, flexDirection: ”column”, justifyContent: ”center”, alignItems: ”center”, backgroundColor: ”#073648”, }, ... }); ͰͶ
  30. ŃťƐ ņſ ĹįįŗŸ ŗņŔį A†ê°úЁ°É¨ componentDidMount() { NetInfo.reachabilityIOS.addEventListener( ”change”, this._handleReachChange

    ); PushNotificationIOS.addEventListener( ”notification”, this._handleNotification); PushNotificationIOS.addEventListener( ”register”, this._didRegistered); }, ͱͭ
  31. ŃťƐ ņſ ĹįįŗŸ ŗņŔį ZÐ (Ðû +ê "Âã :°¿ϝ р

    VÉ™ß°É¨ °¿ q’ р Zêā°ɨ °¿ q’ ͱͮ
  32. ŃťƐ ņſ ĹįįŗŸ ŗņŔį ZÐ (Ðû +ê "Âã :°¿ϝ р

    VÉ™ß°É¨ °¿ q’ р Zêā°ɨ °¿ q’ р A†ê°úЁ°É¨ °¿ û’ ͱͮ
  33. ŃťƐ ņſ ĹįįŗŸ ŗņŔį ZÐ (Ðû +ê "Âã :°¿ϝ р

    VÉ™ß°É¨ °¿ q’ р Zêā°ɨ °¿ q’ р A†ê°úЁ°É¨ °¿ û’ ZÐ °ê °ã Ϙ ͱͮ
  34. ŃťƐ ņſ ĹįįŗŸ ŗņŔį ZÐ (Ðû +ê "Âã :°¿ϝ р

    VÉ™ß°É¨ °¿ q’ р Zêā°ɨ °¿ q’ р A†ê°úЁ°É¨ °¿ û’ ZÐ °ê °ã Ϙ AÐϗ ÉÐê û’ϗ °ê °ã A†ê°úϙ ͱͮ
  35. ŒĘƏĘŸĥŴņűſ įŞƏņŴťŞŝįŞſ `­°É¨ã êÐ 8ÉÐû †’Ðïê 6Z Éú р 6†ú†Z“ß°ÜêÐߝ

    ÐÉ ã°Èï†êÐß †É™ ÐÉ ê­ Ü­Ðɝ р p͵ û­É ïã°É¨ ­ßÐȝ ™’﨨°É¨ ϯ@љϰϜ Й °ã ßïÉɰɨ û°ê­°É ­ßÐȝϗ “ÐÈÈïÉ°“†ê ú°† q’ZГ¿êϜ ͱͱ
  36. ŒĘƏĘŸĥŴņűſ įŞƏņŴťŞŝįŞſ `­°É¨ã êÐ 8ÉÐû †’Ðïê 6Z Éú р 6†ú†Z“ß°ÜêÐߝ

    ÐÉ ã°Èï†êÐß †É™ ÐÉ ê­ Ü­Ðɝ р p͵ û­É ïã°É¨ ­ßÐȝ ™’﨨°É¨ ϯ@љϰϜ Й °ã ßïÉɰɨ û°ê­°É ­ßÐȝϗ “ÐÈÈïÉ°“†ê ú°† q’ZГ¿êϜ р :°¿Âā ãû°ê“­ êÐ Ðê­ß É¨°ÉãϜ ͱͱ
  37. ŒĘƏĘŸĥŴņűſ įŞƏņŴťŞŝįŞſ `­°É¨ã êÐ 8ÉÐû †’Ðïê 6Z Éú р 6†ú†Z“ß°ÜêÐߝ

    ÐÉ ã°Èï†êÐß †É™ ÐÉ ê­ Ü­Ðɝ р p͵ û­É ïã°É¨ ­ßÐȝ ™’﨨°É¨ ϯ@љϰϜ Й °ã ßïÉɰɨ û°ê­°É ­ßÐȝϗ “ÐÈÈïÉ°“†ê ú°† q’ZГ¿êϜ р :°¿Âā ãû°ê“­ êÐ Ðê­ß É¨°ÉãϜ р úа™ ߝÂā°É¨ ÐÉ ãܝ“°đ“ ßïÉê°ÈϜ ͱͱ
  38. ŒĘƏĘŸĥŴņűſ įŞƏņŴťŞŝįŞſ G­ q†°êϗ Gɝ @Ðߝ `­°É¨ S†ã ’ †û†ß

    Ч 6†ú†Z“ß°Üê `߆Éã§ÐßÈã V†“ê A†ê°ú ïãã ꭝ°ß ÐûÉ ú°Â Zϒ ê߆Éã§ÐßÈ ÉÐûϜ ͱͲ
  39. ŒĘƏĘŸĥŴņűſ įŞƏņŴťŞŝįŞſ G­ q†°êϗ Gɝ @Ðߝ `­°É¨ S†ã ’ †û†ß

    Ч 6†ú†Z“ß°Üê `߆Éã§ÐßÈã V†“ê A†ê°ú ïãã ꭝ°ß ÐûÉ ú°Â Zϒ ê߆Éã§ÐßÈ ÉÐûϜ ïê °¿Âā ãû°ê“­ êÐ †’ÂϜ ͱͲ
  40. īįĤƄľľņŞľ р ú`ÐРCMD+D ÂÂÐûã wÐï ’ï¨ °É ­ßÐȝ р

    vЙ ߝ†¿ÜаÉêã e㝧ï q­É ’﨨°É¨ A†ê°ú Й ͱʹ
  41. īįĤƄľľņŞľ р ú`ÐРCMD+D ÂÂÐûã wÐï ’ï¨ °É ­ßÐȝ р

    vЙ ߝ†¿ÜаÉêã e㝧ï q­É ’﨨°É¨ A†ê°ú Й р AZ:Ш AÐê `­ ãê ïê Âû†āã wÐïß Z°É“ß "ß°É™ãϜ ã qÂ ã console.log Ϣ alert(...) ͱʹ
  42. ĤƄľľƖ ĥťŝűťŞįŞſŸ ZÐÂïê°ÐÉã G’¼Ё "ß°É™ã e㝠`­È q°ãÂā ϖЁϰ Г

    GÉ°ɝ Г +ã q†ā `ÐÐ +Ɇ““ï߆êϜ V†™ ÐÈȝÉê㠰ߝ“êÂāϜ Ͳͭ
  43. ĤƄľľƖ ĥťŝűťŞįŞſŸ ZÐÂïê°ÐÉã G’¼Ё "ß°É™ã e㝠`­È q°ãÂā ϖЁϰ Г

    GÉ°ɝ Г +ã q†ā `ÐÐ +Ɇ““ï߆êϜ V†™ ÐÈȝÉê㠰ߝ“êÂāϜ V†°ã +ããï ə  Aаãā Ͽ 8Ü S°É¨Ё°É¨Ϝ Ͳͭ
  44. ľįſ ƄűīĘſįī #ê eܙ†ê™ р V†“ê A†ê°ú ÐÈÈïÉ°êā #ßÐïÜ ÐÉ

    "†“’Ðп р #°ê(ï’ +ããïã р V†“ê A†ê°ú Aûãêêß Ͳͮ
  45. ĥťŞĥŗƄŸņťŞ +ã +ê ÐãêÂāϝ +ã °ê qÐßê­ϝ +ê ™ÜÉ™ãϜ @°ÉЁãûÜ°É¨

    ꆿã ê°ÈϜ Џ+ããï "+vА ꆿã ê°ÈϜ (Ðûúßϗ G’¼Ё ÜßШ߆Èȝß㠆ߝ †ÂãÐ “ÐãêÂāϜ ϖЁS Ͳͱ
  46. ĥťŞĥŗƄŸņťŞ +ã +ê ÐãêÂāϝ +ã °ê qÐßê­ϝ +ê ™ÜÉ™ãϜ @°ÉЁãûÜ°É¨

    ꆿã ê°ÈϜ Џ+ããï "+vА ꆿã ê°ÈϜ (Ðûúßϗ G’¼Ё ÜßШ߆Èȝß㠆ߝ †ÂãÐ “ÐãêÂāϜ ϖЁS +ê ’“Ðȝ㠝ã㠓ÐãêÂā °§ āÐï đə ÂШ°“ †É™ “Й È°¨­ê ’ úÉ ߝï㆒ ÐÉ û’Ϝ Ͳͱ
  47. ĥťŞĥŗƄŸņťŞ +ã +ê V†ÂÂā † "†ã°’ ZÐÂïê°ÐÉϝ wãϗ °ê °ãϜ

    q †ß ’ï°Â™°É¨ ÜßЙï“ê°ÐÉ †ÜÜ û°ê­ ꭝ Üï’°“ V†“ê A†ê°ú †ê ЙÈÉêÐßϜ Ͳͳ