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

Native開発者から見たReactNative

 Native開発者から見たReactNative

at Gunosy React Meetup

y_matsuwitter

March 31, 2015
Tweet

More Decks by y_matsuwitter

Other Decks in Programming

Transcript

  1. Na#veApp։ൃऀ͔ΒΈͨ
    ReactNa#ve

    View full-size slide

  2. Who$am$I?
    • ։ൃຊ෦ࣥߦ໾һࡶ༻໾
    • iOS,&Android,&Infrastructure,&Web
    • Golang෍ڭ໾
    • ਖ਼࠲
    • ࠷ۙؾʹͳΔ΋ͷ:&MQTT

    View full-size slide

  3. ωΠςΟϒ։ൃͰͷελϯε
    • ωΠςΟϒΞϓϦ͸֤Pla%orm͝ͱʹ࠷దԽࣗ෼Ͱ΍Δ
    • ΫϩεϓϥοτϑΥʔϜʹເ͸ݟͳ͍

    View full-size slide

  4. ReactNa'veͱ͸
    • ReactjsϕʔεͰωΠςΟϒΞϓϦ։ൃΛߦ͏ͨΊͷπʔϧηο
    τɻ
    • Not+only+for+DOM,+But+for+any+Views.
    • 03/27ʹɺiOS޲͚͕ϦϦʔε

    View full-size slide

  5. Viewͷந৅Խ
    • Na$veଆͰjsx*<=>*Na$veͷView΁ͷม׵Λߦ͏
    • iOSͰ͸jsxΛUIKitʹม׵͍ͯ͠Δ໛༷
    • ྨࣅ:*ReactCanvas*(jsx*<=>*Canvas)

    View full-size slide

  6. ReactNa'veΛݟͯΈΑ͏
    QiitaͷReactjsλάϦʔμʔΛ࡞ͬͯΈΔ

    View full-size slide

  7. ֤छϞδϡʔϧͷϩʔυ
    'use strict';
    var React = require('react-native');
    var {
    AppRegistry, // ΞϓϦͷىಈϙΠϯτ
    StyleSheet, // ֤ཁૉͷελΠϧ
    Text, // ςΩετϥϕϧ
    View, // View
    ListView, // Ϧετ
    Image, // ը૾View
    NavigatorIOS, // iOSͷUINavigationController
    TouchableWithoutFeedback, //λονΠϕϯτͷऔಘ
    WebView // WebView
    } = React;
    var QIITA_URL = "https://qiita.com/api/v2/tags/reactjs/items";

    View full-size slide

  8. φϏήʔγϣϯͷఆٛ
    • ΞϓϦ͕࠷ॳʹىಈ͢ΔViewControllerͱͯ͠ࠓճ͸Naviga0on
    Λ࢖ͬͨ
    // ϕʔεͷUINavigationControllerʹ֘౰͢Δ΋ͷ
    var ReactQiitaNavigator = React.createClass({
    render: function() {
    return (
    style={styles.navigator}
    initialRoute={{
    component: ReactQiitaList,
    title: 'ReactQiita',
    }}/>
    );
    }
    })

    View full-size slide

  9. Listදࣔ:&ॳظԽ
    // هࣄҰཡϦετ
    var ReactQiitaList = React.createClass({
    getInitialState: function() {
    return {
    items: new ListView.DataSource({
    rowHasChanged: (row1, row2) => row1 !== row2,
    }),
    loaded: false,
    };
    },
    componentDidMount: function() {
    this.fetchData(); //σʔλͷऔಘʢޙड़ʣ
    },

    View full-size slide

  10. ListView:)શମඳը
    render: function() {
    if (!this.state.loaded) {
    // ಡΈࠐΈϏϡʔͷඳըʢࠓճ͸આ໌লུʣ
    return this.renderLoadingView();
    }
    return (
    dataSource={this.state.items}
    renderRow={this.renderItem} //֤ߦͷඳըϝιουΛࢦఆ
    style={styles.listView}/>
    );
    },

    View full-size slide

  11. ListView:)ߦͷඳը
    ஫:"TouchableWithoutFeedback͸̎ͭҎ্ͷࢠΛ௚Լʹ࣋ͯͳ͍
    renderLoadingView: function() { /*লུ*/ },
    renderItem: function(item, sectionID, rowID) {
    return (
    this.onPressed(item)}> // Πϕϯτݕ஌

    source={{uri: item.user.profile_image_url}}
    style={styles.thumbnail}/>

    {item.title}
    {item.user.id}



    );
    },

    View full-size slide

  12. ListView:)APIͷऔಘ
    window.fetch͕ඪ४Ͱ࢖͑ΔʢCORSͷ੍໿ͳ͠ʣ
    fetchData: function() {
    fetch(QIITA_URL)
    .then((response) => response.json())
    .then((responseData) => {
    this.setState({
    items: this.state.items.cloneWithRows(responseData),
    loaded: true,
    });
    })
    .done();
    },

    View full-size slide

  13. ListView:)Πϕϯτͷॲཧ
    iOSͰͷViewؒͷભҠ͸props.navigatorͷpush,4popϝιουͳͲ
    ͕࢖͑Δ
    //ηϧͷλονΠϕϯτ
    onPressed: function(item) {
    this.props.navigator.push({
    title: item.title,
    component: ReactQiitaItemView,
    passProps: { url: item.url }
    })
    },

    View full-size slide

  14. WebView
    // هࣄӾཡ༻ͷWebView
    var ReactQiitaItemView = React.createClass({
    render: function() {
    return (
    url={this.props.url}/>
    )
    }
    });

    View full-size slide

  15. ελΠϧͷهड़
    // ֤छσβΠϯཁૉɺҰ෦ൈਮ
    var styles = StyleSheet.create({
    navigator: {
    flex: 1
    },
    container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    },
    }

    View full-size slide

  16. ىಈ࣌ΤϯτϦϙΠϯτ
    AppRegistry.registerComponent('ReactQiita', () => ReactQiitaNavigator);

    View full-size slide

  17. ͜Ε·ͰͷNa#ve։ൃͱͷൺֱ
    • Reac&veʹॻ͘ํ๏͸RAC͘Β͍͔͠ແ͔ͬͨ
    • RAC*...*Reac&veCocoa

    View full-size slide

  18. Reac%veCocoaͱͷൺֱ
    • ReactNa(ve͸ॻ͖ํ͕γϯϓϧ(ޙड़)
    • Na(veίʔυͱͷϒϦοδΛ࡞੒͢Δඞཁ͕͋Δ
    • iOSඪ४ͱൺ΂ͯɺσβΠϯཁૉͷهड़ָ͕
    • Viewࣗମͷॻ͖ํ΋ָͩͱ͸ࢥ͏͕͜Ε͸·ͩϏϡʔ͕খ͍͞
    ͔Βͩͱࢥ͏

    View full-size slide

  19. RACͷॻ͖ํ
    ஋ͷมߋΛݕ஌͢Δ͚ͩͰ΋ԼهͷΑ͏ͳهड़ɺ৑௕
    [[RACObserve(self, username)
    filter:^(NSString *newName) {
    return [newName hasPrefix:@"j"];
    }]
    subscribeNext:^(NSString *newName) {
    NSLog(@"%@", newName);
    }];

    View full-size slide

  20. ReactNa'veͷίί͕ྑ͍
    • UIKitϕʔεʹίʔυͰϏϡʔΛهࡌ͢ΔΑΓ΋ָ
    • xibΑΓ΋هड़͕ʢࠓͷͱ͜Ζʣָ
    • Reac-veͳهड़͕ඇৗʹগͳ͍ίʔυྔͰॻ͚Δ

    View full-size slide

  21. ReactNa'veͷίί͕μϝ
    • fetchͳͲ͕ಠ࣮ࣗ૷ͬΆ͍ͷͰnpmͷࢿ࢈͕׆͔ͤΔ͔
    • ݁ہUIKitͷֶशͷ্ʹReactNa1veͷಠࣗίϯϙʔωϯτͷֶ
    श͕ඞཁʹͳΔ
    • na1veͷϒϦοδ͸RCTBridgeModuleʹै͏

    View full-size slide

  22. ࡞ͬͯͷײ૝
    • UIKitͱ͍͏͔iOS)SDK஌Βͳ͍ͱ࡞Εͳ͍
    • ͦͷ্ʹReactjsͱReactNa2veͷ஌͕ࣝඞཁ
    • ݸਓతʹ͸Reac2veͳna2veΞϓϦ͸͜Ε͕Ұ൪࡞Γ΍͍͢ͱࢥ
    ͏
    • iOSॻ͚ͯReactjs΋͔͚ΔਓҎ֎͸࢖Θͳ͍ํ͕ྑͦ͞͏
    • ܶతʹ։ൃΛϥΫʹ͢Δ΋ͷͰ͸ͳ͍

    View full-size slide

  23. ࠷ޙʹ
    • ReactNa(ve͸ΫϩεϓϥοτϑΥʔϜͷͨΊͷ࢓૊Έ͡Όͳ͍
    ʢͱࢥ͍ͬͯΔʣ
    • Reac(veͷจ຺Λ࣋ͪࠐΈ΍ͯ͘͘͢͠ΕΔSDK
    • ֤ϓϥοτϑΥʔϜͱReactͷ஌͕ࣝ͋Ε͹ΑΓΑ͍։ൃ͕Մೳ

    View full-size slide

  24. ָ͠Α͏ͱࢥ͏ͳΒ
    (Java|Swi))
    ॻ͖·͠ΐ͏

    View full-size slide