Question

你好我试图为我的工厂设置阴影但是我的尝试失败到目前为止我尝试设置阴影道具但这只是ios所以我试图使用提升属性，但它看起来并不正确。 / p>

这是我尝试的内容

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

我需要实现的目标

Answer 1

<强>更新

添加css属性elevation: 1会在Android中呈现阴影，而无需安装任何第三方库。请参阅其他答案。

-

为Android设置阴影的一种方法是安装react-native-shadow

自述文件中的示例：

import React, {Component} from 'react' import {
    StyleSheet,
    View,
    Text,
    ScrollView,
    Image,
    TouchableHighlight } from 'react-native'

import {BoxShadow} from 'react-native-shadow'

export default class VideoCell 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>
        )
    } 
}

Answer 2

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

从反应本地文档中提取。 https://facebook.github.io/react-native/docs/view.html

（仅限Android）使用Android设置视图的高程底层提升API。这会为项目添加阴影和影响重叠视图的z顺序。仅在Android 5.0+上受支持，对早期版本没有影响。

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

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

海拔越高，阴影越大。希望这有帮助！

Answer 3

你可以尝试

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

Answer 4

只需使用＆＃39;提升＆＃39;在android中获取阴影的属性。类似下面的内容

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

Answer 5

以下内容将帮助您为每个Platform赋予所需的样式：

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

        },
      }),
}
};

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',

},

Answer 7

除非为元素指定elevation，否则Android上的backgroundColor样式属性将不起作用。

Android - elevation style property does not work without backgroundColor

示例：

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

Answer 8

我还要补充一点，如果尝试在子项具有borderRadius的TouchableHighlight组件中应用阴影，则父元素（TouchableHighlight）也需要设置半径，以便在Android上提升支撑效果。

Answer 9

我添加了 borderBottomWidth：0 ，并且在android中对我来说效果很好。

Answer 10

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

这将在Android中实现与iOS中几乎相同的阴影
无需使用海拔，可与iOS的相同阴影参数（shadowColor，shadowOpacity，shadowRadius，offset等）一起使用，因此您无需编写平台特定的阴影样式
可用于半透明视图
在android 18及更高版本中受支持

Answer 11

简而言之，您无法在android中做到这一点，因为如果您仅看到有关shadow的文档支持IOS see doc

您可以安装第三方react-native-shadow的最佳选择

Answer 12

设置elevation: 3，您应该看到没有第三方库的组件底部的阴影。至少在RN 0.57.4中

Answer 13

我有一个相同的问题，阴影/高程在Android上没有显示为height：2。然后我注意到view元素的宽度很宽，因此我在view元素上添加了margin：2，并正确显示了高程。

样式：

    margin: 2,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,
    elevation: 2

Android：

iOS：

Answer 14

我已经实现了CardView来实现与海拔高度的本地化，它支持android（所有版本）和iOS。让我知道这对您有没有帮助。 https://github.com/Kishanjvaghela/react-native-cardview

import CardView from 'react-native-cardview'
<CardView
          cardElevation={2}
          cardMaxElevation={2}
          cornerRadius={5}>
          <Text>
              Elevation 0
          </Text>
</CardView>

Answer 15

生成一个圆圈的阴影，对原生Android做出反应

根据此处的答案以及我在github（react-native-shadow）中找到的文本，我进行了很少的测试，并认为某些人可能会发现以下帮助。

测试在圆形按钮上
环境：Windows 10 PC，使用react-native-shadow（不适用于圆形）和带有不同值的react-native的高程参数（https://facebook.github.io/react-native/docs/view-style-props#elevation）在React-Native上运行android模拟器（genymotion）

这是屏幕的外观：

代码：

import React, { Component } from 'react';
import { View, TouchableHighlight, Text } from 'react-native';
import { BoxShadow } from 'react-native-shadow'

export default class ShadowsTest extends Component {

