Tweet
Tweet

Slide 1

Slide 1 text

React Native
 Λ৮ͬͯΈͨ ALT #5 2015/10/10

Slide 2

Slide 2 text

୭ʁ

Slide 3

Slide 3 text

ࣗݾ঺հ • ໊લ • ኍށ ༟େ • twitter: about_hiroppy

Slide 4

Slide 4 text

ͳ͔ͥ

Slide 5

Slide 5 text

΍Δ͔͠ແ͍Αͳ͊ʁ

Slide 6

Slide 6 text

൒೥Ҏ্લʹൃද͍ͯͨ͠ͷΛࢥ͍ग़ͨ͠ɻɻɻ

Slide 7

Slide 7 text

React Nativeͱ͸ʁ

Slide 8

Slide 8 text

React Native JSͰReactΛ࢖͍ϞόΠϧ։ൃͰ͖Δ ϑϨʔϜϫʔΫ

Slide 9

Slide 9 text

ಋೖ

Slide 10

Slide 10 text

ಋೖ 1. $ npm install -g react-native-cli 2. $ react-native init altProject 3. ऴΘΓ

Slide 11

Slide 11 text

Ͷɺ؆୯Ͱ͠ΐʁ

Slide 12

Slide 12 text

DSFBUFHJUJHOPSF DSFBUFXBUDINBODPOpH DSFBUFJOEFYJPTKT DSFBUFJOEFYBOESPJEKT DSFBUFJPTNBJOKTCVOEMF DSFBUFJPTBMU1SPKFDU"QQ%FMFHBUFI DSFBUFJPTBMU1SPKFDU"QQ%FMFHBUFN DSFBUFJPTBMU1SPKFDU#BTFMQSPK-BVODI4DSFFOYJC DSFBUFJPTBMU1SPKFDU*NBHFTYDBTTFUT"QQ*DPOBQQJDPOTFU$POUFOUTKTPO DSFBUFJPTBMU1SPKFDU*OGPQMJTU DSFBUFJPTBMU1SPKFDUNBJON DSFBUFJPTBMU1SPKFDU5FTUTBMU1SPKFDU5FTUTN DSFBUFJPTBMU1SPKFDU5FTUT*OGPQMJTU DSFBUFJPTBMU1SPKFDUYDPEFQSPKQSPKFDUQCYQSPK DSFBUFJPTBMU1SPKFDUYDPEFQSPKYDTIBSFEEBUBYDTDIFNFTBMU1SPKFDUYDTDIFNF DSFBUFBOESPJEBQQCVJMEHSBEMF DSFBUFBOESPJEBQQQSPHVBSESVMFTQSP DSFBUFBOESPJEBQQTSDNBJO"OESPJE.BOJGFTUYNM DSFBUFBOESPJEBQQTSDNBJOSFTWBMVFTTUSJOHTYNM DSFBUFBOESPJEBQQTSDNBJOSFTWBMVFTTUZMFTYNM DSFBUFBOESPJECVJMEHSBEMF DSFBUFBOESPJEHSBEMFQSPQFSUJFT DSFBUFBOESPJETFUUJOHTHSBEMF DSFBUFBOESPJEBQQTSDNBJOSFTNJQNBQIEQJJD@MBVODIFSQOH DSFBUFBOESPJEBQQTSDNBJOSFTNJQNBQNEQJJD@MBVODIFSQOH DSFBUFBOESPJEBQQTSDNBJOSFTNJQNBQYIEQJJD@MBVODIFSQOH DSFBUFBOESPJEBQQTSDNBJOSFTNJQNBQYYIEQJJD@MBVODIFSQOH DSFBUFBOESPJEHSBEMFXSBQQFSHSBEMFXSBQQFSKBS DSFBUFBOESPJEHSBEMFXSBQQFSHSBEMFXSBQQFSQSPQFSUJFT DSFBUFBOESPJEHSBEMFX DSFBUFBOESPJEHSBEMFXCBU DSFBUFBOESPJEBQQTSDNBJOKBWBDPNBMUQSPKFDU.BJO"DUJWJUZKBWB iOSͱAndroid༻ͷ
 ςϯϓϨʔτ͕ੜ੒͞ΕΔ Android͸9݄15೔ʹରԠ͞Εͨ

Slide 13

