波纹效果在角落处泄漏，就好像 Pressable 按钮具有 borderRadius

Question

在参考了这个文档后，我将 Pressable 用于按钮 pressable docs

现在我想给按钮添加波纹效果，但它不能正常工作。

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

Answer 2

对我没有任何帮助，所以我自己解决了这个问题。

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

<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',
  },

更新：- 固定纹波泄漏的浮动可压组件

<View style={{
                position: 'absolute',
                bottom: 250,
                borderRadius: 50,
                overflow: 'hidden',
                alignSelf: 'center'
            }}>
                <Pressable
                    style={{
                        height: 60,
                        width: 60,
                        borderRadius: 50,
                        backgroundColor: 'red',
                        justifyContent: 'center',
                        alignItems: 'center',
                        elevation: 4,
                    }}
                    android_ripple={{
                        color: 'black',
                    }}
                    onPress={() => { console.log('om') }}>
                    <Text>O</Text>
                </Pressable>
            </View>

Answer 3

事实证明，其他解决方案并未涵盖所有边缘情况...我需要将视图包装 2 次以在 iOS 上管理 elevation 和 shadow。（按钮也处于绝对位置）。

export const PNFloatingButton = ({ children, ...props }) => {
    return (
        <View style={thisStyles.shadow}>
            <View style={thisStyles.parentContainer}>
                <Pressable style={thisStyles.button}
                           android_ripple={{ borderless: false, color: "#0F0" }}>
                    <Text>Button</Text>
                </PNPressable>
            </View>
        </View>
    )
}

const thisStyles = StyleSheet.create({
    shadow: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.4,
        shadowRadius: 4,
        width: 56,
        height: 56,
        position: 'absolute',
        elevation: 2,
        right: 0,
        bottom: 0,
    },
    button: {
        padding: 4,
        backgroundColor: "#F00",
    },
    parentContainer: {
        // Pressable has issues with borderRadius on the ripple on android
        overflow: "hidden",
        borderRadius: 40,
    },
})

波纹效果在角落处泄漏，就好像 Pressable 按钮具有 borderRadius

ripple effect leaking at corners as if Pressable button has a borderRadius

reactjs

react-native

react-native-android

react-native-ios

react-component