如何在 react-native 中将 expo-blur 添加到模态中

【问题标题】：How to add expo-blur into a modal in react-native如何在 react-native 中将 expo-blur 添加到模态中
【发布时间】：2020-08-19 17:43:47
【问题描述】：

嘿，总的来说，我对编码和 react-native 非常缺乏经验，但我正在尝试创建一个模式，它会为用户弹出一个小信息框并模糊背景页面。我能够让模态工作并根据我的规格对其进行调整，直到它工作得很好！我导入了库“expo-blur”，并在网上找到了一个正在使用它的示例，但我不知道如何在我的模态中实现模糊。请对此提供任何帮助，我们将不胜感激！我在下面附上了我的模态代码和我找到的 expo-blur 示例的图像。

Modal

BlurView example

【问题讨论】：

标签： react-native expo overlay blur modalviewcontroller

【解决方案1】：

我遇到了同样的问题，我刚刚找到了这个例子。现在它起作用了。 https://github.com/Kureev/react-native-blur/issues/105#issuecomment-257872152

在他使用类组件的示例中，我使用的是函数组件。问题是我没有使用 transparent={true} 作为模态这是我让它工作的代码：

 <Modal visible={filterScreen} animationType="slide" transparent={true}>
   <View style={{ marginTop: 100, flex: 1 }}>
     <BlurView
       intensity={100}
       style={[styles.nonBlurredContent, { height: "100%" }]}
     >
       <Text>Hello! I am bluring contents underneath</Text>
       <Text>Hello from the modal</Text>
       <TouchableOpacity
         style={{ backgroundColor: "red", width: 30, height: 30 }}
         onPress={() => setFilterScreen(!filterScreen)}
       >
         <Text>X</Text>
       </TouchableOpacity>
     </BlurView>
   </View>
 </Modal>

【讨论】：