角落处泄漏的涟漪效果，好像可按下按钮有一个 borderRadius

Question

在参考了这个文档可按下文档后，我正在使用可按下作为按钮

现在我想为按钮添加涟漪效果，但它无法正常工作。

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

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

Answer 1

没有什么对我有用，所以我自己解决了这个问题。

• pressable 应该被包裹在一个视图中
• 视图必须有边距而不是填充
• 边框半径必须在视图上而不是可按下
• 可压组件必须有填充而不是边距
• 然后通过android_ripple={{color: 'black', borderless: true}}添加波纹到可按下。

<View style={styles.buttonView}>
              <Pressable
                onPress={() => {}}
                android_ripple={{color: 'black', borderless: true}}
                style={styles.loginButton}>
                <Text style={styles.buttonText}>Login</Text>
              </Pressable>
            </View>

buttonView: {
    alignSelf: 'stretch',
    justifyContent: 'center',
    borderRadius: 10,
    elevation: 25,
    margin: 10,
  },
  loginButton: {
    height: 50,
    backgroundColor: '#0f4c75',
    padding: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    textTransform: 'uppercase',
    fontFamily: 'sans-serif-light',
  },

Answer 2

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

<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>