Slide 1
Slide 1 text
Na#veApp։ൃऀ͔ΒΈͨ
ReactNa#ve
Slide 2
Slide 2 text
Who$am$I?
• ։ൃຊ෦ࣥߦһࡶ༻
• iOS,&Android,&Infrastructure,&Web
• Golangڭ
• ਖ਼࠲
• ࠷ۙؾʹͳΔͷ:&MQTT
Slide 3
Slide 3 text
ωΠςΟϒ։ൃͰͷελϯε
• ωΠςΟϒΞϓϦ֤Pla%orm͝ͱʹ࠷దԽࣗͰΔ
• ΫϩεϓϥοτϑΥʔϜʹເݟͳ͍
Slide 4
Slide 4 text
ReactNa'veͱ
• ReactjsϕʔεͰωΠςΟϒΞϓϦ։ൃΛߦ͏ͨΊͷπʔϧηο
τɻ
• Not+only+for+DOM,+But+for+any+Views.
• 03/27ʹɺiOS͚͕ϦϦʔε
Slide 5
Slide 5 text
ViewͷநԽ
• Na$veଆͰjsx*<=>*Na$veͷViewͷมΛߦ͏
• iOSͰjsxΛUIKitʹม͍ͯ͠Δ༷
• ྨࣅ:*ReactCanvas*(jsx*<=>*Canvas)
Slide 6
Slide 6 text
ReactNa'veΛݟͯΈΑ͏
QiitaͷReactjsλάϦʔμʔΛ࡞ͬͯΈΔ
Slide 7
Slide 7 text
֤छϞδϡʔϧͷϩʔυ
'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";
Slide 8
Slide 8 text
φϏήʔγϣϯͷఆٛ
• ΞϓϦ͕࠷ॳʹىಈ͢ΔViewControllerͱͯ͠ࠓճNaviga0on
Λͬͨ
// ϕʔεͷUINavigationControllerʹ֘͢Δͷ
var ReactQiitaNavigator = React.createClass({
render: function() {
return (
);
}
})
Slide 9
Slide 9 text
Listදࣔ:&ॳظԽ
// هࣄҰཡϦετ
var ReactQiitaList = React.createClass({
getInitialState: function() {
return {
items: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
loaded: false,
};
},
componentDidMount: function() {
this.fetchData(); //σʔλͷऔಘʢޙड़ʣ
},
Slide 10
Slide 10 text
ListView:)શମඳը
render: function() {
if (!this.state.loaded) {
// ಡΈࠐΈϏϡʔͷඳըʢࠓճઆ໌লུʣ
return this.renderLoadingView();
}
return (
);
},
Slide 11
Slide 11 text
ListView:)ߦͷඳը
:"TouchableWithoutFeedback̎ͭҎ্ͷࢠΛԼʹ࣋ͯͳ͍
renderLoadingView: function() { /*লུ*/ },
renderItem: function(item, sectionID, rowID) {
return (
this.onPressed(item)}> // Πϕϯτݕ
{item.title}
{item.user.id}
);
},
Slide 12
Slide 12 text
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();
},
Slide 13
Slide 13 text
ListView:)Πϕϯτͷॲཧ
iOSͰͷViewؒͷભҠprops.navigatorͷpush,4popϝιουͳͲ
͕͑Δ
//ηϧͷλονΠϕϯτ
onPressed: function(item) {
this.props.navigator.push({
title: item.title,
component: ReactQiitaItemView,
passProps: { url: item.url }
})
},
Slide 14
Slide 14 text
WebView
// هࣄӾཡ༻ͷWebView
var ReactQiitaItemView = React.createClass({
render: function() {
return (
)
}
});
Slide 15
Slide 15 text
ελΠϧͷهड़
// ֤छσβΠϯཁૉɺҰ෦ൈਮ
var styles = StyleSheet.create({
navigator: {
flex: 1
},
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
}
Slide 16
Slide 16 text
ىಈ࣌ΤϯτϦϙΠϯτ
AppRegistry.registerComponent('ReactQiita', () => ReactQiitaNavigator);
Slide 17
Slide 17 text
͜Ε·ͰͷNa#ve։ൃͱͷൺֱ
• Reac&veʹॻ͘ํ๏RAC͘Β͍͔͠ແ͔ͬͨ
• RAC*...*Reac&veCocoa
Slide 18
Slide 18 text
Reac%veCocoaͱͷൺֱ
• ReactNa(veॻ͖ํ͕γϯϓϧ(ޙड़)
• Na(veίʔυͱͷϒϦοδΛ࡞͢Δඞཁ͕͋Δ
• iOSඪ४ͱൺͯɺσβΠϯཁૉͷهड़ָ͕
• Viewࣗମͷॻ͖ํָͩͱࢥ͏͕͜Ε·ͩϏϡʔ͕খ͍͞
͔Βͩͱࢥ͏
Slide 19
Slide 19 text
RACͷॻ͖ํ
ͷมߋΛݕ͢Δ͚ͩͰԼهͷΑ͏ͳهड़ɺ
[[RACObserve(self, username)
filter:^(NSString *newName) {
return [newName hasPrefix:@"j"];
}]
subscribeNext:^(NSString *newName) {
NSLog(@"%@", newName);
}];
Slide 20
Slide 20 text
ReactNa'veͷίί͕ྑ͍
• UIKitϕʔεʹίʔυͰϏϡʔΛهࡌ͢ΔΑΓָ
• xibΑΓهड़͕ʢࠓͷͱ͜Ζʣָ
• Reac-veͳهड़͕ඇৗʹগͳ͍ίʔυྔͰॻ͚Δ
Slide 21
Slide 21 text
ReactNa'veͷίί͕μϝ
• fetchͳͲ͕ಠ࣮ࣗͬΆ͍ͷͰnpmͷࢿ࢈͕׆͔ͤΔ͔
• ݁ہUIKitͷֶशͷ্ʹReactNa1veͷಠࣗίϯϙʔωϯτͷֶ
श͕ඞཁʹͳΔ
• na1veͷϒϦοδRCTBridgeModuleʹै͏
Slide 22
Slide 22 text
࡞ͬͯͷײ
• UIKitͱ͍͏͔iOS)SDKΒͳ͍ͱ࡞Εͳ͍
• ͦͷ্ʹReactjsͱReactNa2veͷ͕ࣝඞཁ
• ݸਓతʹReac2veͳna2veΞϓϦ͜Ε͕Ұ൪࡞Γ͍͢ͱࢥ
͏
• iOSॻ͚ͯReactjs͔͚ΔਓҎ֎Θͳ͍ํ͕ྑͦ͞͏
• ܶతʹ։ൃΛϥΫʹ͢ΔͷͰͳ͍
Slide 23
Slide 23 text
࠷ޙʹ
• ReactNa(veΫϩεϓϥοτϑΥʔϜͷͨΊͷΈ͡Όͳ͍
ʢͱࢥ͍ͬͯΔʣ
• Reac(veͷจ຺Λ࣋ͪࠐΈͯ͘͘͢͠ΕΔSDK
• ֤ϓϥοτϑΥʔϜͱReactͷ͕ࣝ͋ΕΑΓΑ͍։ൃ͕Մೳ
Slide 24
Slide 24 text
ָ͠Α͏ͱࢥ͏ͳΒ
(Java|Swi))
ॻ͖·͠ΐ͏