react native声明组件的两种方式

最新推荐文章于 2023-08-23 15:41:52 发布

Honaf_Wu

最新推荐文章于 2023-08-23 15:41:52 发布

阅读量910

点赞数 1

分类专栏： React Native 文章标签： component

本文链接：https://blog.csdn.net/u010189462/article/details/50067027

版权

React Native 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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