有没有一种方法可以将shadow
和borderRadius
应用于View
组件,使阴影跟随圆角?
当前,您必须为borderRadius
设置overflow: 'hidden'
才能工作,但这样做会移除阴影。
它显然是React Native中的an old and known issue,可能在不久的将来不会被修复。在此问题中提出了一种解决方法,即叠加两个视图,但没有给出代码示例。
有人能给出这个提议的解决方案的代码示例吗?它会沿着圆角走吗(我怀疑)?
有没有带native binding voodoo doing the trick的套餐?
有没有其他的解决方案?
我已经尝试了this question的解决方案,但它不适用于视图,borderRadius属性不起作用,并触发一个警告,建议将其嵌套在style
属性中。
发布于 2020-07-16 07:12:16
您可以使用this tool为android和iOS生成阴影参数。
诀窍是创建两个视图,一个是透明背景的阴影视图,另一个是内容本身的视图,这两个视图都有相同的borderRadius
,所以一个基本的卡片将如下所示:
import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
export default () => {
return (
<View style={styles.cardShadow}>
<View style={styles.cardContainer>
<Text> Card Content </Text>
</View>
</View>
)
}
const styles = StyleSheet.create({
cardShadow: {
borderRadius: 16,
backgroundColor: 'transparent',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.22,
shadowRadius: 2.22,
elevation: 3,
},
cardContainer: {
backgroundColor: '#fff',
borderRadius: 16,
overflow: 'hidden',
},
});
在本质上,这是你需要做一个阴影和圆角的视图,你也可以添加一些页边距/填充和flexbox来制作一个很好的浮动卡片。
发布于 2018-06-02 07:05:22
是的,这就是他们的意思:
const shadowsStyling = {
width: 100,
height: 100,
borderRadius: 10,
shadowColor: "#000000",
shadowOpacity: 0.8,
shadowRadius: 2,
shadowOffset: {
height: 1,
width: 0
}
}
<View styles={shadowsStyling}>
<View styles={{width: '100%', height: '100%', borderRadius: 10, overflow: 'hidden'}} />
</View>
https://stackoverflow.com/questions/50651924
复制相似问题