Question

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

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

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

有人可以提供此建议解决方案的代码示例吗？它会跟随圆角（我怀疑它）吗？

是否包含一些native binding voodoo doing the trick？

还有其他解决方案吗？

我已经尝试了来自this question的解决方案，但它不适用于View，borderRadius道具不起作用并触发警告，建议将其嵌套在style道具中。

Answer 1

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

const shadowsStyling = {
    width: 100,
    height: 100,
    shadowColor: "#000000",
    shadowOpacity: 0.8,
    shadowRadius: 2,
    shadowOffset: {
      height: 1,
      width: 0
    }
}

<View styles={shadowsStyling}>
   <View styles={{width: '100%', height: '100%', borderRadius: 10}} />
</View>

Answer 2

您可以使用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,
},
});

从本质上讲，这是制作带有阴影和圆角的视图所需要的，还可以添加一些边距/边距和flexbox来制作一张漂亮的浮动卡。

React Native：如何将shadow和borderRadius应用于视图？

2 个答案: