React Native:如何将阴影和borderRadius应用于视图？
React Native:如何将阴影和borderRadius应用于视图？
提问于 2018-06-02 06:58:14
有没有一种方法可以将shadow和borderRadius应用于View组件，使阴影跟随圆角？
当前，您必须为borderRadius设置overflow: 'hidden'才能工作，但这样做会移除阴影。
它显然是React Native中的an old and known issue，可能在不久的将来不会被修复。在此问题中提出了一种解决方法，即叠加两个视图，但没有给出代码示例。
有人能给出这个提议的解决方案的代码示例吗？它会沿着圆角走吗(我怀疑)？
有没有带native binding voodoo doing the trick的套餐？
有没有其他的解决方案？
我已经尝试了this question的解决方案，但它不适用于视图，borderRadius属性不起作用，并触发一个警告，建议将其嵌套在style属性中。
回答 2
Stack Overflow用户
回答已采纳
发布于 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来制作一个很好的浮动卡片。
Stack Overflow用户
发布于 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50651924
复制相关文章
相似问题