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样式,最终就会绘制出我们想要的效果。