reactjs - 波纹效果在拐角处泄漏，好像“可按下”按钮具有边框一样

Question

在引用此文档pressable docs之后，我将Pressable用于按钮
现在，我想向按钮添加波纹效果，但是它无法正常工作。

      <Pressable
        android_ripple={{color: 'red', borderless: false}}
        style={{backgroundColor: 'blue',borderRadius : 10}}>
        <Text style={{alignSelf: 'center'}}>Button</Text>
      </Pressable>

如果按钮具有半径，则波纹效果没有边界半径。
波纹效果角超出弯曲半径看起来很尴尬。

Answer 1

您可以将pressable包装到View中，然后将borderRadius:10传递给View样式，并将overflow:'hidden'传递给它。

<View style={{ borderRadius: 10, overflow: 'hidden' }}>
    <Pressable
      android_ripple={{ color: 'red', borderless: false, }}
      style={{ backgroundColor: 'blue', borderRadius: 10 }}>
      <Text style={{ alignSelf: 'center' }}>Button</Text>
    </Pressable>
  </View>