React Native中如何为View设置单侧阴影或隐藏指定侧阴影？

在React Native里实现单侧阴影确实有点棘手，毕竟默认的shadow系列属性（iOS）和elevation（Android）都是给整个View加阴影，没法直接指定只显示某一侧。不过我在项目里试过几个实用的方案，分享给你：

方案1：嵌套View裁剪法（iOS首选） #

这个方法的核心思路是用外层View的overflow: hidden把不需要的阴影裁掉，只露出目标侧的阴影。

代码示例（底部阴影） #

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

const BottomShadowView = () => {
  return (
    <View style={styles.container}>
      <View style={styles.shadowWrapper}>
        {/* 这里放你的内容组件 */}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    overflow: 'hidden', // 关键：裁剪超出容器的阴影
    height: 50, // 和内层内容View的高度保持一致
  },
  shadowWrapper: {
    width: '100%',
    height: '100%',
    backgroundColor: '#ffffff',
    // iOS阴影配置
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    // 让底部阴影露出来，其他方向被外层容器裁剪
    marginBottom: 8,
  },
});

注意点 #

iOS下overflow: hidden能完美裁剪shadow属性生成的阴影，但Android的elevation阴影是绘制在View层级之外的，overflow: hidden对它无效，所以这个方法在Android上不生效哦。

方案2：LinearGradient模拟阴影（跨平台通用） #

如果需要跨平台支持，又不想依赖第三方库，可以用渐变条模拟阴影效果，视觉上也能达到类似单侧阴影的效果。

代码示例（底部阴影） #

import { View, StyleSheet } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

const GradientShadowView = () => {
  return (
    <View style={styles.container}>
      <View style={styles.contentView}>
        {/* 你的内容 */}
      </View>
      {/* 用渐变模拟底部阴影 */}
      <LinearGradient
        colors={['rgba(0, 0, 0, 0.25)', 'rgba(0, 0, 0, 0)']}
        start={{ x: 0.5, y: 0 }}
        end={{ x: 0.5, y: 1 }}
        style={styles.shadowGradient}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    alignItems: 'center',
  },
  contentView: {
    width: '100%',
    height: 50,
    backgroundColor: '#ffffff',
    borderRadius: 8,
  },
  shadowGradient: {
    width: '95%',
    height: 10,
    marginTop: -5, // 和内容View轻微重叠，让阴影更自然
    borderRadius: 5,
  },
});

优缺点 #

• 优点：完全跨平台，实现简单，不需要额外配置；
• 缺点：阴影的真实感不如原生阴影，只能模拟渐变效果，没法做到原生阴影的扩散模糊感。

方案3：第三方库实现（灵活度最高） #

如果追求更接近原生的单侧阴影效果，推荐用专门的阴影库，比如react-native-shadow或者react-native-drop-shadow，这些库封装了跨平台的阴影控制逻辑，能轻松指定显示单侧或多侧阴影。

代码示例（以react-native-shadow为例） #

首先安装依赖：

npm install react-native-shadow --save

然后使用：

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

const SingleSideShadowView = () => {
  // 配置阴影参数，指定只显示底部阴影
  const shadowConfig = {
    width: '100%',
    height: 50,
    color: '#000',
    border: 2,
    radius: 8,
    opacity: 0.3,
    x: 0,
    y: 2,
    shadowSide: ['bottom'], // 可选值：top, bottom, left, right，可多选
  };

  return (
    <Shadow setting={shadowConfig}>
      <View style={styles.contentView}>
        {/* 你的内容 */}
      </View>
    </Shadow>
  );
};

const styles = StyleSheet.create({
  contentView: {
    width: '100%',
    height: 50,
    backgroundColor: '#ffffff',
    borderRadius: 8,
  },
});

优缺点 #

• 优点：跨平台支持，阴影效果接近原生，能灵活控制阴影的方向、大小、透明度；
• 缺点：需要引入第三方依赖，会增加一点包体积，不过大部分项目都能接受。

方案4：Android专属：遮罩法 #

针对Android的elevation阴影，因为它是绘制在View之外的，没法用overflow: hidden裁剪，我们可以用同背景色的遮罩View把不需要的阴影挡住。

代码示例（底部阴影） #

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

const AndroidBottomShadowView = () => {
  return (
    <View style={styles.container}>
      {/* 顶部遮罩：挡住顶部阴影 */}
      <View style={styles.topMask} />
      {/* 左侧遮罩：挡住左侧阴影 */}
      <View style={styles.leftMask} />
      {/* 右侧遮罩：挡住右侧阴影 */}
      <View style={styles.rightMask} />
      
      <View style={styles.contentView}>
        {/* 你的内容 */}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    width: '100%',
    backgroundColor: '#f5f5f5', // 和页面背景色一致
  },
  contentView: {
    width: '100%',
    height: 50,
    backgroundColor: '#ffffff',
    elevation: 4, // Android原生阴影
    borderRadius: 8,
  },
  topMask: {
    position: 'absolute',
    top: -6, // 覆盖阴影的范围，比elevation值大一点
    left: 0,
    right: 0,
    height: 12,
    backgroundColor: '#f5f5f5', // 和容器背景色一致
  },
  leftMask: {
    position: 'absolute',
    left: -6,
    top: 0,
    bottom: 0,
    width: 12,
    backgroundColor: '#f5f5f5',
  },
  rightMask: {
    position: 'absolute',
    right: -6,
    top: 0,
    bottom: 0,
    width: 12,
    backgroundColor: '#f5f5f5',
  },
});

注意点 #

这个方法只适用于Android，而且要求父容器的背景是纯色，否则遮罩会显得很突兀。

内容的提问来源于stack exchange，提问作者鏈ㄥぇ鐧芥槗