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

Question

嗨我正试图为我的工厂设置一个阴影,但我的尝试失败到目前为止我尝试设置阴影道具,但这只是为了ios所以我试图玩升力属性,但它看起来不正确.

这是我试过的

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

我需要实现的目标

Answer 1

UPDATE

添加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

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

Android - 没有 backgroundColor 的高程样式属性不起作用

例子：

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

Answer 4

你可以试试

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

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

只需使用'elevation'属性来获取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 7

对于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 8

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

Answer 9

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

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