基础
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" 初始化的时候
语言
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="菜鸟教程" site=" http://www.jser.com" />,
document.getElementById('example')
);
State
下实例中创建了 LikeButton 组件，getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 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>我。点我切换状态。
</p>
);
}
});
React.render(
<LikeButton />,
document.getElementById('example')
);
npm install -g create-react-app
注意：目前npm5（发文时最新版本为5.0.4）存在安装新库时会删除其他库的问题，导致项目无法正常运行。请尽量使用yarn代替npm操作。
两个tabbar 都可以
https://github.com/happypancake/react-native-tab-navigator
文档摘要
仅仅使用props 和基础的Text 、Image 以及View组件，你就已经足以编写各式各样的UI组件了
tabbar
navgationBarIOS
项目问题
全局变量方案
生命周期
https://race604.com/react-native-component-lifecycle/
类的布局
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.jianshu.com/p/1293bb8ac969
相关参考
http://www.jianshu.com/p/b88944250b25
持续更新.....
