端端舝

React Native匹
嶱逃允月穴伙民皿仿永玄白巧奈丞失皿伉
Masayuki Iwai @myb
#iosdcrc

+Redux
React Native匹
嶱逃允月穴伙民皿仿永玄白巧奈丞失皿伉
Masayuki Iwai @myb
#iosdcrc

赻撩畿賡
旂凝捇倷 @myb?
?
乒田奶伙?失皿伉弗奈扑亦件?巨件斥瓦失?
@Unity Technologies Japan?
公木眕ゴ反Web犯扒奶件?嶱逃﹜Flash戊件
氾件汁秶釬﹜iOS失皿伉﹜必奈丞秶釬卅升
翍𤩸卞☆uGUI匹反元戶月 Unity UI犯扒奶件
及諒褪𤩸★

Unity Meetup
? Unity交奈扒奈及凶戶及奶矛件玄?
失皿伉ㄗ白伙React Nativeㄘ
? 暫湔及Unity庾�頗荽午中丹?
奶矛件玄ロ�扔奶玄互矛奈旦
? 2016爛10堎iOS/Android伉伉奈旦
? 偞�?皿伕玄正奶皿秶釬廣2仳堎﹜?
iOS灍蚾+扔奈田奈API匹廣3仳堎﹜?
Android灍蚾+犯田永弘匹廣1仳堎

React Native
妸蚚及乒民矛奈扑亦件

媆反2016爛場螹＃
? 穴伙民皿仿永玄白巧奈丞?ㄗiOS/Androidㄘ
? 生奶氾奴皮及由白巧奈穴件旦﹜𠸎厥切中中紱釬覜?
? 嶱逃反屾�杅ㄗ灍斮1�#ㄘ
奶矛件玄失皿伉ㄗUnity Meetupㄘ及秶釬卞丐凶勻化
白伊奈丞伐奈弁毛𨈘�＃

Cordova﹜Titanium卅升手𨈘�?
ㄗ手切欠氏Unity手ㄘ
? Cordova - 支反曰WebView矛奈旦卅及匹＃
? Titanium - 眕ゴ霜俴勻化凶仃升﹜左伐戊件覜丐月＃
? Unity - 左奈田奈旦矢永弁卅奻﹜UI匹反生奶氾奴皮及由白巧奈穴件旦反堤卅中
? /* Xamarin.Forms反仇及午五湔婓毛眭日卅井勻凶? */

React Native
? JavaScriptCore奻匹�釬仄﹜生奶氾奴皮及申亙奈毛汜傖?
↙ 勾引曰幻廿生奶氾奴皮?
? 戊奈玉及湮圉毛僕衄仄勾勾﹜跪皿仿永玄白巧奈丞㻢𨃨及UI卞𨃨�匹五月?
? Facebook Group App卅升及灍�互丐月?
? Facebook及OSS匹假陑覜互丐月?
? 仇木井日霜俴曰公丹ㄐ?

介勻仁曰React Native
ㄗ+Reduxㄘ

React
? Facebook庨及JavaScript仿奶皮仿伉?
ㄗ?77.6kㄘ?
https://reactjs.org
? 戊件禾奈生件玄矛奈旦匹UIㄗ申亙奈ㄘ毛�慷
? JSX - 旦弁伉皿玄笢卞DOM匹申亙奈毛�扴
? props午state卞價勿中化render憝杅匹
申亙奈毛鏡賒
? props支state互劐趙允月午﹜赻�腔卞申亙奈
及船煦及心互婬鏡賒今木月
import React from 'react'
class App extends React.Component {
state = {
label: 'It works!',
}
render() {
return (
<div className="container">
<div className="content">
<h1 className="name">
{this.props.name}
</h1>
<p className="label">
{this.state.label}
</p>
</div>
</div>
)
}
}

