如何在React Native中设置Android阴影？

Question

嗨，我正在尝试为我的fab设置阴影，但是我的尝试一直失败。我尝试设置阴影属性，但那只适用于iOS，所以我尝试使用elevation属性进行操作，但效果不佳。

以下是我尝试过的内容：

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

我需要实现什么

- Ibrahim Ahmed

Answer 1

在Android中，通过添加CSS属性elevation: 1，可以呈现阴影效果，而不需要安装任何第三方库。

elevation是仅适用于View元素的Android样式属性。

参见：React Native 文档中有关elevation样式属性的说明

---

如果您可以接受第三方软件，则可以通过安装react-native-shadow来获得Android的阴影效果。

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

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

---

在不安装任何第三方库的情况下，添加CSS属性elevation:1可以在Android上渲染阴影。我已经在React Native 0.52中进行了测试。 - Guy

在使用“elevation”时要小心，因为它不会遵循你设置的“shadow”的偏移和颜色等设置。 - cseelus

@LeangSocheat，你有没有想过如果事先不知道宽度或高度该怎么办？我也遇到了同样的问题。谢谢。 - user6233283

@FuzzyTree 关于 react-native-shadow 模块似乎缺少主要部分。 - Carmine Tambascia

根据Asad的回答，没有设置backgroundColor时高程无法工作。 - lami

Answer 2

在Android上，elevation样式属性不起作用，除非已为元素指定了backgroundColor。

Android - elevation样式属性需要指定backgroundColor才能生效

示例：

{
  shadowColor: 'black',
  shadowOpacity: 0.26,
  shadowOffset: { width: 0, height: 2},
  shadowRadius: 10,
  elevation: 3,
  backgroundColor: 'white'
}

- Asad Ullah

---

这篇文章需要更多的点赞，我不知道为什么它不能正常工作。 - jsnid00

这就是我一直在寻找的。该解决方案适用于Android和iOS，无需安装第三方库。 - Delali

这是我之前遗漏的关键点...这需要更多的赞同。 - Harvinder Singh

这就是解决方案！背景颜色使其正常工作！！！谢谢 ^_^ - WISERDIVISOR

接受的答案应该是这个。 - Rajat

Answer 3

另一种不使用第三方库的解决方案是使用elevation。

摘自React Native文档。 https://facebook.github.io/react-native/docs/view.html

(仅适用于Android) 使用Android底层的高程API设置视图的高程。这将为项目添加一个投影，并影响重叠视图的Z顺序。仅支持Android 5.0+，在早期版本上没有任何效果。

elevation将进入style属性中，可以像下面这样实现。

<View style={{ elevation: 2 }}>
    {children}
</View>

海拔越高，阴影就越大。希望这可以帮到你！

- Ajackster

---

为什么高程属性要写在两个大括号里？ - divine

外部括号用于JS插值，内部括号用于一个对象。 - Asaf David

这只在视图底部产生阴影，不能让你在其他侧面产生阴影。 - Erich

没错，使用React Native时iOS处理得更好的事情有很多，阴影就是其中之一。 - Ajackster

注意使用“elevation”属性，正如文档中所说，它“影响重叠视图的Z轴顺序”，基本上像一个不可覆盖的“zIndex”，可能会导致非常混乱的行为。例如，在具有粘性节标题的SectionList中，如果在列表项上放置了“elevation：3”，它们将突然开始移到标题之上，使其无法看到（仅在Android上）。这几乎是不可能调试的！ - omnikron

这将适用于所有安卓版本。https://github.com/Kishanjvaghela/react-native-cardview - Kishan Vaghela

Answer 4

您可以尝试

//ios    
shadowOpacity: 0.3,
shadowRadius: 3,
shadowOffset: {
    height: 0,
    width: 0
},
//android
elevation: 1

- lam luu

---

高程对于安卓来说无法创建足够大且可配置的阴影，react-native-shadow 似乎是最好的选择。 - evanjmg

Answer 5

以下内容将帮助你实现对每个平台进行所需的样式设置：

import { Text, View, Platform } from 'react-native';

......
<View style={styles.viewClass}></View>
......


const styles = {
viewClass: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 60,
    ...Platform.select({
        ios: {
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.2,
        },
        android: {
            elevation: 1

        },
      }),
}
};

- Mohammed Alawneh

---

在iOS中，无需指定平台，因为高程（elevation）属性将被忽略。 - cody

@cody 是的，你说得对！但是我的例子展示了如何为不同的平台设置样式。 - Mohammed Alawneh

Answer 6

对于Android屏幕，您可以使用此属性：elevation。

例如：

 HeaderView:{
    backgroundColor:'#F8F8F8',
    justifyContent:'center',
    alignItems:'center',
    height:60,
    paddingTop:15,

    //Its for IOS
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,

    // its for android 
    elevation: 5,
    position:'relative',

},

- Aras

---

它可以工作，但在Android中，我如何更改阴影颜色？ - Jeremias Araujo

Answer 7

您可以使用我的react-native-simple-shadow-view

• 这使Android中的阴影效果与iOS几乎相同
• 不需要使用“elevation”，使用与iOS相同的阴影参数（shadowColor、shadowOpacity、shadowRadius、offset等）工作，因此您无需编写特定于平台的阴影样式。
• 可用于半透明视图
• 支持Android 18及以上版本

- RoyBS

---

可以用它来替换 Animated.View 吗？ - MøĦâméd Ğhøùdiï

尝试使用以下代码：const AnimatedShadowView = Animated.createAnimatedComponent(ShadowView)。它应该可以正常工作。 - RoyBS

我真的认为这是最好的解决方案！不太依赖于许多冒险的依赖项。它对我有用，除了ShadowView不支持特定的角半径属性（borderTopRightRadius，borderTopLeftRadius，borderBottomRightRadius，borderBottomLeftRadius）。 - EZECKIEL TOSSEDE NOUDEGBESSI

Answer 8

我在Android上添加了borderBottomWidth: 0，它能很好地工作。

- Sahitya D

Answer 9

只需在Android中使用“elevation”属性即可获得阴影。类似以下内容：

const Header = () => {
    // const { textStyle, viewStyle } = styles;
    return (
      <View style={styles.viewStyle}>    
        <Text style={styles.textStyle}>Albums</Text>
      </View>
    )
}


const styles = {
    viewStyle:{
        backgroundColor:'#f8f8f8',
        justifyContext:'center',
        alignItems: 'center',
        padding:16,
        elevation: 2
    }
}

- SameerShaik

Answer 10

此外，我想补充一点，如果一个人试图在一个TouchableHighlight组件中应用阴影，其中子元素具有边界半径，那么父元素（TouchableHighlight）也需要设置半径，以便在Android上使elevation属性生效。

- Andrei Vedovato