  render() {
    const shadowOpt = {
      width: 100,
      height: 100,
      color: "#000",
      border: 2,
      radius: 50,
      opacity: 0.8,
      x: 3,
      y: 3,
      //style: { marginVertical: 5 }
    }

    return (
      <View style={{ flex: 1 }}>
        <Header
          text={"Shadows Test"} />

        <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
          <View style={{ margin: 10, alignItems: 'center',
              justifyContent: 'center' }}>
            <TouchableHighlight style={{
              position: 'relative',
              width: 100,
              height: 100,
              backgroundColor: "#fff",
              borderRadius: 50,
              borderWidth: 0.8,
              borderColor: '#000',
              // marginVertical:5,
              alignItems: 'center',
              justifyContent: 'center',
              overflow: "hidden" }}>
              <Text style={{ textAlign: 'center' }}>
                0: plain border
              </Text>
            </TouchableHighlight>
          </View>

          <View style={{ margin: 10, alignItems: 'center',
              justifyContent: 'center' }}>
            <BoxShadow setting={ shadowOpt }>
              <TouchableHighlight style={{
                position: 'relative',
                width: 100,
                height: 100,
                backgroundColor: "#fff",
                borderRadius: 50,
                borderWidth: 1,
                borderColor: '#aaa',
                // marginVertical:5,
                alignItems: 'center',
                justifyContent: 'center',
                overflow: "hidden" }}>
                <Text style={{ textAlign: 'center' }}>
                  1: RN shadow package
                </Text>
              </TouchableHighlight>
            </BoxShadow>
          </View>
        </View>

        <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
          <View style={{ margin: 10, alignItems: 'center',
              justifyContent: 'center' }}>
              <TouchableHighlight style={{
                position: 'relative',
                width: 100,
                height: 100,
                backgroundColor: "#fff",
                borderRadius: 50,
                borderWidth: 1,
                borderColor: '#aaa',
                // marginVertical:5,
                alignItems: 'center',
                justifyContent: 'center',
                overflow: "hidden",
                shadowOffset: { width: 15, height: 15 },
                shadowColor: "black",
                shadowOpacity: 0.9,
                shadowRadius: 10,
               }}>
                <Text style={{ textAlign: 'center' }}>
                  2: vanilla RN: shadow (may work on iOS)
                </Text>
              </TouchableHighlight>
          </View>
          <View style={{ margin: 10, alignItems: 'center',
              justifyContent: 'center' }}>
              <TouchableHighlight style={{
                position: 'relative',
                width: 100,
                height: 100,
                backgroundColor: "#fff",
                borderRadius: 50,
                borderWidth: 1,
                borderColor: '#aaa',
                // marginVertical:5,
                alignItems: 'center',
                justifyContent: 'center',
                overflow: "hidden",
                elevation: 15,
               }}>
                <Text style={{ textAlign: 'center' }}>
                  3: vanilla RN: elevation only (15)
                </Text>
              </TouchableHighlight>
          </View>
        </View>

        <View style={{ flexDirection: 'row', justifyContent: 'center', marginBottom: 30 }}>
          <View style={{ margin: 10, alignItems: 'center',
              justifyContent: 'center' }}>
              <TouchableHighlight style={{
                position: 'relative',
                width: 100,
                height: 100,
                backgroundColor: "#fff",
                borderRadius: 50,
                borderWidth: 1,
                borderColor: '#aaa',
                // marginVertical:5,
                alignItems: 'center',
                justifyContent: 'center',
                overflow: "hidden",
                elevation: 5,
               }}>
                <Text style={{ textAlign: 'center' }}>
                  4: vanilla RN: elevation only (5)
                </Text>
              </TouchableHighlight>
          </View>
          <View style={{ margin: 10, alignItems: 'center',
              justifyContent: 'center' }}>
              <TouchableHighlight style={{
                position: 'relative',
                width: 100,
                height: 100,
                backgroundColor: "#fff",
                borderRadius: 50,
                borderWidth: 1,
                borderColor: '#aaa',
                // marginVertical:5,
                alignItems: 'center',
                justifyContent: 'center',
                overflow: "hidden",
                elevation: 50,
               }}>
                <Text style={{ textAlign: 'center' }}>
                  5: vanilla RN: elevation only (50)
                </Text>
              </TouchableHighlight>
          </View>
        </View>
      </View>
    )
  }
}

Answer 16

由于某种原因，它仅通过添加borderColor: 'transparent'（或任何其他颜色）而对我有效。我的样式输出如下：

{
        borderColor: "transparent", // Required to show shadows on Android for some reason !?!?
        shadowColor: '#000',
        shadowOffset: {
          width: 0,
          height: 0,
        },
        shadowOpacity: 0.3,
        shadowRadius: 5,

        elevation: 15,
      }

Answer 17

要在android中应用阴影。此lib最适合于本机反应。

react-native-androw

向Android应用阴影的最佳解决方案

Answer 18

海拔高度在Expo v30 && React-native v0.55.4中仍然无效。我在这里尝试了所有答案。

此外，请勿尝试 react-native-shadow -它们的阴影渲染非常糟糕。因此，我正在继续研究。

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

18 个答案:

生成一个圆圈的阴影，对原生Android做出反应

这是屏幕的外观：

代码：