如何在 React Native for android 中设置阴影？

Question

嗨，我正在尝试为我的工厂设置阴影，但到目前为止我的尝试失败了，我尝试设置阴影道具，但这仅适用于 ios，所以我尝试使用 elevation 属性，但它看起来不正确。

这是我尝试过的

  <View
    style={{
      width: 56,
      height: 56,
      elevation: 2,
      borderRadius: 28,
      marginBottom: 3,
      backgroundColor: 'rgba(231,76,60,1)',
    }}
  ></View>

我需要达到的目标

原文由 Ibrahim Ahmed 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

添加 CSS 属性 elevation: 1 在 Android 中呈现阴影，无需安装任何第三方库。

elevation 是 View 元素上可用的仅限 Android 的样式属性。

请参阅： elevation 样式属性的 React Native Docs

---

如果您对 3rd 方软件持开放态度，另一种获取 android 阴影的方法是安装 react-native-shadow 。

示例（改编自自述文件）：

 import React, { Component } from "react";
import { TouchableHighlight } from "react-native";

import { BoxShadow } from "react-native-shadow";

export default class ShadowButton extends Component {
  render() {
    const shadowOpt = {
      width: 160,
      height: 170,
      color: "#000",
      border: 2,
      radius: 3,
      opacity: 0.2,
      x: 0,
      y: 3,
      style: { marginVertical: 5 }
    };

    return (
      <BoxShadow setting={shadowOpt}>
        <TouchableHighlight
          style={{
            position: "relative",
            width: 160,
            height: 170,
            backgroundColor: "#fff",
            borderRadius: 3,
            // marginVertical: 5,
            overflow: "hidden"
          }}
        >
          ...
        </TouchableHighlight>
      </BoxShadow>
    );
  }
}

原文由 FuzzyTree 发布，翻译遵循 CC BY-SA 4.0 许可协议