您的位置:首页 > Web前端 > React

react native声明组件的两种方式

2015-11-27 10:25 597 查看

react native声明组件的两种方式,其中componentWillMount和construtor的作用是一样,都是渲染页面之前做一些业务逻辑。

方式一:

var ShopIndex = React.createClass({
componentWillMount:function(){
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: function() {
return (
<View style={styles.container}>
<ViewPagerUI/>
<GoodsTab/>
</View>
);
}
});


方式二:

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>
);
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  component