Redux
? 袨颷奪燴及凶戶及JavaScript?
仿奶皮仿伉ㄗ?34.6kㄘ?
http://redux.js.org
? 犯奈正及霜木毛1源砃卞仄﹜?
袨颷及悵厥午載陔毛摩廣?
↙ 恚螝卅失皿伉弗奈扑亦件及ⅲ斮午?
﹛ 丟件氾瓜件旦俶及砃奻
? Swift賜卞云中化手ReSwift午仄化灍蚾
今木月卅升﹜蛁醴及失奈平氾弁民乓
Store
UI?
ㄗ申亙奈ㄘ
Action
Reducer
Dispatch
載陔
奶矛件玄
載陔今木凶State
State?
ㄗ袨颷ㄘ

React+Redux
? react-redux - Redux及React田奶件犯奴件弘ㄗ鼠宒ㄘ?
https://github.com/reactjs/react-redux
? React反戊件禾奈生件玄及袨颷ㄗprops午stateㄘ卞方勻化申亙奈毛鏡賒允月?
及匹﹜眈俶互謎中
? Container Component午Presentational Component?
- Container Component - Redux午窣觓允月?
ㄗStore井日State毛腕凶曰﹜Action毛dispatch允月ㄘ?
- Presentational Component - 眻諉Redux卞憝迵六內﹜props磊蚕匹及心?
犯奈正毛忳仃龰月ㄗ申亙奈及鏡賒卞�癩ㄘ

React Native
? React毛蚚中化生奶氾奴皮失皿伉弗奈扑亦件毛釬傖允月凶戶及仿奶皮仿伉?
ㄗ?54.2kㄘ?
https://facebook.github.io/react-native/
? iOS/Android卞�𡛟?
Microsoft庨react-native-windows匹WindowsㄗUWP/WPFㄘ卞手�𡛟
? JavaScriptCore奻匹�釬仄﹜生奶氾奴皮及申亙奈毛汜傖
? 㻢𨃨匹View﹜Text﹜Image﹜ScrollView卅升及戊件禾奈生件玄毛枑鼎

React Native
state = {
label: 'It works!',
}
render() {
return (
<div className="container">
<div className="content">
<h1 className="name">
{this.props.name}
</h1>
<p className="label">
{this.state.label}
</p>
</div>
</div>
)
}
}
import { ScrollView, View, Text } from 'react-
native'
state = {
label: 'It works!',
}
render() {
return (
<ScrollView style={styles.container}>
<View style={styles.content}>
<Text style={styles.name}>
{this.props.name}
</Text>
<Text style={styles.label}>
{this.state.label}
</Text>
</View>
</ScrollView>
)
}
}

React Native?
仇仇互謎中ㄐ

戊件禾奈生件玄矛奈旦互謎中
? 戊件禾奈生件玄�g弇匹氾旦玄匹五月
? 嶱逃互筳氏匹恚螝卞卅勻凶窒煦毛?
摽井日匹手煦褩仄支允中
? 白央奶伙靡匹皿仿永玄白巧奈丞仍午
卞戊件禾奈生件玄毛掂心煦仃日木月?
↙ ㄗ瞰ㄘFoo.ios.js午Foo.android.js
import { ScrollView, View, Text } from
'react-native'
state = {
label: 'It works!',
}
render() {
return (
<View style={styles.content}>
<Text style={styles.name}>
{this.props.name}
</Text>
<Text style={styles.label}>
{this.state.label}
</Text>
</View>
</ScrollView>
)
}
}

戊件禾奈生件玄矛奈旦互謎中
? 戊件禾奈生件玄�g弇匹氾旦玄匹五月
? 嶱逃互筳氏匹恚螝卞卅勻凶窒煦毛?
摽井日匹手煦褩仄支允中
? 白央奶伙靡匹皿仿永玄白巧奈丞仍午
卞戊件禾奈生件玄毛掂心煦仃日木月?
↙ ㄗ瞰ㄘFoo.ios.js午Foo.android.js
import { ScrollView } from 'react-native'
import ContentView from 'ContentView'
state = {
label: 'It works!',
}
render() {
return (
<ContentView
style={styles.content}
name={this.props.name}
label={this.state.label}
/>
</ScrollView>
)
}
}

