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

Question

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

Modal

BlurView example

Answer 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>