在没有 npm 包的情况下反应原生背景模糊

Question

我正在使用动画 ScrollView 和 Modal。我需要右图所示模态上的模糊背景。我怎样才能将这个背景添加到这个模式中？我想要没有 npm 包的模糊效果。

<Modal transparent={true}>

Answer 1

你想要这个： https: //reactnative.dev/docs/imagebackground

并使用组件属性blurRadius，例如：

import React from "react";
import { ImageBackground, StyleSheet, Text, View } from "react-native";

const image = { uri: "https://reactjs.org/logo-og.png" };

const App = () => (
  <View style={styles.container}>
    <ImageBackground source={image} blurRadius={5} resizeMode="cover" style={styles.image}>
      <Text style={styles.text}>Inside</Text>
    </ImageBackground>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    flex: 1,
    justifyContent: "center"
  },
  text: {
    color: "white",
    fontSize: 42,
    lineHeight: 84,
    fontWeight: "bold",
    textAlign: "center",
    backgroundColor: "#000000c0"
  }
});

export default App;