React Native：如何将阴影和边框半径应用于视图？

Question

有没有办法将shadowAND aborderRadius应用于View组件，阴影跟随圆角？

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

这显然是React Native 中一个古老的已知问题，可能不会在不久的将来得到修复。本期提出了一种解决方法，将两个View叠加，但没有给出代码示例。

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

是否有一个带有一些本机绑定伏都教的包可以解决这个问题？

还有其他解决方案吗？

我已经尝试过这个问题的解决方案，但它对视图不起作用，borderRadius 道具不起作用并触发警告，建议将其嵌套在style道具中。

Answer 1

您可以使用此工具为 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',
},
});

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

Answer 2

是的，这就是他们的意思：

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>