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

Hello React Native

4239ea2bf38d7178476faa8787683105?s=47 Motoki Narita
February 11, 2017

Hello React Native

4239ea2bf38d7178476faa8787683105?s=128

Motoki Narita

February 11, 2017
Tweet

Transcript

  1. )FMMP3FBDU/BUJWF .PUPLJ/BSJUB !NPUPLJFF

  2. ࣗݾ঺հ w !NPUPLJFF w J04ΤϯδχΞ w ϝϧΧϦͷ৽نࣄۀख͕͚Δ
 ࢠձࣾι΢κ΢ॴଐ w J04%$+BQBOελοϑ

  3. ݄೔ʙ݄೔͸ۭ͚͓͖ͯ·͠ΐ͏

  4. 3FBDU/BUJWFͱ͸Կ͔

  5. 3FBDU/BUJWFͱ͸Կ͔ w ೥ʹΦʔϓϯιʔεԽ͞Εͨ'BDFCPPL͕த৺ ͱͳͬͯ։ൃΛਐΊ͍ͯΔ+BWB4DSJQU3FBDUͳϥ ΠϒϥϦ w +BWB4DSJQUͱ3FBDUΛ࢖ͬͯϚϧνϓϥοτϑΥʔϜ J04UW04"OESPJE ͰωΠςΟϒͷ։ൃ͕Ͱ͖Δ w

    +BWB4DSJQUͱ3FBDU͕෼͔͍ͬͯΕ͹ɺͦͷ஌ࣝΛԠ ༻ͯ͠ωΠςΟϒΞϓϦͷ։ൃ͕Ͱ͖Δ
  6. +BWB4DSJQU΋3FBDU΋
 ΄ͱΜͲ෼͔Γ·ͤΜa ?P? 

  7. Ͱ͸ͳͥ͜ͷ࿩Λ͢Δͷ͔ʁ

  8. IUUQTFOHJOFFSJOHJOTUBHSBNDPNSFBDUOBUJWFBUJOTUBHSBNEEBBD

  9. 3FBDU/BUJWFBU*OTUBHSBNͬ͘͟Γ w ݁࿦͔Βݴ͏ͱ3FBDU/BUJWFΛಋೖͨ͜͠ͱʹਲͬ ͯJ04ͱ"OESPJE྆ํͰΑΓ଎͍։ൃ͕Ͱ͖ΔΑ͏ ʹͳͬͨ w -JWF3FMPBEBOE)PU3FMPBEJOHͳͲͷ͓͔͛ w IUUQTZPVUVCFV2[7J,'VD

  10. 3FBDU/BUJWFBU*OTUBHSBNͬ͘͟Γ w طଘͷΞϓϦʹ౷߹͢Δ͜ͱΛ໨ࢦͨ͠ w طଘͷΞϓϦʹ૊ΈࠐΉͷ͸εΫϥο νͰ૊ΉΑΓ΋େมͦ͏ͩͱࢥͬͨ w Ұ൪؆୯ͦ͏ͳը໘ͰऔΓ૊Ή͜ͱ ʹͨ͠ w

    ϓογϡ௨஌ͷઃఆը໘ w ΋ͱ΋ͱ8FC7JFX w 6*͕୯७ w αʔόͰ຋༁͍ͯͨ͠
  11. 3FBDU/BUJWFBU*OTUBHSBNͬ͘͟Γ w ಋೖʹࡍͯ͠ىಈ଎౓ͱ͔ͪΌΜͱܭଌͨ͠ w 3FBDU/BUJWFىಈ࣌ʹΦʔόʔϔου͕ੜ͡Δ w +BWB4DSJQU$PSF΁ͷ+BWB4DSJQU#VOEMFͷΠϯδΣΫτ w ωΠςΟϒϞδϡʔϧͷॳظԽ w

    7JFX.BOBHFSͳͲͳͲ͕ݪҼ w ͜ΕΒΛܭଌ w &EJU1SPpMFΛ3FBDU/BUJWFԽͨ͠ w ͦͷաఔͰز͔ͭͷ3FBDU/BUJWFͷίϯϙʔωϯτΛ࡞ͬͨ
  12. 3FBDU/BUJWFBU*OTUBHSBNͬ͘͟Γ w ଞʹ΋3FBDU/BUJWFͷϦετͷύϑΥʔϚϯεΛଌΔ ͨΊʹ1IPUPT0G΋3FBDU/BUJWFʹͨ͠ʢ͍·ͷ *OTUBHSBNʹ͸ݟ͚ͭΒΕͳ͔͚ͬͨͲΩʔϫʔυʹ Ұகͨ͠౤ߘࣸਅͷϦετͬΆ͍ʣ w ଞʹ΋͍͔ͭ͘ͷϓϩμΫτνʔϜ͕3FBDU/BUJWFͰ ػೳΛϦϦʔεͨ͠

  13. 3FBDU/BUJWFBU*OTUBHSBNͬ͘͟Γ w 1PTU1SPNPUF w ౤ߘΛ޿ࠂԽ͢Δػೳ w IUUQTZPVUVCF%W.%(&EMH w 4BWF w

    อଘػೳ w $IFDLQPJOUT w ෆ৹ͳૢ࡞͕͋ͬͨ৔߹ʹαʔόͷτ ϦΨʔͰදࣔ͞ΕΔը໘ w ͜ͷը໘΋8FC7JFXͩͬͨ w $PNNFOU.PEFSBUJPO w ίϝϯτͷϑΟϧλϦϯάػೳ w -FBE(FO"ET w ޿ࠂओͱ৘ใΛڞ༗͢Δػೳʢʁʣ
  14. 3FBDU/BUJWFBU*OTUBHSBNͬ͘͟Γ w ػೳʹΑͬͯ͸Ҏ্ίʔυΛڞ༗͍ͯ͠Δ w ڞ༗͞Ε͍ͯΔίʔυͷׂ߹ w 1PTU1SPNPUF w 4.4$BQUDIB$IFDLQPJOU w

    $PNNFOU.PEFSBUJPO w -FBE(FO"ET w 1VTI/PUJpDBUJPO4FUUJOHT
  15. ͜ͷهࣄΛಡΜͰࢥͬͨ͜ͱ

  16. ͋ɺҰ෦͚ͩ૊ΈࠐΉ͜ͱ΋ Ͱ͖ΔΜͩ

  17. ϝϦοτ͋Δ͔΋ w 3FBDU/BUJWFͷଘࡏ͸஌͍͚ͬͯͨͲϝϦοτ͕શ͘ײ͡Β Εͳ͔ͬͨ w εΫϥονͰ࡞Βͳ͚Ε͹ͳΒͳ͍ͱࢥ͍ࠐΜͰ͍ͨ w ΫϩεϓϥοτϑΥʔϜͰશͯ։ൃ͸ͨͿΜແཧ w J04ͱ"OESPJEͷࢥ૝ͷҧ͍ͱ͔

    w *OTUBHSBNΈ͍ͨʹ෦෼తͰ͋Ε͹ΞϦͰ͸ʁ w ϓογϡ௨஌ͷઃఆը໘ͷΑ͏ͳෳࡶͳ6*͕ཁٻ͞Εͳ ͍Α͏ͳը໘Ͱ͸J04"OESPJEͰڞ௨Խ͢ΔϝϦοτ͋Γ ͦ͏
  18. ΍ͬͯΈΑ͏

  19. 3FBDUͱ͸ʢࡶʹʣ w એݴతʹ8FCͷ6*ίϯϙʔωϯτΛॻ͘͜ͱ͕Ͱ͖Δ w σʔλ͕มߋ͞Εͨ࣌͸มߋ͞Εͨ΋ͷ͚ͩΛ࠶ඳը͢Δ w 3FBDU/BUJWF͸3FBDUͷ࢓૊ΈΛ࢖ͬͯωΠςΟϒʢJ04"OESPJEʣͷ ίʔυΛॻ͘͜ͱ͕Ͱ͖Δ΋ͷ w 3FBDUΛ࢖͏ͱঢ়ଶ؅ཧͷ࢓૊ΈΛ࣋ͬͨ6*ίϯϙʔωϯτΛߏஙͰ͖Δ

    w QSPQTͰσʔλΛड͚औΔ͜ͱ͕Ͱ͖ɺ಺෦ঢ়ଶσʔλΛTUBUFͰอ࣋͢Δ w IUUQTGBDFCPPLHJUIVCJPSFBDU w TUBUF͕มԽ͢Δͱ࠶ඳը͞ΕΔʢ#JOEJOHʣ w 3FBDUJWF
  20. 3FBDU/BUJWFͷJ04։ൃʹඞཁͳ΋ͷ w OPEF w XBUDINBO w 9DPEF w 3FBDU/BUJWF͕αϙʔτ͢Δ04όʔδϣϯ w

    J04Ҏ্ʢ"OESPJEҎ্ʣ w ؀ڥઃఆʹ͍ͭͯ͸ϒϩάʹ·ͱΊ͍ͯ·͢ w IUUQTNPUPLJFFHJUIVCJPCMPH HFUUJOHTUBSUFESFBDUOBUJWFIUNM
  21. ৽نϓϩδΣΫτͷ࡞੒ $ react-native init YidevProject $ cd YidevProject $ react-native

    run-ios
  22. %FNP

  23. -JWF3FMPBEBOE)PU3FMPBEJOHͰϏϧυ଴ͪ࣌ؒͳ͠Ͱ ϨΠΞ΢τͷमਖ਼ͳͲ͕Մೳ

  24. %FNP

  25. 6*ίϯϙʔωϯτͷυΩϡϝϯτ w 3FBDU/BUJWFͰ࢖༻Մೳͳ6* ίϯϙʔωϯτͷυΩϡϝϯ τ͕༻ҙ͞Ε͍ͯΔ w ωΠςΟϒʹଘࡏ͢Δશͯͷ ϓϩύςΟ͕αϙʔτ͞Εͯ ͍ΔΘ͚Ͱ͸ͳ͍ʢͬΆ͍ʣ IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWFEPDTUFYUIUNM

  26. 3FBDU/BUJWFΛطଘ1+ʹಋೖ͢Δ

  27. 3FBDU/BUJWFΛطଘ1+ʹಋೖ͢Δ w ҎԼͰৄ͘͠આ໌͞Ε͍ͯΔ w IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWFEPDT JOUFHSBUJPOXJUIFYJTUJOHBQQTIUNM w ͜ͷखॱͰ΍ͬͯΈͨ

  28. ݕূόʔδϣϯ w 9DPEF w SFBDU w SFBDUOBUJWF

  29. w SFBDUͱSFBDUOBUJWFΛೖΕΔͨΊʹQBDLBHFKTPO ΛϓϩδΣΫτͷϧʔτʹ௥Ճ 3FBDU/BUJWFΛطଘ1+ʹಋೖ͢Δ { "name": "sample", "version": "0.0.1", "private":

    true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" }, "dependencies": { "react": "15.4.2", "react-native": "0.41.2" } } ˞ 3FBDU/BUJWFͷ*OUFHSBUJPOXJUIFYJTUJOHBQQTͷQBDLBHFKTPO͸؀ڥ͕ݹ͍ͷͰ஫ҙ ˞ ্ه͸9DPEFͰݕূͨ͠ࡍͷEFQFOEFJODJFTͷઃఆ
  30. w 1PEpMFॻ͍ͯQPEJOTUBMM w ඞཁʹԠͯ͡TVCTQFDΛ௥Ճ w OPEF@NPEVMFTSFBDUOBUJWF3FBDUQPETQFD w ඞཁͳTVCTQFD͕ͳ͍৔߹ɺϏϧυ͸Ͱ͖Δ͕XBSOJOH΍ܯࠂ͕ग़ΔΑ͏ʹͳͬ ͍ͯΔ 3FBDU/BUJWFΛطଘ1+ʹಋೖ͢Δ

    target 'YourXcodeProject' do pod 'React', :path => '../node_modules/react-native', :subspecs => [ 'Core', 'RCTText', 'RCTNetwork', 'RCTWebSocket', # needed for debugging ] end
  31. w JOEFYJPTKTΛ༻ҙͯ͠+BWB4DSJQUΛॻ͍͍ͯ͘ w 3FBDU/BUJWFͷίϯϙʔωϯτͱJ04ͷωΠςΟϒ ͷ7JFXΛ݁ͼ͚ͭΔඞཁ͕͋Δ w ˠ3$53PPU7JFXʹ݁ͼ͚ͭΔ w JOEFYJPTKT಺෦ʹϞδϡʔϧΛఆٛͯ͠ɺ 3$53PPU7JFXͱͦͷϞδϡʔϧΛ݁ͼ͚ͭΔ

    3FBDU/BUJWFΛطଘ1+ʹಋೖ͢Δ
  32. NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"]; RCTRootView *rootView = [[RCTRootView alloc]

    initWithBundleURL : jsCodeLocation moduleName : @"Hello" initialProperties : @{ @"scores" : @[ @{ @"name" : @"React", @"value": @"15.4.2" }, @{ @"name" : @"React Native", @"value": @"0.41.2" } ] } launchOptions : nil]; UIViewController *vc = [[UIViewController alloc] init]; vc.view = rootView; [self.navigationController pushViewController: vc animated: YES]; 7JFX$POUSPMMFSN
  33. NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"]; RCTRootView *rootView = [[RCTRootView alloc]

    initWithBundleURL : jsCodeLocation moduleName : @"Hello" initialProperties : @{ @"scores" : @[ @{ @"name" : @"React", @"value": @"15.4.2" }, @{ @"name" : @"React Native", @"value": @"0.41.2" } ] } launchOptions : nil]; UIViewController *vc = [[UIViewController alloc] init]; vc.view = rootView; [self.navigationController pushViewController: vc animated: YES]; 7JFX$POUSPMMFSN
  34. JOEFYJPTKT

  35. NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"]; RCTRootView *rootView = [[RCTRootView alloc]

    initWithBundleURL : jsCodeLocation moduleName : @"Hello" initialProperties : @{ @"scores" : @[ @{ @"name" : @"React", @"value": @"15.4.2" }, @{ @"name" : @"React Native", @"value": @"0.41.2" } ] } launchOptions : nil]; UIViewController *vc = [[UIViewController alloc] init]; vc.view = rootView; [self.navigationController pushViewController: vc animated: YES]; 7JFX$POUSPMMFSN
  36. JOEFYJPTKT

  37. %FNP

  38. w ભҠઌͷը໘ͷWJFX͚ͩΛ3FBDU /BUJWFͰ࣮૷ w ϞʔμϧΛ্ཱͪ͛Δͱ͖ʹগ͠ ͕͔͔࣌ؒͬͯ͠·͏

  39. w 3FBDU/BUJWF͕ඪ४Ͱఏڙ͍ͯ͠Δ6*ίϯϙʔωϯτ͸Ҏ্ͷΑ͏ͳ͜ ͱΛ۪௚ʹ΍͍ͬͯΔ w 04͝ͱʹJ04"OESPJEͰผʑͷ࣮૷͕ඞཁ w IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFCMPCNBTUFS-JCSBSJFT $PNQPOFOUT"DUJWJUZ*OEJDBUPS"DUJWJUZ*OEJDBUPSKT-- w શͯڞ௨ͷ࣮૷͕Ͱ͖ΔΘ͚Ͱ͸ͳ͍

    w ยํͷ04ʹ͔͠ଘࡏ͠ͳ͍Α͏ͳίϯϙʔωϯτ͸)PHF*04  )PHF"OESPJEΈ͍ͨʹ໋໊͞Ε͍ͯΔͬΆ͍ w IUUQTHJUIVCDPNGBDFCPPLSFBDUOBUJWFUSFFNBTUFS-JCSBSJFT $PNQPOFOUT
  40. ϥΠϒϥϦ݁ߏͨ͘͞Μ͋Δʢ໊લ͕શ෦ࣅͯΔʜʣ

  41. ·ͱΊ

  42. ·ͱΊ w 3FBDU/BUJWF͸طଘͷΞϓϦʹ૊ΈࠐΉ͜ͱ͕Ͱ͖Δ w 3FBDUͰએݴతʹॻ͘͜ͱ͕Ͱ͖ΔͷͰɺγϯϓϧͳ࣮૷ ʹͳΔ w ωΠςΟϒΞϓϦͷ஌ࣝͳ͠ʹ։ൃͰ͖Δͱ͍͏Θ͚Ͱ͸ ͳͦ͞͏ w

    ౰વ04ͷࠩҟ΋͋ͬͯશͯڞ௨ԽͰͰ͖ΔΘ͚Ͱ͸ͳ͍ w ͘͢͝γϯϓϧͳը໘Ͱ6*ʹͩ͜ΘΔඞཁ΋ͳ͍ը໘ɺ
 ͔ͭίʔυΛ04·͍ͨͰڞ௨Խ͍ͤͨ͞৔߹ʹ΋ྑ͍͔΋
  43. Ͳ͏͍͏૊৫ʹ޲͍͍ͯΔͷ͔ʁ

  44. J04 "OESPJE αʔϏε ϝϦοτͳͦ͞͏ νʔϜ͕04Ͱ෼͔Ε͍ͯͯػೳ΋ผʑʹ։ൃ͞ΕΔ

  45. "ػೳ #ػೳ αʔϏεʢJ04"OESPJE8FCʣ ϝϦοτ͋Δ͔΋ʁ ػೳ͝ͱʹ෼͔Εͯ։ൃΛߦ͏νʔϜʢ*OTUBHSBN΋͜Μͳײͬ͡Ά͍ʣ

  46. ͓ΘΓ