阴影在本机反应中蔓延

Posted 2023-03-28

【中文标题】阴影在本机反应中蔓延

【英文标题】：Shadow is spreading away in react native

【发布时间】：2021-10-22 16:39:53

【问题描述】：

我正在开发一个 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,
  ,
);

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

【问题讨论】：

是安卓还是ios？

这是 android（我没有 iOS 进行测试，但我想让它也能在 iOS 上运行）

【参考方案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>

【讨论】：

不，这不起作用。我不想从样式中添加背景颜色，我想从道具中获取它。

我已经编辑了它的外观，检查一下 :)

这很完美，标记为已接受的答案