React Native中elevation属性不生效，自定义卡片组件阴影被截断如何解决？

解决方案 #

可直接落地的修复方法： #

• 调整组件尺寸预留阴影空间：你当前卡片宽度设置为width - 10，外层父容器仅设置了10px的左右padding，右侧仅剩余5px空间不足以承载阴影渲染，可将卡片宽度调整为width - 30，同时将外层padding调整到15px以上，给四周预留足够的阴影展示区域。
• 显式设置overflow: visible：给外层父容器和卡片容器都加上该属性，避免React Native默认裁剪超出容器边界的内容，导致阴影被截断。
• 调整阴影属性适配双端：Android端elevation生成的阴影更容易被裁剪，可适当调大elevation数值，同时避免在卡片内层设置overflow: hidden属性。如果需要更一致的双端阴影效果，也可将阴影样式写在外层父容器上，内层仅承载卡片内容。

修复后代码示例： #

import React from 'react'
import { View, StyleSheet, Text, Image, Dimensions } from 'react-native'

const { width } = Dimensions.get('window')

export default function CardCus() {
    return (
        <View style={{ 
            justifyContent: 'center', 
            alignItems: 'center', 
            padding: 15, 
            overflow: 'visible' 
        }}>
            <View style={styles.container}>
                <View style={{ width: 110, borderTopLeftRadius: 10, borderBottomLeftRadius: 10 }}>
                    <Image 
                        style={{ width: '100%', height: '100%', borderTopLeftRadius: 10, borderBottomLeftRadius: 10 }} 
                        source={{ uri: 'https://images.pexels.com/photos/6231818/pexels-photo-6231818.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940' }} 
                    />
                </View>
                <View style={{ margin: 10, padding: 5 }}>
                    <Text style={styles.title}>Title</Text>
                    <Text>Separator</Text>
                    <Text>Title</Text>
                    <Text>Title</Text>
                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.5,
        shadowRadius: 4,
        elevation: 4,
        flexDirection: 'row',
        borderRadius: 10,
        borderColor: 'black',
        borderWidth: 1,
        height: 110,
        width: width - 30,
        overflow: 'visible'
    },
    title: {
        fontWeight: 'bold'
    }
})

内容的提问来源于stack exchange，提问作者Ibtsam Ahmad