React Native动态高度双视图定位异常：3D阴影效果失效

我想给React Native组件中的一个View实现类3D阴影效果，采用了相对定位的外层容器，内部包含两个绝对定位的View——第二个View作为阴影层置于第一个View后方。由于第一个View的内容是动态变化的，无法设置固定高度，因此我尝试通过onLayout获取它的高度，再用该高度设置外层容器和阴影View的高度，但方案未生效，视图出现无高度的异常显示。

原代码 #

const [heightSegmentation, setHeightSegmentation] = useState(null);

const handleLayoutSegmentation = (event) => {
    const { height } = event.nativeEvent.layout;
    if (!heightSegmentation) {
        setHeightSegmentation(height);
    }
};

return (
    <View style={{ width: '100%', position: 'relative', marginVertical: 30 }}>
        <View 
            onLayout={handleLayoutSegmentation} 
            style={{ 
                zIndex: 9999, 
                position: 'absolute', 
                overflow: 'hidden', 
                padding: 15, 
                top: 0, 
                left: 0, 
                width: '97%', 
                flexDirection: 'column', 
                alignItems: 'center', 
                justifyContent: 'flex-start', 
                borderRadius: 10, 
                backgroundColor: 'white', 
                elevation: 8 
            }}
        >
            <Text 
                allowFontScaling={false} 
                style={{ 
                    fontSize: 16, 
                    color: root.mapStore.actionColor, 
                    position: 'relative', 
                    fontFamily: 'IBMPlexSans-Medium', 
                    fontWeight: '500' 
                }}
            >
                Google Ads
            </Text>
        </View>

        {heightSegmentation && (
            <View 
                style={{ 
                    height: heightSegmentation, 
                    zIndex: 999, 
                    position: 'absolute', 
                    top: 10, 
                    left: 10, 
                    width: '97%', 
                    flexDirection: 'row', 
                    alignItems: 'center', 
                    justifyContent: 'space-between', 
                    borderRadius: 10, 
                    backgroundColor: '#F37F06', 
                    elevation: 8 
                }}
            ></View>
        )}
    </View>
);

问题分析与修复方案 #

核心问题 #

1. 外层容器为position: relative但未设置高度，内部两个子View均为绝对定位，脱离文档流导致外层容器高度塌陷，显示异常。
2. handleLayoutSegmentation仅在heightSegmentation为null时更新状态，后续内容高度变化时无法同步更新阴影高度。

修复代码 #

import { useState } from 'react';
import { View, Text } from 'react-native';

const YourComponent = () => {
  const [heightSegmentation, setHeightSegmentation] = useState(0);

  const handleLayoutSegmentation = (event) => {
    const { height } = event.nativeEvent.layout;
    setHeightSegmentation(height);
  };

  return (
    <View style={{ width: '100%', marginVertical: 30, position: 'relative' }}>
      {/* 阴影层：绝对定位在后方 */}
      <View 
        style={{ 
          height: heightSegmentation, 
          zIndex: 1, 
          position: 'absolute', 
          top: 10, 
          left: 10, 
          width: '97%', 
          borderRadius: 10, 
          backgroundColor: '#F37F06',
          elevation: 4
        }}
      />

      {/* 内容层：正常布局，让外层容器自动适配高度 */}
      <View 
        onLayout={handleLayoutSegmentation} 
        style={{ 
          zIndex: 2, 
          overflow: 'hidden', 
          padding: 15, 
          width: '97%', 
          flexDirection: 'column', 
          alignItems: 'center', 
          justifyContent: 'flex-start', 
          borderRadius: 10, 
          backgroundColor: 'white', 
          elevation: 8 
        }}
      >
        <Text 
          allowFontScaling={false} 
          style={{ 
            fontSize: 16, 
            color: root.mapStore.actionColor, 
            fontFamily: 'IBMPlexSans-Medium', 
            fontWeight: '500' 
          }}
        >
          Google Ads
        </Text>
        {/* 可添加动态内容 */}
      </View>
    </View>
  );
};

export default YourComponent;

关键调整点 #

• 移除内容View的position: absolute，让它正常占据外层容器空间，外层容器会自动适配其高度，无需手动设置。
• 去掉handleLayoutSegmentation中的状态判断，每次onLayout都更新高度，确保内容变化时阴影高度同步更新。
• 调整阴影层的elevation和zIndex，确保它始终处于内容层后方。

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