react-native 继承,实现自定义组件

react-native 自定义组件,通过继承实现,更全面、细致的功能!!
这里描述一下我所接触的,通过继承来实现功能:

  • 1,复用工具方法,提高代码的复用性;
  • 2,重写父类空置的返回View-UI方法,实现预留绘制View-UI的功能;

继承 :复用工具方法,提高代码的复用性

在这里插入图片描述
定义一个父类组件,然后在组件中并不做View的绘制和显示。只提供一些工具方法 —— getSize() ,没有 render(){}方法!
定义完之后,定义个新的组件来extends继承BaseComponent
在这里插入图片描述
然后在BaseDialog组件中进行使用调用,是这个样子的。直接就像在本组件中定义过一样使用,this.getSize() —等同— this.方法名字(xx)
在这里插入图片描述
还有更好的使用方式,比如在父类定义一个控制最外层View展示的位置的方法_getContentPosition() 来控制样式。
在这里插入图片描述
然后在子类中,可以通过重写父类的方法_getContentPosition()方法,来灵活控制自定义的组件的展示样式!
子类重写父类方法

写到这里,其实就会有很多的疑问? BaseComponent 没有方法render() 那么新定义的组件BaseDialog中的render()方法应该如何去实现,应该是什么样子的??其实和平时写一个普通的组件是一样的。比如这里写一个通用的方式。
在这里插入图片描述
看到了吗?render()方法还是非常的普通,只是在方法中藏匿一个空的方法 —— renderContent() 。它是用来干嘛的呢?这就要引出第二个功能 —— 实现预留绘制View-UI的功能

继承 :实现预留绘制View-UI的功能

怎么实现以继承方式,复用父类已经定义或者已经实现好的各种方法、工具啥的。来实现一个我们想要的组件呢?就是上面的预留的问题!
这里,我们继续继承BaseDialog组件来解释。
在这里插入图片描述
然后重写父类预留的空方法renderContent(),并在方法中自定义我们需要的UI样式,最终就会绘制出我们想要的效果。
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值