使用react-native-reanimated动画Expo BlurView intensity失效排查

核心问题 #

Expo官方的BlurView默认不支持直接接收react-native-reanimated的动画值，必须先将其包装为可动画组件，才能让动画值驱动intensity属性变化。

具体修复步骤 #

1. 包装BlurView为Animated组件 #

在Headerbar代码中，导入Animated并将BlurView转换为可动画组件：

import { BlurView } from "expo-blur";
import Animated from "react-native-reanimated";

// 生成可动画的BlurView
const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);

2. 替换原组件并绑定动画值 #

将返回结构中的<BlurView>替换为<AnimatedBlurView>，确保intensity属性绑定计算后的动画值：

return (
  <AnimatedBlurView intensity={blurIntensity} style={{ flex: 1 }}>
    <View
      style={[
        {
          paddingTop: top * 1.2,
          paddingBottom: top * 0.4,
          paddingHorizontal: 16,
        },
      ]}
    />
  </AnimatedBlurView>
)

3. 确保依赖版本兼容 #

Expo SDK 49对应的react-native-reanimated版本为~3.3.0，若你手动安装了其他版本，可能存在兼容性问题，执行以下命令同步依赖：

npx expo install react-native-reanimated

4. 检查Babel配置（必要时） #

确认babel.config.js中包含Reanimated的插件，修改后需重启Metro服务：

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

修复后的完整Headerbar代码 #

import { BlurView } from "expo-blur";
import React from "react";
import { View } from "react-native";
import Animated, {
  Extrapolation,
  SharedValue,
  interpolate,
} from "react-native-reanimated";
import { useSafeAreaInsets } from "react-native-safe-area-context";

type HeaderbarProps = {
  scrollOffset: SharedValue<number>;
};

const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);

const Headerbar: React.FC<HeaderbarProps> = ({ scrollOffset }) => {
  const { top } = useSafeAreaInsets();

  const blurIntensity = interpolate(
    scrollOffset.value,
    [0, 172],
    [0, 50],
    Extrapolation.CLAMP
  );

  return (
    <AnimatedBlurView intensity={blurIntensity} style={{ flex: 1 }}>
      <View
        style={[
          {
            paddingTop: top * 1.2,
            paddingBottom: top * 0.4,
            paddingHorizontal: 16,
          },
        ]}
      />
    </AnimatedBlurView>
  );
};

export default Headerbar;

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