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

React Nativeを触ってみた話

React Nativeを触ってみた話

Yuta Hiroto

October 10, 2015
Tweet

More Decks by Yuta Hiroto

Other Decks in Programming

Transcript

  1. React Native

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

    View full-size slide

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

    View full-size slide


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

    View full-size slide


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

    View full-size slide

  5. React Nativeͱ͸ʁ

    View full-size slide

  6. React Native

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

    View full-size slide

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

    View full-size slide

  8. Ͷɺ؆୯Ͱ͠ΐʁ

    View full-size slide


  9. 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 full-size slide


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

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

    View full-size slide


  11. Chrome ͔ Safari Λ

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

    σϑΥϧτͰ͍ͭͯΔʂ

    View full-size slide

  12. ΠϯεϖΫλʔ

    View full-size slide

  13. iOSͱAndroidؒͰͷ

    ίʔυͷҧ͍

    View full-size slide

  14. 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 full-size slide

  15. ඪ४ίϯϙʔωϯτͷಡΈࠐΈ
    var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    } = React;

    React Native͕࢖༻͢Δ

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

    View full-size slide

  16. 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 full-size slide

  17. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  20. index.js

    Appdelegate.m
    jsCodeLocation = [NSURL URLWithString:

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

    ͞Ε͍ͯΔ

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide