如何在React Native文本元素中使用CSS filter: blur()属性？

React Native 样式表没有直接对应 CSS filter: blur() 的属性，你可以通过以下两种方式实现文本模糊：

1. 文本阴影模拟（无额外依赖） #

利用文本阴影特性，用与文本同色的阴影并设置大半径，实现近似的模糊效果：

import React from 'react';
import { Text, StyleSheet } from 'react-native';

const BlurryText = () => {
  return (
    <Text style={styles.blurryText}>模糊的文本内容</Text>
  );
};

const styles = StyleSheet.create({
  blurryText: {
    fontSize: 28,
    color: '#333',
    textShadowColor: '#333',
    textShadowOffset: { width: 0, height: 0 },
    textShadowRadius: 6, // 数值越大，模糊程度越高
  },
});

export default BlurryText;

这种方法的效果和 CSS 模糊不完全一致，但胜在无需引入第三方库，实现成本低。

2. 第三方库实现精准模糊 #

使用 @react-native-community/blur 库可以实现更接近 CSS filter: blur() 的效果：

步骤1：安装依赖 #

npm install @react-native-community/blur
# 或 yarn add @react-native-community/blur

React Native 0.60+ 版本会自动完成链接，无需额外操作。

步骤2：代码实现 #

将文本与 BlurView 放在同一容器内，通过绝对定位让 BlurView 覆盖文本，从而应用模糊：

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { BlurView } from '@react-native-community/blur';

const BlurryText = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>模糊的文本内容</Text>
      <BlurView
        style={styles.blurOverlay}
        blurType="dark" // 可选值：light、dark、xlight
        blurAmount={8} // 模糊程度，范围 0-100
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    position: 'relative',
  },
  text: {
    fontSize: 28,
    color: '#333',
  },
  blurOverlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

export default BlurryText;

Expo 项目适配 #

如果你用的是 Expo 项目，可以直接使用官方提供的 expo-blur：

expo install expo-blur

使用方式与上述 BlurView 一致，只需把导入路径换成 import { BlurView } from 'expo-blur' 即可。

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