Javascript 如何使任何子组件在react native中模糊？

关于如何在react native中模糊图像，有很多选项，但我希望模糊视图组件（或任何其他组件，不管它值多少），而不是图像

我怎样才能做到这一点呢？

您可以使用它在react native中使任何视图模糊

试试这个

import React, { Component } from "react";
import { View, Image, Text, findNodeHandle, StyleSheet } from "react-native";
import { BlurView } from "@react-native-community/blur";

export default class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = { viewRef: null };
  }

  imageLoaded() {
    this.setState({ viewRef: findNodeHandle(this.backgroundImage) });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Hi, I am some unblurred text</Text>
        <BlurView
          style={styles.absolute}
          viewRef={this.state.viewRef}
          blurType="light"
          blurAmount={10}
        />
        <Image
          ref={img => {
            this.backgroundImage = img;
          }}
          source={{ uri }}
          style={styles.absolute}
          onLoadEnd={this.imageLoaded.bind(this)}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    alignItems: "center"
  },
  absolute: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0
  }
});

import React，{Component}来自“React”；
从“react native”导入{视图、图像、文本、findNodeHandle、样式表}；
从“@react native community/blur”导入{BlurView}；
导出默认类菜单扩展组件{
建造师（道具）{
超级（道具）；
this.state={viewRef:null}；
}
imageLoaded（）{
this.setState（{viewRef:findNodeHandle（this.backgroundImage）}）；
}
render（）{
返回(
嗨，我是一些无障碍的文本
{
this.backgroundImage=img；
}}
source={{uri}}
style={style.absolute}
onLoadEnd={this.imageLoaded.bind（this）}
/>
);
}
}
const styles=StyleSheet.create({
容器：{
辩护内容：“中心”，
对齐项目：“中心”
},
绝对：{
位置：“绝对”，
排名：0，
左:0,，
底部：0，
右：0
}
});