Flexbox/旦正奶伙扑奈玄匹佷中籵曰及伊奶失它玄
? React Native及申亙奈及伊奶失它玄反?
Flexbox卞價勿仁
? Auto Layout午綃中﹜Web腔卅失皿
伕奈民匹伊旦禾件扑皮卅犯扒奶件互褫
夔
? 申亙奈及扽俶反旦正奶伙扑奈玄匹�扴?
- 伊奶失它玄卞憝允月扽俶?
ㄗflex, width, height, margin etc.ㄘ?
- ��腔卅扽俶?
ㄗborderWidth, opacity etc.ㄘ

Flexbox/旦正奶伙扑奈玄匹佷中籵曰及伊奶失它玄
? React Native及申亙奈及伊奶失它玄反?
Flexbox卞價勿仁
? Auto Layout午綃中﹜Web腔卅失皿
伕奈民匹伊旦禾件扑皮卅犯扒奶件互褫
夔
? 申亙奈及扽俶反旦正奶伙扑奈玄匹�扴?
- 伊奶失它玄卞憝允月扽俶?
ㄗflex, width, height, margin etc.ㄘ?
- ��腔卅扽俶?
ㄗborderWidth, opacity etc.ㄘ
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f5fcff',
},
label: {
fontSize: 30,
fontWeight: 'bold',
color: '#262729',
},
box: {
justifyContent: 'center',
alignItems: 'center',
width: 100,
height: 100,
backgroundColor: '#f1f3f4',
},
});

犯田永弘手仄支允中
? 婬申伙玉祥猁匹?+R匹jsbundle毛伉伕奈玉匹五月及匹ㄗ皮仿它扒覜�ㄘ﹜?
玄仿奶&巨仿奈互㜭??
↗犯田永弘申伙玉
? Chrome奻匹�仁React Native Debugger互葆扽?
↙ 皮伊奶弁禾奶件玄手�木月仄﹜旦正永弁玄伊奈旦手�日木月
? redux-logger毛妏丹午﹜Action卞方勻化劐載今木月ゴ摽及State毛�日木月

React Native�𡛟及由永弗奈斥手凶仁今氏
? 頄蜓卅JavaScript仿奶皮仿伉毛瞳蚚匹五月 - moment﹜numeral etc.
? 㻢𨃨匹枑鼎今木化中卅中辻夔匹手﹜弘弘月午湮萋由永弗奈斥互丐月?
↙ SFSafariViewController﹜iBeacon﹜Firebase etc.
? 卅仁化手﹜生奶氾奴皮乒斥亙奈伙毛��g卞釬木月?
↙ 郔輪react-native-safe-area午中丹乒斥亙奈伙毛釬勻凶?
https://github.com/miyabi/react-native-safe-area

? 戊件禾奈生件玄矛奈旦
? 佷中籵曰及伊奶失它玄
? 犯田永弘仄支允中
? 由永弗奈斥手凶仁今氏

勾引曰﹜React Native卅日
�仁手及毛婌仁釬木月ㄐ?

React Native?
仇仇互汁仿奶＃ㄐ

JavaScript斗尹及勾日心
? 倰及卅中岍賜?
- 午反中尹TypeScript支Flow互丐月?
- js白央奶伙及引引失用氾奈扑亦件毛袚樓匹五化?
噙腔卞民尼永弁匹五月Flow互中中覜元?
- 田奈斥亦件及瞎心磁歹六卞方勻化巨仿奈卞?
卅勻凶曰卅日卅井勻凶曰允月仇午手＃
? 赻蚕僅互詢允亢化中欠氏卅旦正奶伙匹𤩸仃
切扎丹?
- 嶱逃丟件田奈互�尹凶午五互陑饜?
- Airbnb互鼠嶱仄化中月旦正奶伙布奶玉毛?
矛奈旦卞eslint毛偞隅?
https://github.com/airbnb/javascript
state = {
label: 10000,
}
render() {
return (
<ContentView
/>
</ScrollView>
)
}
}

