react-native解决触摸事件冲突实现“完美”图库组件

导读：在组合使用多个支持手势操作的组件时经常会遇到触摸事件的冲突，导致某个控件无法正常工作，通过对PanResponder的接管，可以自由的操作子组件，在合适的时候让合适的组件接管触摸操作。这篇文章放了好久，一直没有放出来，惭愧，好像实在懒得写完了，就算给大家提供个思路吧。

最近参与一个react-native项目的开发，其中一项需求是需要有一个全屏查看图片的组件，最好是纯js实现，需要支持手势操作，如双击缩放，双指缩放等，能够支持滑动查看多张图片，且在图片较多的情况下有良好的性能。

在github上找了很久发现现有的组件各有各的问题，尤其是很多控件因为使用listview，所以首次加载时性能问题严重。

没有现成的解决方案那我们可以组合滑动查看图片的组件和支持单张图片缩放的组件。但是这里又会遇到一个问题,viewpager内嵌transformable-image的时候，viewpager的swiper功能会失效。

解决方法很简单，只要写个自定义组件，组合使用viewpager和transformable-image。对其中的PanResponder进行接管，判断当前的触摸事件需要由哪个子组件进行操作，把事件传递给该组件就可以。