(1)单一组件的生命周期再学习
- **一 ( 组件初始化 )： **
- (1) getDefaultProps：获取初始的配置参数（获取默认的props）
- (2) getIniticalState：初始化组件状态（初始化state）（在组件挂载之前会调用一次）
- (3) componentWillMount：组件即将被渲染和装载
- (4) render：组件渲染
- (5) componentDidMount：组件装载完毕
- 二 ( 组件运行中 )：state状态改变会触发（6）
- (6) shouldComponentUpdate：是否需要更新组件（一般从性能考虑，用该方法控制：状态变化的弧度，数量等。从而来判断是否马上更新，还是积累到一定的量在更新，注意：在shouldComponentUpdate方法中不要用setState方法来修改状态）
- (7) componentWillUpdate：组件即将要更新
- (8) render：渲染
- (9) componentDidUpdate：组件已经完成更新
- 外部props改变：
- (10) componentWillReceiveProps：组件即将接受传值
- 三 ( 卸载组件 )：
- (11) onMount
-
(12) componentWillOnmount：组件即将被卸载
react-native生命周期
(2)声明组件的两种方式
react native声明组件的两种方式,其中componentWillMount和construtor的作用是一样，都是渲染页面之前做一些业务逻辑。
- (1) var ShopIndex = React.createClass( { } )
var ShopIndex = React.createClass({
render() {
return (
<View style={styles.container}>
<ViewPagerUI/>
<GoodsTab/>
</View>
);
}
});
- (2) class ShopIndex extends Component{ }
class ShopIndex extends Component{
constructor(props) {
super(props);
this.props.navComponent.setNavItems({
rightItem: {
component: (
<TouchableOpacity style={[styles.navItem, {marginRight: 7}]}>
<Image style={{width: 20, height: 20}} source={{uri: shareImg}}/>
</TouchableOpacity>
),
event: function() {
this.props.navigator.push({
title: '购物车',
component: <Cart/>
});
}.bind(this)
}
});
}
render() {
return (
<View style={styles.container}>
<ViewPagerUI/>
<GoodsTab/>
</View>
);
}
}
(3)通过修改state中的状态项，然后用三目运算符，去控制styles,source等任何的属性的选择。
例子：
<Image
style={styles.sLogo}
source={ this.state.up ? require('../../love.png') : require('../../loveup.png') }
>
</Image>
(4) React-Navigation导航器
- (1) 安装
npm install react-navigation -save
- (2) 为了方便Android、iOS统一管理，在根目录下新建app目录，将所有js文件，写在这个文件夹中。
