[解決済み] React Native for androidでシャドウを設定するには？

質問

こんにちは、私のファブに影を設定しようとしていますが、これまでのところ私の試みは失敗しています。私は影のプロップを設定しようとしましたが、それはiosだけのものでした。 elevation プロパティで遊んでみましたが、正しく表示されません。

以下は私が試したものです。

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

実現したいこと

どのように解決するのですか？

CSSプロパティを追加する elevation: 1 を追加すると、サードパーティライブラリをインストールすることなく、Androidで影を描画します。

elevation は、Android 専用のスタイル プロパティで View 要素で使用できます。

参照してください。 のReact Native Docsを参照してください。 elevation スタイルプロパティ

サード パーティ製ソフトウェアに抵抗がなければ、アンドロイド用の影を入手するもう 1 つの方法は react-native-shadow .

例 (Readmeから引用)。

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>
    );
  }
}