Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
React Native vs iOS ΤϯδχΞ iOSDC 2017
Slide 2
Slide 2 text
ViewΛͲ͏࡞Δ͔ʁ
Slide 3
Slide 3 text
Viewͷ։ൃ͍͠ • ϢʔβʔView͔ΒใΛಡΈऔΔ • ϢʔβʔViewΛ௨ͯ͡ର͢Δ • ։ൃऀViewΛ࡞Γ͍ͨ
Slide 4
Slide 4 text
• ੈք࠷େͷϢʔβʔنΛ࣋ͭViewͷఏڙऀ
Slide 5
Slide 5 text
Who am I ? • id:laiso • iOS/Android Developer • ϑϨʔϜϫʔΫݚڀՈ
Slide 6
Slide 6 text
React NativeͱԿ͔ • "React" ͰiOSAndroidͷωΠςΟϒΞϓϦέʔγϣ ϯ͕։ൃͰ͖Δπʔϧ܈
Slide 7
Slide 7 text
ReactͱԿ͔ • JavaScriptͷViewϥΠϒϥϦ • ϓϥοτϑΥʔϜɺύϥμΠϜ
Slide 8
Slide 8 text
class ArticleViewController extends Component { // loadView() render() { return ( {this.props.model.content} ); } }
Slide 9
Slide 9 text
React NativeͷΈ • ΞϓϦόϯυϧͷJavaScriptΛಡΈࠐΈ • ViewΛ෦σʔλߏͰܭࢉ͢Δ(JavaScriptCore) • ݁ՌΛUIViewʹϦΞϧλΠϜͰదԠ͢Δ
Slide 10
Slide 10 text
UIKitϓϩάϥϛϯάͷ • ViewControllerΛத৺ͱͨ͠Viewͷߏ • ViewͷංେԽ
Slide 11
Slide 11 text
Reactͷϓϩάϥϛϯά • ViewͷඳըͷৄࡉΛϑϨʔϜϫʔΫʹͤΔ • Viewͷ݁ՌΛίʔυͰදݱ • એݴతͳView
Slide 12
Slide 12 text
ReactͷએݴతͳViewͷར • ঢ়ଶม͕ಉ͡ͳΒߏ͞ΕΔView(݁Ռ)ಉ͡ • ͕ͯ͢ render() ʹू·Δ • ෳࡶͳViewΛมߋ͘͢͢͠Δ
Slide 13
Slide 13 text
render() { return ( ); }
Slide 14
Slide 14 text
ίϯϙʔωϯτࢦͳViewͷར • ཧͷ͢͠͞ • ςετͷ͢͠͞ • ڞ௨Խ
Slide 15
Slide 15 text
UIViewControllerͷ • ίϯϙʔωϯτͷڠௐੑ • addChildViewController() • addSubview(), didMoveToParentViewController()
Slide 16
Slide 16 text
·ͱΊɿReactͲ͏ViewΛ࡞Δͷ͔ʁ • એݴతͳViewΛίϯϙʔωϯτԽͯ͠ • ίϯϙʔωϯτΛΈ߹ΘͤΔ͜ͱͰViewΛ࡞Δ
Slide 17
Slide 17 text
·ͱΊɿUIKitͲ͏ViewΛ࡞Δͷ͔ʁ • ॳظͷը໘ఆٛΛϩʔυͯ͠ • ViewΛखಈͰॻ͖͑Δ • ͯ͢Λ1ը໘ͷViewControllerʹͤΔ
Slide 18
Slide 18 text
React Native is Dream • ຊདྷෳࡶͳView։ൃΛγϯϓϧʹͯ͠͠·͏ྗ • ύϥμΠϜɺΤίγεςϜͷڞ༗ • ݱ࣮ੈքͷΛղܾ͢ΔͨΊʹੜ·Εٕͨज़
Slide 19
Slide 19 text
UIKitϓϩάϥϛϯάͷ՝ • ໋ྩతͳViewͷଟ͞ • ॊೈੑʹ͚ܽΔComponent
Slide 20
Slide 20 text
UIKitϓϩάϥϛϯάͷະདྷ
Slide 21
Slide 21 text
CocoaόΠϯσΟϯάͷiOSαϙʔτ
Slide 22
Slide 22 text
XMLϨΠΞτ • Windows XAML • Android Layouts • XMLϦςϥϧ in Swift?
Slide 23
Slide 23 text
ίϯϙʔωϯτࢦͷUIViewController • Storyboard NEXT • Dataflow Architecture, State Management
Slide 24
Slide 24 text
React NativeͰʮະདྷͷiOSϓϩάϥϛϯάʯ Λ૾ʢʣ͠·ͤΜ͔ʁ $ npm i -g react-native-cli