Native開発者から見たReactNative

at Gunosy React Meetup

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)) ॻ͖·͠ΐ͏