$30 off During Our Annual Pro Sale. View Details »

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

  2. Who$am$I? • ։ൃຊ෦ࣥߦ໾һࡶ༻໾ • iOS,&Android,&Infrastructure,&Web • Golang෍ڭ໾ • ਖ਼࠲ •

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

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

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

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

  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";
  8. φϏήʔγϣϯͷఆٛ • ΞϓϦ͕࠷ॳʹىಈ͢ΔViewControllerͱͯ͠ࠓճ͸Naviga0on Λ࢖ͬͨ // ϕʔεͷUINavigationControllerʹ֘౰͢Δ΋ͷ var ReactQiitaNavigator = React.createClass({

    render: function() { return ( <NavigatorIOS style={styles.navigator} initialRoute={{ component: ReactQiitaList, title: 'ReactQiita', }}/> ); } })
  9. Listදࣔ:&ॳظԽ // هࣄҰཡϦετ var ReactQiitaList = React.createClass({ getInitialState: function() {

    return { items: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }), loaded: false, }; }, componentDidMount: function() { this.fetchData(); //σʔλͷऔಘʢޙड़ʣ },
  10. ListView:)શମඳը render: function() { if (!this.state.loaded) { // ಡΈࠐΈϏϡʔͷඳըʢࠓճ͸આ໌লུʣ return

    this.renderLoadingView(); } return ( <ListView dataSource={this.state.items} renderRow={this.renderItem} //֤ߦͷඳըϝιουΛࢦఆ style={styles.listView}/> ); },
  11. ListView:)ߦͷඳը ஫:"TouchableWithoutFeedback͸̎ͭҎ্ͷࢠΛ௚Լʹ࣋ͯͳ͍ renderLoadingView: function() { /*লུ*/ }, renderItem: function(item, sectionID,

    rowID) { return ( <TouchableWithoutFeedback onPress={() => this.onPressed(item)}> // Πϕϯτݕ஌ <View style={styles.container}> <Image source={{uri: item.user.profile_image_url}} style={styles.thumbnail}/> <View style={styles.rightContainer}> <Text style={styles.title}>{item.title}</Text> <Text style={styles.name}>{item.user.id}</Text> </View> </View> </TouchableWithoutFeedback> ); },
  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(); },
  13. ListView:)Πϕϯτͷॲཧ iOSͰͷViewؒͷભҠ͸props.navigatorͷpush,4popϝιουͳͲ ͕࢖͑Δ //ηϧͷλονΠϕϯτ onPressed: function(item) { this.props.navigator.push({ title: item.title,

    component: ReactQiitaItemView, passProps: { url: item.url } }) },
  14. WebView // هࣄӾཡ༻ͷWebView var ReactQiitaItemView = React.createClass({ render: function() {

    return ( <WebView url={this.props.url}/> ) } });
  15. ελΠϧͷهड़ // ֤छσβΠϯཁૉɺҰ෦ൈਮ var styles = StyleSheet.create({ navigator: { flex:

    1 }, container: { flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#FFFFFF', }, }
  16. ىಈ࣌ΤϯτϦϙΠϯτ AppRegistry.registerComponent('ReactQiita', () => ReactQiitaNavigator);

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

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

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

    }] subscribeNext:^(NSString *newName) { NSLog(@"%@", newName); }];
  20. ReactNa'veͷίί͕ྑ͍ • UIKitϕʔεʹίʔυͰϏϡʔΛهࡌ͢ΔΑΓ΋ָ • xibΑΓ΋هड़͕ʢࠓͷͱ͜Ζʣָ • Reac-veͳهड़͕ඇৗʹগͳ͍ίʔυྔͰॻ͚Δ

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

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

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

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