带有样式组件的 react-native box-shadow答案

【问题标题】：react-native box-shadow with styled-components带有样式组件的 react-native box-shadow
【发布时间】：2021-06-14 00:58:00
【问题描述】：

我在我的 expo 应用程序中使用样式化组件。
我需要使用这个 box-shadow：

box-shadow: 0px 6px 8px rgba(25, 50, 47, 0.08),0px 3px 4px rgba(18, 71, 52, 0.02), 0px 1px 16px rgba(18, 71, 52, 0.03);

但是当我像这样把它放在我的样式组件中时：

const BackButton = styled.TouchableOpacity`
  flex-direction: row;
  width: 40px;
  height: 40px;
  align-items: center;
  position: absolute;
  left: ${normalize(26)}px;
  justify-content: center;
  padding: 0px 20px 2px;
  border-radius: 12px;
  background-color: ${EAppColors.BASIC_LIGHT_BLUE};
 box-shadow: 0px 6px 8px rgba(25, 50, 47, 0.08),0px 3px 4px rgba(18, 71, 52, 0.02), 0px 1px 16px rgba(18, 71, 52, 0.03);
`;

我有这个错误：

在您看来，我该如何应用这个 box-sahdow？

【问题讨论】：

标签： javascript css react-native expo styled-components

【解决方案1】：

看看这是否适合您的用例：https://github.com/styled-components/styled-components/issues/709#issuecomment-295274475

另外值得注意的是，Android 不支持彩色框阴影，所以如果您正在为 android 构建，我建议使用 react-native-drop-shadow.。

【讨论】：

谢谢@Moistbobo ;)