React Native Expo Android端如何仅为组件添加底部阴影

问题原因 #

React Native 中，shadowOffset、shadowOpacity、shadowRadius 是iOS 专属样式属性，Android 端仅支持 elevation 和 shadowColor。而 elevation 是基于 Material Design 的阴影机制，会给组件添加四周的扩散阴影，因此你设置后会出现四个方向的阴影。

解决方案 #

由于 Android 原生机制限制，无法直接通过 elevation 实现仅底部阴影，推荐用以下两种可靠方法：

方法1：额外 View 模拟底部阴影（推荐）

通过在组件底部添加一个绝对定位的小 View，单独给这个 View 设置阴影，原组件关闭自身 elevation，实现仅底部阴影的效果，同时兼容 iOS 原生阴影。

import { View, StyleSheet, Platform } from 'react-native';

// 组件结构
<View style={styles.listContainer}>
  {/* 你的核心内容组件 */}
  <View style={styles.listContent}>
    {/* 这里放你的组件内容 */}
  </View>
  {/* Android 专属底部阴影 */}
  <View style={styles.bottomShadow} />
</View>

// 样式定义
const styles = StyleSheet.create({
  listContainer: {
    position: 'relative',
    borderRadius: 5,
    margin: 10,
    overflow: 'hidden', // 防止阴影溢出容器
  },
  listContent: {
    backgroundColor: '#fff',
    borderRadius: 5,
    padding: 16, // 根据需求调整内边距
    // iOS 原生阴影设置
    ...(Platform.OS === 'ios' && {
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.25,
      shadowRadius: 3.84,
    }),
    // Android 关闭自身阴影
    ...(Platform.OS === 'android' && {
      elevation: 0,
    }),
  },
  bottomShadow: {
    // 仅在 Android 显示
    ...(Platform.OS === 'android' && {
      position: 'absolute',
      bottom: -2, // 让阴影稍微超出组件底部，效果更自然
      left: 0,
      right: 0,
      height: 4,
      backgroundColor: '#000',
      opacity: 0.25,
      borderRadius: 2,
      elevation: 3,
    }),
  },
});

方法2：裁剪阴影（局限性大）

如果不想添加额外 View，可以尝试给组件设置 overflow: 'hidden'，同时增加底部内边距，让 elevation 产生的阴影只从底部露出，但这种方法难以精确控制阴影范围，效果不如方法1稳定：

list: {
  display: 'flex',
  position: 'relative',
  borderRadius: 5,
  margin: 10,
  backgroundColor: '#fff',
  shadowColor: '#000',
  elevation: 3,
  overflow: 'hidden',
  paddingBottom: 8, // 增加底部内边距，让阴影从底部透出
  marginBottom: -4, // 抵消额外内边距带来的布局偏移
},

总结 #

方法1通过模拟阴影的方式，能精准实现仅底部阴影的效果，同时兼顾 iOS 和 Android 两端的体验，是最推荐的方案。

内容的提问来源于stack exchange，提问作者Alfonso.b