Native開発者から見たReactNative

at Gunosy React Meetup

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View 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 Slide

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

   View 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 Slide

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

    View 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 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 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide