记react-native-gesture-handler的组件使用

前面一直使用Swipable组件,现在由于想给android加入水波纹效果,不想单独封装一个组件(现在可以直接使用0.63.x的Pressable组件),加上可能更好的效果,

但是发现了很多问题

版本: 最新的1.7.0

  • 1.BaseButton、RectButton、BorderlessButton会导致style中设置border无效

  • 2.BaseButton在android上面有水波纹效果,但是ios上就没有按压效果了,可以使用RectButton加上activeOpacity和underlayColor

 //@ts-ignore
    BaseButton.defaultProps = {
      //@ts-ignore
      ...(BaseButton.defaultProps || {}),
      rippleColor: "#e0e0e0"
    };
    //@ts-ignore
    RectButton.defaultProps = {
      //@ts-ignore
      ...(RectButton.defaultProps || {}),
      underlayColor: '#e0e0e0',
      activeOpacity: 0.8,
    };

  • 3.在上面三个组件中无法使用系统的Touchable**组件,完全没反应,必须要替换为react-native-gesture-handler的对应的Touchable**组件

  • 4.在absolute布局中使用react-native-gesture-handler的对应的Touchable**组件,里面的内容不会显示

  • 5.在RectButton中使用react-native-gesture-handler的对应的Touchable**组件, 并且将Touchable**组件设置为disabled,正常的逻辑是该部分可以响应到RectButton上面,但是目前该部分完全无法点击

结论

react-native-gesture-handler的对应的Touchable**组件兼容性太差,得不偿失

为了给android加上水波纹效果,还是单独自己封装一个组件,ios/android分别使用不同的Touchable组件,也就是Pressable组件的实现过程