openblog

Appearance

react-native笔记（四）：阴影 ​

图片

react native自带的阴影样式

css
shadowColor: red;//阴影颜色
shadowOffset: 2;//偏移量
shadowOpacity： 0.8;//不透明度
shadowRadius：4；阴影模糊半径
shadowColor: red;//阴影颜色
shadowOffset: 2;//偏移量
shadowOpacity： 0.8;//不透明度
shadowRadius：4；阴影模糊半径

这种设置目前只支持ios，不支持安卓

安卓只有一个elevation属性，用来设置视图高度，会有一个类似阴影的效果

css
elevation：4
elevation：4

无法修改阴影颜色

所以，改用react-native-shadow这个插件库，支持android和ios

react-native-shadow npm介绍

安装

sh
npm install react-native-shadow
npm install react-native-shadow

它还有一个依赖库react-native-svg，需要根据不同react-native版本安装对应的支持版本

react-native-svg npm介绍

我的react-native版本是0.68.2，我看了一下使用示例，不用选版本，选择最新的直接下载就行

sh
npm install  react-native-svg@X.X.X
npm install  react-native-svg@X.X.X

建议使用前去看下对应的版本

图片

使用方法

官方示例复制的

有一点要注意，要包裹住需要设置阴影的元素，高度和宽度要和包裹的子元素一样

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

本文到此结束。

反馈信息 ​

INFO

邮箱： open_teams@163.com