react-native的阴影实现，兼容android和ios

效果：

image.png

import PropTypes from 'prop-types';
import React from 'react';
import {
    View,
    Dimensions,
    StyleSheet,
    Platform,
} from 'react-native';

const ShadowCard = props => {
    const { children, elevation, opacity, cornerRadius } = props;

    const cardStyle = Platform.select({
        ios: () =>
            StyleSheet.create({
                container: {
                    shadowRadius: elevation,
                    shadowOpacity: opacity,
                    shadowOffset: { width: 0, height: elevation },
                    borderRadius: cornerRadius,
                    backgroundColor: props.backgroundColor,
                    width: Dimensions.get('window').width - 40,
                }
            }),
        android: () =>
            StyleSheet.create({
                container: {
                    elevation: elevation,
                    borderRadius: cornerRadius,
                    backgroundColor: props.backgroundColor,
                    width: Dimensions.get('window').width - 40,
                }
            })
    })();

    return (
        
            {children}
        
    )

}

ShadowCard.prototype = {
    backgroundColor: PropTypes.string,
    elevation: PropTypes.number,
    cornerRadius: PropTypes.number,
    opacity: PropTypes.number
}

ShadowCard.defaultProps = {
    backgroundColor: '#ffffff',
    elevation: 3,
    cornerRadius: 5,
    opacity: .5
}

export default ShadowCard

使用方式如下：

          Open up App.js to start working on your app!
          Changes you make will automatically reload.
          Shake your phone to open the developer menu.
        
        
          Shake your phone to open the developer menu.