React Nativeを触ってみた話

Transcript

1. React Native

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

   View Slide

2. ୭ʁ
   
   

   View Slide

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

   View Slide

4. ͳ͔ͥ
   
   

   View Slide

5. 
   ΍Δ͔͠ແ͍Αͳ͊ʁ
   

   View Slide

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

   View Slide

7. React Nativeͱ͸ʁ
   
   

   View Slide

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

   View Slide

9. ಋೖ
   
   

   View Slide

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

    View Slide

11. Ͷɺ؆୯Ͱ͠ΐʁ
    
    

    View Slide

12. 
    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೔ʹରԠ͞Εͨ
    

    View Slide

13. 
    ΍ͬͨͥʂ
    $ open altProject.xcode/

    ios/altProject.xcodeproject
    android͸ɻɻ
    Θ͔Βͳ͍
    $ npm start
    

    View Slide

14. σόοά
    
    

    View Slide

15. 
    Chrome ͔ Safari Λ

    ىಈ͓ͯ͘͠
    ϥΠϒϦϩʔυ΋

    σϑΥϧτͰ͍ͭͯΔʂ
    

    View Slide

16. ΠϯεϖΫλʔ
    
    

    View Slide

17. iOSͱAndroidؒͰͷ

    ίʔυͷҧ͍
    
    

    View Slide

18. 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 (
    renderNavigationView={() => React Native}>
    
    
    );
    },
    });
    iOS
    Android
    ಉ͡ίʔυͰ̎ͭΛΧόʔ͢Δͷ͸೉ͦ͠͏ɻɻɻ
    

    View Slide

19. ߏจ
    
    

    View Slide

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

    σϑΥϧτͳίϯϙʔωϯτ
    

    View Slide

21. 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
    
    
    );
    }
    });
    

    View Slide

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ͷಠࣗίϯϙʔωϯτͰ࣮૷͠·͢
    

    View Slide

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

    View Slide

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

    View Slide

25. ࢓૊Έ
    
    

    View Slide

26. index.js
    
    Appdelegate.m
    jsCodeLocation = [NSURL URLWithString:

    @“http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
    ҎԼͰNodeͰཱͯͨhttpαʔόͷpathࢦఆ

    ͞Ε͍ͯΔ
    

    View Slide

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

    View Slide

28. React Native
    • React Native ͸ JavaScriptCoreΛ࢖༻͢Δ
    • ผεϨουͰJavaScriptCoreΛ࢖͍

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

    View Slide

29. ·ͱΊ
    
    

    View Slide

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

    View Slide

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

    View Slide