React Native 阴影为卡片内的所有内容添加阴影答案

【问题标题】：React Native shadow adds shadow to everything inside cardReact Native 阴影为卡片内的所有内容添加阴影
【发布时间】：2019-10-29 17:29:17
【问题描述】：

我正在尝试为 React Native 生成一个等效的盒子阴影。

这是我的代码：

<View style={{
    shadowColor: "#000",
    shadowOffset: {
        width: 0,
        height: 5,
    },
    shadowOpacity: 1,
    shadowRadius: 5,
    elevation: 5,
}}
>
    <View styleName={"card promocard cardsize"} style={{
        marginBottom: this.state.promoBottom, marginRight: this.state.promoRight,
    }}>
        <View styleName="promo-name" style={{ backgroundColor: this.rand }}>
            <View styleName="promo-name-child">
                <Image style={{ borderRadius: 50, resizeMode: "contain", backgroundColor: "#FFF" }} styleName="promocard-logo-img" source={{ url: this.props.promo.merchant.logo }} />
                <Text style={{ color: "#fff" }} styleName="promo-name-text">{this.props.promo.merchant.name}</Text>
            </View>
        </View>
        <View styleName="promo-inner-card">
            <Image styleName="promo-main-img" source={{ url: this.props.promo.photo }} />
            <View>
                <View styleName="promo-title">
                    <Text styleName="promo-title-text">{this.props.promo.title}</Text>
                </View>
                <View styleName="promo-desc">
                    <Text styleName="promo-desc-text">{this.props.promo.text}</Text>
                </View>
            </View>
        </View>
    </View>
</View>

与其在矩形周围正确生成样式（即 330 x 175），不如将阴影应用到框内的每个元素。

我想要这样的东西：

https://ethercreative.github.io/react-native-shadow-generator/

我一直在抓狂，因为我看到的每个示例看起来都与我在顶级视图中的代码相似，但我的所有文本和视图内的图像都出现了阴影。

【问题讨论】：

标签： css react-native

【解决方案1】：

通过添加背景颜色解决了这个问题。

背景颜色：“#FFF”

【讨论】：