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

Hello React Native

Motoki Narita
February 11, 2017

Hello React Native

Motoki Narita

February 11, 2017
Tweet

More Decks by Motoki Narita

Other Decks in Technology

Transcript

  1. 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 ޿ࠂओͱ৘ใΛڞ༗͢Δػೳʢʁʣ
  2. ϝϦοτ͋Δ͔΋ w 3FBDU/BUJWFͷଘࡏ͸஌͍͚ͬͯͨͲϝϦοτ͕શ͘ײ͡Β Εͳ͔ͬͨ w εΫϥονͰ࡞Βͳ͚Ε͹ͳΒͳ͍ͱࢥ͍ࠐΜͰ͍ͨ w ΫϩεϓϥοτϑΥʔϜͰશͯ։ൃ͸ͨͿΜແཧ w J04ͱ"OESPJEͷࢥ૝ͷҧ͍ͱ͔

    w *OTUBHSBNΈ͍ͨʹ෦෼తͰ͋Ε͹ΞϦͰ͸ʁ w ϓογϡ௨஌ͷઃఆը໘ͷΑ͏ͳෳࡶͳ6*͕ཁٻ͞Εͳ ͍Α͏ͳը໘Ͱ͸J04"OESPJEͰڞ௨Խ͢ΔϝϦοτ͋Γ ͦ͏
  3. 3FBDU/BUJWFͷJ04։ൃʹඞཁͳ΋ͷ w OPEF w XBUDINBO w 9DPEF w 3FBDU/BUJWF͕αϙʔτ͢Δ04όʔδϣϯ w

    J04Ҏ্ʢ"OESPJEҎ্ʣ w ؀ڥઃఆʹ͍ͭͯ͸ϒϩάʹ·ͱΊ͍ͯ·͢ w IUUQTNPUPLJFFHJUIVCJPCMPH HFUUJOHTUBSUFESFBDUOBUJWFIUNM
  4. 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ͷઃఆ
  5. 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
  6. 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
  7. 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
  8. 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
  9. ·ͱΊ w 3FBDU/BUJWF͸طଘͷΞϓϦʹ૊ΈࠐΉ͜ͱ͕Ͱ͖Δ w 3FBDUͰએݴతʹॻ͘͜ͱ͕Ͱ͖ΔͷͰɺγϯϓϧͳ࣮૷ ʹͳΔ w ωΠςΟϒΞϓϦͷ஌ࣝͳ͠ʹ։ൃͰ͖Δͱ͍͏Θ͚Ͱ͸ ͳͦ͞͏ w

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