Slide 13 text

΍ͬͨͥʂ $ open altProject.xcode/
 ios/altProject.xcodeproject android͸ɻɻ Θ͔Βͳ͍ $ npm start

Slide 14

Slide 14 text

σόοά

Slide 15

Slide 15 text

Chrome ͔ Safari Λ
 ىಈ͓ͯ͘͠ ϥΠϒϦϩʔυ΋
 σϑΥϧτͰ͍ͭͯΔʂ

Slide 16

Slide 16 text

ΠϯεϖΫλʔ

Slide 17

Slide 17 text

iOSͱAndroidؒͰͷ
 ίʔυͷҧ͍

Slide 18

Slide 18 text

var React = require('react-native'); var { TabBarIOS, NavigatorIOS } = React; var App = React.createClass({ render: function() { return ( ); }, }); var React = require('react-native'); var { DrawerLayoutAndroid, ProgressBarAndroid } = React; var App = React.createClass({ render: function() { return ( React Native}> ); }, }); iOS Android ಉ͡ίʔυͰ̎ͭΛΧόʔ͢Δͷ͸೉ͦ͠͏ɻɻɻ

Slide 19

Slide 19 text

ߏจ

Slide 20

Slide 20 text

ඪ४ίϯϙʔωϯτͷಡΈࠐΈ var { AppRegistry, StyleSheet, Text, View, } = React; React Native͕࢖༻͢Δ
 σϑΥϧτͳίϯϙʔωϯτ

Slide 21

Slide 21 text

viewͷߏங var altProject = React.createClass({ render: function() { return ( Welcome to React Native! To get started, edit index.ios.js Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu ); } });

Slide 22

Slide 22 text

styleͷߏங var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); iOS ͷ UI ίϯϙʔωϯτ͸ 
 CSS ͷελΠϧઃఆʹରԠ͠ͳ͍ͨΊɺ
 react nativeͷಠࣗίϯϙʔωϯτͰ࣮૷͠·͢

Slide 23

Slide 23 text

σʔλͷऔಘ fetchData: function() { fetch(REQUEST_URL) .then((response) => response.json()) .then((responseData) => { this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData), loaded: true, }); }) .done(); },

Slide 24

Slide 24 text

ΤϯτϦϙΠϯτ AppRegistry.registerComponent('altProject', () => altProject);

Slide 25

Slide 25 text

࢓૊Έ

Slide 26

Slide 26 text

index.js Appdelegate.m jsCodeLocation = [NSURL URLWithString:
 @“http://localhost:8081/index.ios.bundle?platform=ios&dev=true"]; ҎԼͰNodeͰཱͯͨhttpαʔόͷpathࢦఆ
 ͞Ε͍ͯΔ

Slide 27

Slide 27 text

JavaScriptCore.framework • iOS7 Ҏ߱ʹೖͬͨJSΛ૊ΈࠐΊΔframework • DOM΍௨৴Λѻ͏ϥΠϒϥϦ͸ಈ࡞͠ͳ͍ • جຊతͳ૊ΈࠐΈΦϒδΣΫτͷΈఏڙ • ར఺ͱͯ͠ίϯύΠϧ͕ෆཁ

Slide 28

Slide 28 text

React Native • React Native ͸ JavaScriptCoreΛ࢖༻͢Δ • ผεϨουͰJavaScriptCoreΛ࢖͍
 React NativeͰॻ͍ͨίʔυΛಡΈࠐ·ͤΔ • Titaniumͱಉ༷ʹωΠςΟϒ΁ͷඇಉظϒ Ϧοδ͕ଘࡏ͢Δ(͜͜ͰUIKitͱ઀ଓ͢Δ)

Slide 29

Slide 29 text

·ͱΊ

Slide 30

Slide 30 text

React Native • React.js ͱಉ͡ཁྖͰॻ͘͜ͱ͕Ͱ͖Δ • ES6Ͱॻ͘͜ͱ͕Մೳ • Polyfill͕͋ΔͷͰnpmϞδϡʔϧ͸࢖͑Δ • UIKitΛ஌ͬͯͳ͍ͱͭΒ͍ײ͋͡Δ • TitaniumΛ΍ΔΑΓ΋࣮֬ʹֶशίετ͕௿͍

Slide 31

Slide 31 text

͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