react native聲明組件的兩種方式

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>
    );
  }
}