影子在本机反应中蔓延开来

Question

我正在做一个 React Native 项目。我想提供阴影来查看。却就这样蔓延开来

但我想要的是：

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

组件文件：

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>

影子在本机反应中蔓延开来

Shadow is spreading away in react native

javascript

reactjs

react-native

shadow

card