Expo React Native中Android组件能否修改阴影颜色及设置偏移等属性？

关于原生elevation的阴影颜色问题 #

Android原生的elevation属性对应的阴影是Material Design系统阴影，其颜色由系统主题控制，无法通过React Native的原生属性直接修改阴影颜色，且iOS端支持的shadowColor、shadowOffset等阴影属性在Android平台已被废弃。

实现完整自定义阴影的两种方案 #

方案1：使用第三方阴影库（推荐） #

react-native-shadow-2库支持跨平台的完整阴影配置，可自定义颜色、偏移、模糊半径、圆角等属性，Expo项目中可直接安装使用：

1. 安装依赖：

npx expo install react-native-shadow-2

2. 代码示例：

import { View, Text } from 'react-native';
import { Shadow } from 'react-native-shadow-2';

export default function CustomShadowComponent() {
  return (
    <Shadow
      offset={[6, 6]} // 阴影X、Y轴偏移量
      color="#2d2d2d" // 自定义阴影颜色
      borderRadius={10} // 与内部组件圆角保持一致
      blur={12} // 阴影模糊半径
      distance={4} // 阴影扩散距离
    >
      <View style={{
        width: 240,
        height: 120,
        backgroundColor: '#ffffff',
        borderRadius: 10,
        justifyContent: 'center',
        alignItems: 'center'
      }}>
        <Text style={{ fontSize: 16 }}>带自定义阴影的组件</Text>
      </View>
    </Shadow>
  );
}

方案2：手动模拟阴影（无依赖） #

通过绝对定位的阴影层+模糊效果手动实现，适合不想引入第三方库的场景，可借助expo-blur实现模糊效果：

1. 安装依赖：

npx expo install expo-blur

2. 代码示例：

import { View, Text } from 'react-native';
import { BlurView } from 'expo-blur';

export default function ManualShadowComponent() {
  return (
    <View style={{
      width: 240,
      height: 120,
      position: 'relative',
      justifyContent: 'center',
      alignItems: 'center',
      margin: 20
    }}>
      {/* 阴影层：放在目标组件下方 */}
      <BlurView
        intensity={10} // 模糊强度
        style={{
          position: 'absolute',
          top: 6,
          left: 6,
          right: -6,
          bottom: -6,
          borderRadius: 10,
          backgroundColor: 'rgba(0, 0, 0, 0.25)', // 阴影颜色+透明度
        }}
      />
      {/* 目标组件：设置zIndex确保在阴影层上方 */}
      <View style={{
        width: '100%',
        height: '100%',
        backgroundColor: '#ffffff',
        borderRadius: 10,
        justifyContent: 'center',
        alignItems: 'center',
        position: 'relative',
        zIndex: 1
      }}>
        <Text style={{ fontSize: 16 }}>手动模拟的阴影组件</Text>
      </View>
    </View>
  );
}

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