如何在React Native Android视图下实现模糊彩色阴影效果

方案一：Expo BlurView + 绝对定位模拟 #

用Expo自带的expo-blur就能实现，不用额外第三方库，上手快：

1. 先装依赖（Expo项目直接执行命令）：

npx expo install expo-blur

2. 代码示例：

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

const ColoredShadowCard = () => {
  return (
    <View style={styles.container}>
      {/* 彩色模糊阴影层 */}
      <BlurView
        style={styles.shadow}
        intensity={30} // 调整数值控制模糊程度
        tint="dark"
      />
      {/* 主体卡片 */}
      <View style={styles.card}>
        {/* 这里放置你的组件内容 */}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    width: 300,
    height: 200,
    alignItems: 'center',
    justifyContent: 'center',
  },
  shadow: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    borderRadius: 16,
    backgroundColor: 'rgba(138, 43, 226, 0.4)', // 修改颜色/透明度匹配需求
    top: 8, // 阴影垂直偏移量
    left: 8, // 阴影水平偏移量
  },
  card: {
    width: '100%',
    height: '100%',
    backgroundColor: '#fff',
    borderRadius: 16,
    padding: 20,
    zIndex: 1, // 确保卡片在阴影层上方
  },
});

export default ColoredShadowCard;

调整阴影层的颜色、偏移量和模糊强度，就能调出你想要的彩色模糊阴影效果。

方案二：react-native-reanimated 自定义阴影 #

如果需要更精细的控制（比如添加交互动画），用react-native-reanimated，完全兼容Expo环境：

1. 安装依赖：

npx expo install react-native-reanimated

记得在babel.config.js中添加插件配置：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

2. 代码示例：

import { View, StyleSheet } from 'react-native';
import Animated, { useAnimatedStyle } from 'react-native-reanimated';
import { BlurView } from 'expo-blur';

const CustomColoredShadowCard = () => {
  const shadowAnimatedStyle = useAnimatedStyle(() => {
    return {
      shadowColor: '#8A2BE2',
      shadowOffset: { width: 0, height: 10 },
      shadowOpacity: 0.5,
      shadowRadius: 20,
      elevation: 8,
    };
  });

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.card, shadowAnimatedStyle]}>
        {/* 你的组件内容 */}
      </Animated.View>
      {/* 额外彩色模糊层增强Android端效果 */}
      <BlurView
        style={styles.colorShadowLayer}
        intensity={25}
        tint="dark"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    width: 300,
    height: 200,
    alignItems: 'center',
    justifyContent: 'center',
  },
  card: {
    width: '100%',
    height: '100%',
    backgroundColor: '#fff',
    borderRadius: 16,
    padding: 20,
    zIndex: 1,
  },
  colorShadowLayer: {
    position: 'absolute',
    width: '95%',
    height: '95%',
    borderRadius: 16,
    backgroundColor: 'rgba(138, 43, 226, 0.2)',
    top: 10,
    left: 5,
  },
});

export default CustomColoredShadowCard;

方案三：React Native 0.73+ 原生阴影支持 #

如果你的Expo SDK版本在50及以上（对应RN 0.73），Android端已经原生支持shadowColor、shadowOpacity等属性，直接设置即可，最省心：

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

const NativeColoredShadowCard = () => {
  return (
    <View style={styles.container}>
      <View style={styles.card}>
        {/* 你的组件内容 */}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: 300,
    height: 200,
    alignItems: 'center',
    justifyContent: 'center',
  },
  card: {
    width: '100%',
    height: '100%',
    backgroundColor: '#fff',
    borderRadius: 16,
    padding: 20,
    shadowColor: '#8A2BE2',
    shadowOffset: { width: 0, height: 8 },
    shadowOpacity: 0.4,
    shadowRadius: 16,
    elevation: 8, // 保留elevation保证阴影层级
  },
});

export default NativeColoredShadowCard;

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