JavaScript斗尹及勾日心
? 倰及卅中岍賜?
- 午反中尹TypeScript支Flow互丐月?
- js白央奶伙及引引失用氾奈扑亦件毛袚樓匹五化?
噙腔卞民尼永弁匹五月Flow互中中覜元?
- 田奈斥亦件及瞎心磁歹六卞方勻化巨仿奈卞?
卅勻凶曰卅日卅井勻凶曰允月仇午手＃
? 赻蚕僅互詢允亢化中欠氏卅旦正奶伙匹𤩸仃
切扎丹?
- 嶱逃丟件田奈互�尹凶午五互陑饜?
- Airbnb互鼠嶱仄化中月旦正奶伙布奶玉毛?
矛奈旦卞eslint毛偞隅?
https://github.com/airbnb/javascript
type Props = {
name: string, // stringㄗnull支undefined反偝褫今木卅中ㄘ
};
type State = {
label: ?string, // stringㄗnull偝褫ㄘ
};
class App extends React.Component<Props, State> {
state = {
label: 10000, // ERROR!!
}
render(): React.Node {
return (
<ContentView
/>
</ScrollView>
)
}
}

田奈斥亦件失永皿互婌中
公及丹尹劐載手嗣中
? 仇及1爛圉匹手﹜0.26.0 ↙ 0.49.1ㄗ2017爛10堎政婓郔陔ㄘ
? 湮极及穴奶瓜奈田奈斥亦件失永皿反Breaking Changes毛漪氏匹中月?
- 妏勻化中月由永弗奈斥卞方勻化反申伙玉巨仿奈卞卅月仇午手丐月及匹﹜?
眻仄凶曰PR冞勻凶曰＃?
- 公及引引丟件氾瓜件旦今木內卞溫离今木月由永弗奈斥手手切欠氏丐月＃

翋猁卅戊件禾奈生件玄互磐�deprecated卞卅月
? Navigator - 0.44.3匹deprecated??
- NavigatorIOS反紹勻化中月互Android匹妏尹卅中?
- 鼠宒匹手react-navigationㄗreact-communityㄘ支native-navigation
ㄗAirbnbㄘ毛芢𠾴
? ListView - 0.48.0匹deprecated??
- FlatList﹜SectionList卞痄俴
? MapView - 0.44.3匹deprecated??
- react-native-mapsㄗAirbnbㄘ芢𠾴

謎仁手�仁手?
Facebook卞甡湔仄化中月
? 屾仄ゴ卞Apache Software Foundation互Facebook皿伕斥尼弁玄毛?
妏蚚輦砦卞仄化�觳卞卅勻化中凶?
- 仿奶本件旦及沭�互�觳卞卅勻化中凶互﹜珂゜丐日凶戶化MIT仿奶本件旦卞允月午?
逃桶今木化夫午假陑??
https://code.facebook.com/posts/300798627056246

React Nativeㄗ+Reduxㄘ
? 苤�耀卅皿伕母弁玄丐月中反民奈丞匹及穴伙民皿仿永玄白巧奈丞失皿伉嶱逃卞
郔羥?
? 傻ヽ嶲匹�仁手及互釬木月 - 皿伕玄正奶皿秶釬卞手?
? �耀互湮五仁卅勻化手旦弗奈伙反允月?
? 互＃伎〝午勾日心互堤化仁月?
? 勾日心毛�\曰埣尹化薉�月冗中ㄐ?

端端舝

React Native匹嶱逃允月穴伙民皿仿永玄白巧奈丞失皿伉

More Related Content

Similar to React Native匹嶱逃允月穴伙民皿仿永玄白巧奈丞失皿伉 (20)

Recently uploaded (9)

React Native匹嶱逃允月穴伙民皿仿永玄白巧奈丞失皿伉