如何在Expo Android中实现清晰锐利的React Native Box Shadow

你想要实现参考图里的锐利黑色阴影，试过elevation属性、线性渐变、深色条模拟阴影以及React Native Shadow Generator都没达到目标效果，打算使用兼容Expo的Skia库来实现，下面是具体解决方案：

当前效果：
目标效果：

实现步骤 #

1. 安装Expo Skia #

先在项目中安装依赖：

npx expo install @shopify/react-native-skia

2. 使用Skia的Shadow组件实现锐利阴影 #

Skia的Shadow组件可以精确控制阴影的模糊度、偏移量和颜色，完美适配这种无模糊的锐利阴影需求。修改后的代码示例如下：

import { View, StyleSheet, Dimensions } from 'react-native';
import { Canvas, Shadow, Rect } from '@shopify/react-native-skia';

const halfWindowsWidth = Dimensions.get('window').width;

export default function DesignTests() {
  return (
    <View style={styles.container}>
      {/* 顶部带锐利阴影的容器 */}
      <View style={styles.topContainerWrapper}>
        <Canvas style={StyleSheet.absoluteFill}>
          {/* 绘制无模糊的向下阴影 */}
          <Shadow dx={0} dy={4} blur={0} color="black">
            <Rect x={0} y={0} width={halfWindowsWidth} height="100%" rx={20} ry={20} />
          </Shadow>
        </Canvas>
        {/* 实际内容容器 */}
        <View style={styles.first_half_container} />
      </View>

      {/* 中间小条的阴影实现 */}
      <View style={styles.additionalBarWrapper}>
        <Canvas style={StyleSheet.absoluteFill}>
          <Shadow dx={0} dy={3} blur={0} color="black">
            <Rect x={0} y={0} width="100%" height="100%" rx={90} ry={90} />
          </Shadow>
        </Canvas>
        <View style={styles.additionalBar} />
      </View>

      <View style={styles.second_half_container} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: "100%",
    height: "100%",
    backgroundColor: "#433838",
  },
  topContainerWrapper: {
    height: "50%",
    width: halfWindowsWidth,
    position: 'relative',
  },
  first_half_container: {
    height: "100%",
    width: halfWindowsWidth,
    borderBottomLeftRadius: 20,
    borderBottomRightRadius: 20,
    backgroundColor: '#e2c9ac',
    position: 'relative',
    zIndex: 1,
  },
  additionalBarWrapper: {
    height: "2%",
    width: halfWindowsWidth * 0.2,
    top: -3,
    left: "40%",
    position: 'relative',
  },
  additionalBar: {
    backgroundColor: "#e2c9ac",
    height: "150%",
    width: "100%",
    top: -10,
    borderBottomLeftRadius: 15,
    borderBottomRightRadius: 15,
    position: 'relative',
    zIndex: 1,
  },
  second_half_container: {
    height: "50%",
    backgroundColor: '#433838',
  },
});

关键细节说明 #

• Shadow核心参数：
  • blur设为0：直接实现无模糊的锐利阴影边缘，这是原生elevation做不到的
  • dy控制阴影向下偏移的距离，根据视觉需求调整数值
  • color设为纯black，保证阴影颜色纯净
• 层级处理：Canvas放在底层绘制阴影，内容容器设zIndex:1放在上层，确保阴影显示在内容下方
• 圆角匹配：Skia的Rect通过rx/ry设置圆角，和内容容器的圆角保持一致，避免阴影与内容错位

为什么选Skia？ #

原生React Native的elevation在Android上基于Material Design规范，阴影自带模糊过渡，无法实现完全锐利的边缘；而Skia是直接在Canvas上绘制图形，能精准控制阴影的所有属性，完美适配这类定制化视觉需求。

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