Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Native開発者から見たReactNative
y_matsuwitter
March 31, 2015
Programming
2
7.3k
Native開発者から見たReactNative
at Gunosy React Meetup
y_matsuwitter
March 31, 2015
Tweet
Share
More Decks by y_matsuwitter
See All by y_matsuwitter
DXD2021 Insights From CTOA reports.
ymatsuwitter
1
480
What is a Tech Company
ymatsuwitter
23
10k
The future from software technology
ymatsuwitter
2
3.1k
Cloud Native and Monorepo
ymatsuwitter
2
1.5k
2019-12-12 DMM meetup
ymatsuwitter
0
2k
A year of DMM reformation
ymatsuwitter
31
50k
Management And Software Engineering
ymatsuwitter
1
1k
About DMM.com new business development
ymatsuwitter
2
2.3k
DMM.comの改革とAWS
ymatsuwitter
3
7.6k
Other Decks in Programming
See All in Programming
io22 extended What's new in app performance
veronikapj
0
330
What's new in Jetpack / I/O Extended Japan 2022
star_zero
1
180
こそこそアジャイル導入しようぜ!
ichimichi
0
1.1k
How we run a Realtime Puzzle Fighting Game on AWS Serverless
falken
0
240
GoogleI/O2022 LT報告会資料
shinsukefujita1126
0
290
Cross Deviceチームにおけるスマートテレビアプリ開発ってどんな感じ?
cokaholic
0
120
VisualProgramming_GoogleHome_LINE
nearmugi
1
140
はてなフォトライフをECSに移行した話 / Hatena Engineer Seminar #20
cohalz
1
820
engineer
spacemarket
0
760
The strategies behind ddd – AdeoDevSummit 2022
lilobase
PRO
4
240
Scrum Fest Osaka 2022/5年で200人になったスタートアップの アジャイル開発の歴史とリアル
atamaplus
1
820
実践エクストリームプログラミング / Extreme Programming in Practice
enk
1
420
Featured
See All Featured
How GitHub Uses GitHub to Build GitHub
holman
465
280k
StorybookのUI Testing Handbookを読んだ
zakiyama
5
2.2k
GraphQLの誤解/rethinking-graphql
sonatard
27
6.5k
Statistics for Hackers
jakevdp
781
210k
Code Reviewing Like a Champion
maltzj
506
37k
The Brand Is Dead. Long Live the Brand.
mthomps
46
2.7k
Support Driven Design
roundedbygravity
86
8.5k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
126
8.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
Designing for Performance
lara
597
63k
The Invisible Customer
myddelton
110
11k
How GitHub (no longer) Works
holman
296
140k
Transcript
Na#veApp։ൃऀ͔ΒΈͨ ReactNa#ve
Who$am$I? • ։ൃຊ෦ࣥߦһࡶ༻ • iOS,&Android,&Infrastructure,&Web • Golangڭ • ਖ਼࠲ •
࠷ۙؾʹͳΔͷ:&MQTT
ωΠςΟϒ։ൃͰͷελϯε • ωΠςΟϒΞϓϦ֤Pla%orm͝ͱʹ࠷దԽࣗͰΔ • ΫϩεϓϥοτϑΥʔϜʹເݟͳ͍
ReactNa'veͱ • ReactjsϕʔεͰωΠςΟϒΞϓϦ։ൃΛߦ͏ͨΊͷπʔϧηο τɻ • Not+only+for+DOM,+But+for+any+Views. • 03/27ʹɺiOS͚͕ϦϦʔε
ViewͷநԽ • Na$veଆͰjsx*<=>*Na$veͷViewͷมΛߦ͏ • iOSͰjsxΛUIKitʹม͍ͯ͠Δ༷ • ྨࣅ:*ReactCanvas*(jsx*<=>*Canvas)
ReactNa'veΛݟͯΈΑ͏ QiitaͷReactjsλάϦʔμʔΛ࡞ͬͯΈΔ
֤छϞδϡʔϧͷϩʔυ '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";
φϏήʔγϣϯͷఆٛ • ΞϓϦ͕࠷ॳʹىಈ͢ΔViewControllerͱͯ͠ࠓճNaviga0on Λͬͨ // ϕʔεͷUINavigationControllerʹ֘͢Δͷ var ReactQiitaNavigator = React.createClass({
render: function() { return ( <NavigatorIOS style={styles.navigator} initialRoute={{ component: ReactQiitaList, title: 'ReactQiita', }}/> ); } })
Listදࣔ:&ॳظԽ // هࣄҰཡϦετ var ReactQiitaList = React.createClass({ getInitialState: function() {
return { items: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }), loaded: false, }; }, componentDidMount: function() { this.fetchData(); //σʔλͷऔಘʢޙड़ʣ },
ListView:)શମඳը render: function() { if (!this.state.loaded) { // ಡΈࠐΈϏϡʔͷඳըʢࠓճઆ໌লུʣ return
this.renderLoadingView(); } return ( <ListView dataSource={this.state.items} renderRow={this.renderItem} //֤ߦͷඳըϝιουΛࢦఆ style={styles.listView}/> ); },
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> ); },
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(); },
ListView:)Πϕϯτͷॲཧ iOSͰͷViewؒͷભҠprops.navigatorͷpush,4popϝιουͳͲ ͕͑Δ //ηϧͷλονΠϕϯτ onPressed: function(item) { this.props.navigator.push({ title: item.title,
component: ReactQiitaItemView, passProps: { url: item.url } }) },
WebView // هࣄӾཡ༻ͷWebView var ReactQiitaItemView = React.createClass({ render: function() {
return ( <WebView url={this.props.url}/> ) } });
ελΠϧͷهड़ // ֤छσβΠϯཁૉɺҰ෦ൈਮ var styles = StyleSheet.create({ navigator: { flex:
1 }, container: { flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#FFFFFF', }, }
ىಈ࣌ΤϯτϦϙΠϯτ AppRegistry.registerComponent('ReactQiita', () => ReactQiitaNavigator);
͜Ε·ͰͷNa#ve։ൃͱͷൺֱ • Reac&veʹॻ͘ํ๏RAC͘Β͍͔͠ແ͔ͬͨ • RAC*...*Reac&veCocoa
Reac%veCocoaͱͷൺֱ • ReactNa(veॻ͖ํ͕γϯϓϧ(ޙड़) • Na(veίʔυͱͷϒϦοδΛ࡞͢Δඞཁ͕͋Δ • iOSඪ४ͱൺͯɺσβΠϯཁૉͷهड़ָ͕ • Viewࣗମͷॻ͖ํָͩͱࢥ͏͕͜Ε·ͩϏϡʔ͕খ͍͞ ͔Βͩͱࢥ͏
RACͷॻ͖ํ ͷมߋΛݕ͢Δ͚ͩͰԼهͷΑ͏ͳهड़ɺ [[RACObserve(self, username) filter:^(NSString *newName) { return [newName hasPrefix:@"j"];
}] subscribeNext:^(NSString *newName) { NSLog(@"%@", newName); }];
ReactNa'veͷίί͕ྑ͍ • UIKitϕʔεʹίʔυͰϏϡʔΛهࡌ͢ΔΑΓָ • xibΑΓهड़͕ʢࠓͷͱ͜Ζʣָ • Reac-veͳهड़͕ඇৗʹগͳ͍ίʔυྔͰॻ͚Δ
ReactNa'veͷίί͕μϝ • fetchͳͲ͕ಠ࣮ࣗͬΆ͍ͷͰnpmͷࢿ࢈͕׆͔ͤΔ͔ • ݁ہUIKitͷֶशͷ্ʹReactNa1veͷಠࣗίϯϙʔωϯτͷֶ श͕ඞཁʹͳΔ • na1veͷϒϦοδRCTBridgeModuleʹै͏
࡞ͬͯͷײ • UIKitͱ͍͏͔iOS)SDKΒͳ͍ͱ࡞Εͳ͍ • ͦͷ্ʹReactjsͱReactNa2veͷ͕ࣝඞཁ • ݸਓతʹReac2veͳna2veΞϓϦ͜Ε͕Ұ൪࡞Γ͍͢ͱࢥ ͏ • iOSॻ͚ͯReactjs͔͚ΔਓҎ֎Θͳ͍ํ͕ྑͦ͞͏
• ܶతʹ։ൃΛϥΫʹ͢ΔͷͰͳ͍
࠷ޙʹ • ReactNa(veΫϩεϓϥοτϑΥʔϜͷͨΊͷΈ͡Όͳ͍ ʢͱࢥ͍ͬͯΔʣ • Reac(veͷจ຺Λ࣋ͪࠐΈͯ͘͘͢͠ΕΔSDK • ֤ϓϥοτϑΥʔϜͱReactͷ͕ࣝ͋ΕΑΓΑ͍։ൃ͕Մೳ
ָ͠Α͏ͱࢥ͏ͳΒ (Java|Swi)) ॻ͖·͠ΐ͏