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

react

react-native 自定义组件，通过继承实现，更全面、细致的功能！！

这里描述一下我所接触的，通过继承来实现功能：

定义一个父类组件，然后在组件中并不做View的绘制和显示。只提供一些工具方法 —— getSize() ，没有 render(){}方法！

定义完之后，定义个新的组件来extends继承BaseComponent。

然后在BaseDialog组件中进行使用调用，是这个样子的。直接就像在本组件中定义过一样使用，this.getSize() —等同— this.方法名字(xx)

还有更好的使用方式，比如在父类定义一个控制最外层View展示的位置的方法_getContentPosition() 来控制样式。

然后在子类中，可以通过重写父类的方法_getContentPosition()方法，来灵活控制自定义的组件的展示样式！

写到这里，其实就会有很多的疑问？ BaseComponent 没有方法render() 那么新定义的组件BaseDialog中的render()方法应该如何去实现，应该是什么样子的？？其实和平时写一个普通的组件是一样的。比如这里写一个通用的方式。

看到了吗？render()方法还是非常的普通，只是在方法中藏匿一个空的方法 —— renderContent() 。它是用来干嘛的呢？这就要引出第二个功能 —— 实现预留绘制View-UI的功能

怎么实现以继承方式，复用父类已经定义或者已经实现好的各种方法、工具啥的。来实现一个我们想要的组件呢？就是上面的预留的问题！

这里，我们继续继承BaseDialog组件来解释。

然后重写父类预留的空方法renderContent()，并在方法中自定义我们需要的UI样式，最终就会绘制出我们想要的效果。