React Nativeを触ってみた話

Transcript

1. React Native
 Λ৮ͬͯΈͨ ALT #5 2015/10/10 
2. ୭ʁ 
3. ࣗݾ঺հ • ໊લ • ኍށ ༟େ • twitter: about_hiroppy 
4. ͳ͔ͥ 
5.  ΍Δ͔͠ແ͍Αͳ͊ʁ
6.  ൒೥Ҏ্લʹൃද͍ͯͨ͠ͷΛࢥ͍ग़ͨ͠ɻɻɻ
7. React Nativeͱ͸ʁ 
8. React Native  JSͰReactΛ࢖͍ϞόΠϧ։ൃͰ͖Δ ϑϨʔϜϫʔΫ
9. ಋೖ 
10. ಋೖ 1. $ npm install -g react-native-cli 2. $ react-native init altProject 3. ऴΘΓ 
11. Ͷɺ؆୯Ͱ͠ΐʁ 
12. 
    
    
    DSFBUF
    HJUJHOPSF
    
    
    
    DSFBUF
    XBUDINBODPOpH
    
    
    
    DSFBUF
    JOEFYJPTKT
    
    
    
    DSFBUF
    JOEFYBOESPJEKT
    
    
    
    DSFBUF
    JPTNBJOKTCVOEMF
    
    
    
    DSFBUF
    JPTBMU1SPKFDU"QQ%FMFHBUFI
    
    
    
    DSFBUF
    JPTBMU1SPKFDU"QQ%FMFHBUFN
    
    
    
    DSFBUF
    JPTBMU1SPKFDU#BTFMQSPK-BVODI4DSFFOYJC
    
    
    
    DSFBUF
    JPTBMU1SPKFDU*NBHFTYDBTTFUT"QQ*DPOBQQJDPOTFU$POUFOUTKTPO
    
    
    
    DSFBUF
    JPTBMU1SPKFDU*OGPQMJTU
    
    
    
    DSFBUF
    JPTBMU1SPKFDUNBJON
    
    
    
    DSFBUF
    JPTBMU1SPKFDU5FTUTBMU1SPKFDU5FTUTN
    
    
    
    DSFBUF
    JPTBMU1SPKFDU5FTUT*OGPQMJTU
    
    
    
    DSFBUF
    JPTBMU1SPKFDUYDPEFQSPKQSPKFDUQCYQSPK
    
    
    
    DSFBUF
    JPTBMU1SPKFDUYDPEFQSPKYDTIBSFEEBUBYDTDIFNFTBMU1SPKFDUYDTDIFNF
    
    
    
    DSFBUF
    BOESPJEBQQCVJMEHSBEMF
    
    
    
    DSFBUF
    BOESPJEBQQQSPHVBSESVMFTQSP
    
    
    
    DSFBUF
    BOESPJEBQQTSDNBJO"OESPJE.BOJGFTUYNM
    
    
    
    DSFBUF
    BOESPJEBQQTSDNBJOSFTWBMVFTTUSJOHTYNM
    
    
    
    DSFBUF
    BOESPJEBQQTSDNBJOSFTWBMVFTTUZMFTYNM
    
    
    
    DSFBUF
    BOESPJECVJMEHSBEMF
    
    
    
    DSFBUF
    BOESPJEHSBEMFQSPQFSUJFT
    
    
    
    DSFBUF
    BOESPJETFUUJOHTHSBEMF
    
    
    
    DSFBUF
    BOESPJEBQQTSDNBJOSFTNJQNBQIEQJJD@MBVODIFSQOH
    
    
    
    DSFBUF
    BOESPJEBQQTSDNBJOSFTNJQNBQNEQJJD@MBVODIFSQOH
    
    
    
    DSFBUF
    BOESPJEBQQTSDNBJOSFTNJQNBQYIEQJJD@MBVODIFSQOH
    
    
    
    DSFBUF
    BOESPJEBQQTSDNBJOSFTNJQNBQYYIEQJJD@MBVODIFSQOH
    
    
    
    DSFBUF
    BOESPJEHSBEMFXSBQQFSHSBEMFXSBQQFSKBS
    
    
    
    DSFBUF
    BOESPJEHSBEMFXSBQQFSHSBEMFXSBQQFSQSPQFSUJFT
    
    
    
    DSFBUF
    BOESPJEHSBEMFX
    
    
    
    DSFBUF
    BOESPJEHSBEMFXCBU
    
    
    
    DSFBUF
    BOESPJEBQQTSDNBJOKBWBDPNBMUQSPKFDU.BJO"DUJWJUZKBWB
    iOSͱAndroid༻ͷ
 ςϯϓϨʔτ͕ੜ੒͞ΕΔ Android͸9݄15೔ʹରԠ͞Εͨ
