如何在React Native中实现局部模糊效果

Question

我正在尝试在React Native中创建图像的'聚焦'效果，但我无法使用模糊和覆盖创建此效果。

有人知道可能如何实现吗？

这是我想到的一个例子：

- EladA

---

不确定这是否是您需求的有效方法，但可以通过两次渲染图像来实现。第一张图片是模糊的背景。将整个图像进行模糊处理。然后叠加一个非模糊的图像并偏移它以使其正确对齐。您可以添加边框半径使其变成圆形。 - Travis White

@TravisWhite，非常感谢您的建议！有没有可能提供一段代码片段，让我可以开始测试？ - EladA

@EladA 你好，你成功让它工作了吗？？？ - Firas Abu Fares

Answer 1

使用来自@react-native-masked-view/masked-view的MaskedView和来自@react-native-community/blur的BlurView，以获得此结果

snack链接

结果:

代码:

export default function App() {
  const { width, height } = useWindowDimensions();
  return (
    <View style={styles.container}>
      <MakedView
        style={{ width, height, alignItems: 'center' }}
        maskElement={
          <BlurView
            tint="dark"
            intensity={54}
            style={{
              width,
              height,
              backgroundColor: 'transparent',
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <View
              style={{
                width: 200,
                height: 200,
                borderRadius: 100,
                backgroundColor: '#fff',
              }}></View>
          </BlurView>
        }>
        <Image
          style={{ width, height, backgroundColor: 'transparent' }}
          source={{
            uri: 'https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg',
          }}
        />
      </MakedView>
    </View>
  );
}

- Ashwith Saldanha

Answer 2

你可以查看一下 react-native-blur 库。

他们的示例展示了一个带有按钮的模糊背景。你也可以很容易地在模糊背景上放置一张图片。

希望这能帮到你。

https://github.com/react-native-community/react-native-blur

- Corey

---

谢谢你的回答，Corey。恐怕这不是我想要的（尝试过了）。目前我们正在服务器端使用Pillow和CV渲染图像。 - EladA

Answer 3

npm i react-native-blur-overlay 使用这个库，有几个属性可以按照你的需要部分模糊你的图片。

- Apps Maven