基礎(chǔ)
react
http://learn.jser.com/react/react-tutorial.html
官方文檔
http://facebook.github.io/react-native/docs/getting-started.html
各種資源
https://github.com/reactnativecn
命令
- Run "npm install -g react-native-git-upgrade"
- Run "react-native-git-upgrade" 初始化的時(shí)候
語(yǔ)言
prop
var WebSite = React.createClass({
render: function() {
return (
<div>
<Name name={this.props.name} />
<Link site={this.props.site} />
</div>
);
}
});
var Name = React.createClass({
render: function() {
return (
<h1>{this.props.name}</h1>
);
}
});
var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
});
React.render(
<WebSite name="菜鳥(niǎo)教程" site=" http://www.jser.com" />,
document.getElementById('example')
);
State
下實(shí)例中創(chuàng)建了 LikeButton 組件炭菌，getInitialState 方法用于定義初始狀態(tài)梭依，也就是一個(gè)對(duì)象砚亭，這個(gè)對(duì)象可以通過(guò) this.state 屬性讀取麦到。當(dāng)用戶(hù)點(diǎn)擊組件，導(dǎo)致?tīng)顟B(tài)變化，this.setState 方法就修改狀態(tài)值，每次修改以后拱雏，自動(dòng)調(diào)用 this.render 方法，再次渲染組件
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? '喜歡' : '不喜歡';
return (
<p onClick={this.handleClick}>
你<b>{text}</b>我底扳。點(diǎn)我切換狀態(tài)铸抑。
</p>
);
}
});
React.render(
<LikeButton />,
document.getElementById('example')
);
npm install -g create-react-app
注意：目前npm5（發(fā)文時(shí)最新版本為5.0.4）存在安裝新庫(kù)時(shí)會(huì)刪除其他庫(kù)的問(wèn)題，導(dǎo)致項(xiàng)目無(wú)法正常運(yùn)行衷模。請(qǐng)盡量使用yarn代替npm操作鹊汛。
兩個(gè)tabbar 都可以
https://github.com/happypancake/react-native-tab-navigator
文檔摘要
僅僅使用props 和基礎(chǔ)的Text 、Image 以及View組件阱冶，你就已經(jīng)足以編寫(xiě)各式各樣的UI組件了
tabbar
navgationBarIOS
項(xiàng)目問(wèn)題
全局變量方案
生命周期
https://race604.com/react-native-component-lifecycle/
類(lèi)的布局
http://blog.csdn.net/fengyuzhengfan/article/details/52233582
UI
flex 布局
大話布局
http://blog.csdn.net/magneto7/article/details/70854472
http://weibo.com/1712131295/CoRnElNkZ?ref=collection&type=comment#_rnd1503470855218
tableview
http://www.reibang.com/p/1293bb8ac969
相關(guān)參考
http://www.reibang.com/p/b88944250b25
持續(xù)更新.....
