Open iita71737 opened 1 year ago
iOS
https://github.com/Kureev/react-native-blur/assets/11864209/144cb1fa-c385-46f2-8bc8-afde67be3cd1
Android
https://github.com/Kureev/react-native-blur/assets/11864209/1f9dc1de-ba13-49f8-aad4-9f4b3993a5c4
import React from 'react'; import { View, StyleSheet, Image, Text, TouchableOpacity } from 'react-native'; import FastImage from 'react-native-fast-image'; import { BlurView } from '@react-native-community/blur'; import { VibrancyView } from "@react-native-community/blur"; const ViewBlurImage = () => { const [isBlurred, setIsBlurred] = React.useState(true); // const [viewRef, setViewRef] = React.useState(null); const toggleBlur = () => { setIsBlurred(!isBlurred); }; return ( <View style={styles.container}> <FastImage key={'blurryImage'} style={styles.image} source={{ uri: 'https://images.unsplash.com/photo-1600326145377-bcccb9a9daf2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2864&q=80' }} resizeMode={FastImage.resizeMode.cover} /> {isBlurred && ( <BlurView style={styles.absolute} blurType="light" blurAmount={10} // 调整模糊程度,数值越大越模糊 reducedTransparencyFallbackColor="white" // iOS 上用于模糊背景的颜色,可选 overlayColor="transparent" /> )} {/* 取消模糊效果的按钮 */} <TouchableOpacity style={styles.button} onPress={toggleBlur}> <Text style={styles.buttonText}> {isBlurred ? '取消模糊' : '添加模糊'} </Text> </TouchableOpacity> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', overflow: 'hidden' }, image: { width: '100%', height: '100%', }, absolute: { ...StyleSheet.absoluteFillObject, }, button: { position: 'absolute', bottom: 20, backgroundColor: 'white', padding: 10, borderRadius: 5, }, buttonText: { fontSize: 16, fontWeight: 'bold', }, }); export default ViewBlurImage;
On my side android is very unstable when using TextInput inside a ScrollView
iOS
https://github.com/Kureev/react-native-blur/assets/11864209/144cb1fa-c385-46f2-8bc8-afde67be3cd1
Android
https://github.com/Kureev/react-native-blur/assets/11864209/1f9dc1de-ba13-49f8-aad4-9f4b3993a5c4