react naitve阴影效果

react-native-shadow-cards

react-native-shadow-cards实现了一个阴影框，ios与Android均兼容。其不需要原生支持，可实现一般效果的阴影，可满足通常阴影需求。
优点：轻量级，用法简单，可以自适应宽高。缺点：无法自定义阴影。

react-native-shadow

react-native-shadow插件是广为使用的一种阴影插件，ios于Android均兼容。但该插件需要原生支持，如果项目为非原生，则无法使用该方法。
优点：可以自定义阴影，缺点：需要提前设定宽高，需要自己实现
以下是对react-native-shadow的二次封装，实现高度自适应，代码如下

import React, { Component } from 'react'
import { View, Image,Platform } from 'react-native'
import PropTypes from 'prop-types';
import {BoxShadow} from "react-native-shadow";


class ShadowBoxView extends Component {

    static propTypes= {

        style:PropTypes.object,
        color:PropTypes.string,
        shadowOption:PropTypes.object
    }


    static defaultProps ={
        shadowOption:{
            color:"#EBEBEB",
            border:3,
            radius:5,
            opacity:0.5,
            x:-3,
            y:4,
        }
    }

    constructor(props){
        super(props);
        this.state={
            contentHeight:0,
            contentWidth:0,
            showShadow:false
        }



    }

    componentDidMount() {

    }

    render(){
        const {color,style,shadowOption} = this.props;

        if(!this.state.showShadow){
            return  (
                <View style={style}
                      onLayout={e=>{
                          const layout = e.nativeEvent.layout
                          // console.log(layout)
                          this.setState({
                              contentWidth:layout.width,
                              contentHeight:layout.height,
                              showShadow:true
                          })
                      }}
                >
                    {this.props.children}
                </View>
            )
        }

        return (
            <BoxShadow
                setting={{
                    height:this.state.contentHeight ,
                    width:this.state.contentWidth,
                    color:color,
                    ...shadowOption
                }}
            >
                <View style={style}>
                    {this.props.children}
                </View>

            </BoxShadow>
        );
    }
}
export default ShadowBoxView;