如何在一個元素上渲染多個陰影？

Question

例如，如何完成

box-shadow: 2px 2px 4px rgba(0, 0, 0, .05), -2px -2px 4px rgba(0, 0, 0, .05); 

在

反應原生樣式？

Answer 1

我不認爲你可以，但包裝與另一您的組件只是影子的另一層的黑客是本世紀或者最糟糕的黑客：

<div style={{ boxShadow: "2px 2px 4px rgba(0, 0, 0, .05)"}}> 
    <div style={{ boxShadow: "-2px -2px 4px rgba(0, 0, 0, .05)"}}> 
    { content } 
    </div> 
</div> 

Answer 2

我自動創建一個反應成分爲您需要的每個陰影創建多個View組件。這很可能會有一些怪癖，但對我的情況來說，它工作得很好。

import React from 'react'; 
import PropTypes from 'prop-types'; 
import { View } from 'react-native'; 
import * as _ from 'lodash'; 

const partitionByKeys = (keys, obj) => { 
    let pass = {}; 
    let fail = {}; 

    for (const key of Object.keys(obj)) { 
    if (keys.includes(key)) { 
     pass[key] = obj[key]; 
    } else { 
     fail[key] = obj[key]; 
    } 
    } 

    return [pass, fail]; 
}; 

const innerStyleKeys = [ 
    'padding', 'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', 
    'paddingHorizontal', 'paddingVertical', 
    'backgroundColor', 'flexDirection', 'justifyContent', 'alignItems', 
    'minHeight', 'minHeight', 
]; 

const ShadowView = ({ level = 0, shadows, children, style, ...props }) => { 
    const shadow = _.head(shadows); 
    const [innerStyle, outerStyle] = style ? partitionByKeys(innerStyleKeys, style) : [{}, {}]; 

    return (
    <View 
     {...props} 
     style={{ 
     shadowColor: shadow.color, 
     shadowOffset: shadow.offset, 
     shadowOpacity: shadow.opacity, 
     shadowRadius: shadow.radius, 
     ...(level === 0 ? outerStyle : {}), 
     ...(shadows.length === 1 ? innerStyle : {}), 
     }} 
    > 
     { shadows.length === 1 ? 
     children : 
     <ShadowView level={level + 1} shadows={_.tail(shadows)} style={style}>{children}</ShadowView> 
     } 
    </View> 
); 
}; 

export default ShadowView; 

用法：

<ShadowView shadows={[{ 
    color: '#FF0000', 
    opacity: 0.5, 
    offset: { 
    width: 0, 
    height: 10, 
    }, 
    radius: 60, 
}, { 
    color: '#00FF00', 
    opacity: 0.5, 
    offset: { 
    width: 0, 
    height: 3, 
    }, 
    radius: 20, 
}]}>...</ShadowView>