阴影在本机反应中蔓延

Question

我正在开发一个 react native 项目。我想提供阴影来查看。但它就这样蔓延开来。

但我想要的是：

我得到了我需要在这里添加背景颜色的答案：https://taketo.site/solved 这实际上解决了我的问题，但只有当我从样式表中添加背景颜色时。但我的问题是我想从道具中获取背景颜色，因为每次渲染视图时，它不会有相同的背景颜色，它会有所不同。但是当我尝试从道具中提供背景颜色时，它又会像第一张图片一样给出阴影。这是我的代码：

组件文件：

import React from 'react';
import { View } from 'react-native';
import { styles } from './styles';

class ShadowCard extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <View
        style={[
          styles.card,
          {
            width: this.props.width,
            height: this.props.height,
            backgroundColor: this.props.backgroundColor,
          },
        ]}>
        {this.props.children}
      </View>
    );
  }
}

export default ShadowCard;

样式表文件：

import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
  card: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 2,
    elevation: 10,
    borderRadius: 12,
    margin: 12,
  },
});

那么我应该怎么做才能从道具中获取背景颜色并像第二张图片一样显示阴影？

Answer 1

你可能可以做这样的事情 -> 将您当前的购物车视图包裹在另一个视图中，并隐藏溢出以防止阴影显示在框上方，然后添加一些填充底部以在 android 和 ios 的框下方显示阴影，保持 shadowOffset 为当前状态

<View style={{ overflow: 'hidden', paddingBottom: 60 }}>
<View
    style={{
        width: this.props.width,
        height: this.props.height,
        backgroundColor: this.props.backgroundColor,
        shadowOffset: { width: 2, height: 6 },
        shadowRadius: 6,
        shadowOpacity: 0.2,
        elevation: 15,
      }}>
    {this.props.children}
  </View>
  </View>