13.  ΍ͬͨͥʂ $ open altProject.xcode/
 ios/altProject.xcodeproject android͸ɻɻ Θ͔Βͳ͍ $ npm start
14. σόοά 
15.  Chrome ͔ Safari Λ
 ىಈ͓ͯ͘͠ ϥΠϒϦϩʔυ΋
 σϑΥϧτͰ͍ͭͯΔʂ
16. ΠϯεϖΫλʔ 
17. iOSͱAndroidؒͰͷ
 ίʔυͷҧ͍ 
18. var React = require('react-native'); var { TabBarIOS, NavigatorIOS } = React; var App = React.createClass({ render: function() { return ( <TabBarIOS> <TabBarIOS.Item title="React Native" selected={true}> <NavigatorIOS initialRoute={{ title: 'React Native' }} /> </TabBarIOS.Item> </TabBarIOS> ); }, });  var React = require('react-native'); var { DrawerLayoutAndroid, ProgressBarAndroid } = React; var App = React.createClass({ render: function() { return ( <DrawerLayoutAndroid renderNavigationView={() => <Text>React Native</Text>}> <ProgressBarAndroid /> </DrawerLayoutAndroid> ); }, }); iOS Android ಉ͡ίʔυͰ̎ͭΛΧόʔ͢Δͷ͸೉ͦ͠͏ɻɻɻ
19. ߏจ 
20. ඪ४ίϯϙʔωϯτͷಡΈࠐΈ var { AppRegistry, StyleSheet, Text, View, } = React;  React Native͕࢖༻͢Δ
 σϑΥϧτͳίϯϙʔωϯτ
21. viewͷߏங  var altProject = React.createClass({ render: function() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.ios.js </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> </View> ); } });
22. 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ͷಠࣗίϯϙʔωϯτͰ࣮૷͠·͢
23. σʔλͷऔಘ fetchData: function() { fetch(REQUEST_URL) .then((response) => response.json()) .then((responseData) => { this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData), loaded: true, }); }) .done(); }, 
24. ΤϯτϦϙΠϯτ AppRegistry.registerComponent('altProject', () => altProject); 
25. ࢓૊Έ 
26. index.js  Appdelegate.m jsCodeLocation = [NSURL URLWithString:
 @“http://localhost:8081/index.ios.bundle?platform=ios&dev=true"]; ҎԼͰNodeͰཱͯͨhttpαʔόͷpathࢦఆ
 ͞Ε͍ͯΔ
27. JavaScriptCore.framework • iOS7 Ҏ߱ʹೖͬͨJSΛ૊ΈࠐΊΔframework • DOM΍௨৴Λѻ͏ϥΠϒϥϦ͸ಈ࡞͠ͳ͍ • جຊతͳ૊ΈࠐΈΦϒδΣΫτͷΈఏڙ • ར఺ͱͯ͠ίϯύΠϧ͕ෆཁ 
28. React Native • React Native ͸ JavaScriptCoreΛ࢖༻͢Δ • ผεϨουͰJavaScriptCoreΛ࢖͍
 React NativeͰॻ͍ͨίʔυΛಡΈࠐ·ͤΔ • Titaniumͱಉ༷ʹωΠςΟϒ΁ͷඇಉظϒ Ϧοδ͕ଘࡏ͢Δ(͜͜ͰUIKitͱ઀ଓ͢Δ) 
29. ·ͱΊ 
30. React Native • React.js ͱಉ͡ཁྖͰॻ͘͜ͱ͕Ͱ͖Δ • ES6Ͱॻ͘͜ͱ͕Մೳ • Polyfill͕͋ΔͷͰnpmϞδϡʔϧ͸࢖͑Δ • UIKitΛ஌ͬͯͳ͍ͱͭΒ͍ײ͋͡Δ • TitaniumΛ΍ΔΑΓ΋࣮֬ʹֶशίετ͕௿͍ 
31. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