reactjs - 波纹效果在角落泄漏,好像可按下按钮有一个borderRadius
问题描述
参考此文档后,我将 Pressable 用于按钮
现在我想为按钮添加涟漪效果,但它无法正常工作。
<Pressable
android_ripple={{color: 'red', borderless: false}}
style={{backgroundColor: 'blue',borderRadius : 10}}>
<Text style={{alignSelf: 'center'}}>Button</Text>
</Pressable>
如果按钮有半径,则波纹效果没有边框半径。波纹效果角超出弯曲半径看起来很尴尬。
解决方案
没有什么对我有用,所以我自己解决了这个问题。
- 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',
},
更新:- 固定纹波泄漏的浮动可压组件
<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>
推荐阅读
- excel - Excel 排序和过滤中断公式
- java - Android Studio“尚未附加片段”
- javascript - 当我选择文件上传时,react-native-webview 在 Android 上崩溃
- java - 尝试访问已加载实体的集合时发生 LazyInitializationException
- sql - 简化相关嵌套子查询
- reactjs - 使当您单击块内的项目时,会出现另一个块(每个块都有自己的)
- c++ - VSCode 语法错误突出显示不适用于 C++ 代码
- docker - Docker 容器构建失败:“exec:\”flask\”:$PATH 中找不到可执行文件”:未知
- xml - 使用 XSLT 将 XML 拆分为多个文件的问题
- c - 在返回布尔值的方法中循环