react-native - react native : how to apply shadow and borderRadius to a View?

Question

有没有办法将 shadow 和 borderRadius 应用到 View 组件，阴影在圆角后面？

目前，您必须设置 overflow: 'hidden' 才能使 borderRadius 工作，但这样做会消除阴影。

它显然是 React Native 中的 an old and known issue，在不久的将来可能不会被修复。本期提出了一种解决方法，将两个View叠加，但没有给出代码示例。

任何人都可以给出这个建议解决方案的代码示例吗？它会跟随圆角吗(我怀疑)？

是否有带有native binding voodoo doing the trick的软件包？

还有其他解决方案吗？

我已经尝试过 this question 的解决方案，但它对 View 不起作用，borderRadius Prop 不起作用并触发警告，建议将其嵌套在 style Prop 中。

Answer 1

您可以使用 this tool 为 android 和 iOS 生成阴影参数。
诀窍是制作两个 View ，一个用于具有透明背景的阴影，另一个用于内容本身，它们都具有相同的 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',
},
});

本质上，这就是制作带有阴影和圆角的 View 所需要的，您还可以添加一些边距/填充和 flexbox 来制作漂亮的 float 卡片。