现在,您可以在没有任何库的情况下使用prop来做到这一点:模糊半径。
例如
<Image
style={styles.img}
resizeMode='cover'
source={imgSrc}
blurRadius={1}
/>
说明:数字(1)表示你想在图像上应用的模糊量,数字越高,图像越模糊。
不幸的是,这在Android系统上还不起作用(RN0.40.0)。然而,对于只寻找iOS解决方案的人来说,它可能很有用。
编辑:它现在似乎在Android上运行。
尝试使用“react-native”中的{Imagebackground}并像这样设置模糊Radius={number}:
<ImageBackground
style={{flex: 1}}
source={require('../assets/example.jpg')}
blurRadius={90}>
<Text>Blur background</Text>
</ImageBackground>
https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting https://facebook.github.io/react-native/docs/image.html#blurradius
要在react-native
中模糊和整个View,您可以使用@react-native-world/blur
并像这样应用它:
import React, { Component } from 'react';
import { BlurView } from '@react-native-community/blur';
import {
StyleSheet,
Text,
View,
findNodeHandle,
Platform,
Image,
} from 'react-native';
const styles = StyleSheet.create({
title: {
color: 'black',
fontSize: 15,
},
absolute: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
blurredView: {
// For me android blur did not work until applying a background color:
backgroundColor: 'white',
},
});
export default class MyBlurredComponent extends Component {
constructor(props) {
super(props);
this.state = { viewRef: null };
}
onTextViewLoaded() {
this.setState({ viewRef: findNodeHandle(this.viewRef) });
}
render() {
return (
<View>
<View
style={[
styles.blurredView,
]}
ref={(viewRef) => { this.viewRef = viewRef; }}
onLayout={() => { this.onTextViewLoaded(); }}
>
<Image
style={{ width: 100, height: 100 }}
source={{ uri: 'https://facebook.github.io/react-native/docs/assets/GettingStartedCongratulations.png' }}
/>
<Text style={[styles.title]}>
TEXT 2222 \n
TEXT 3333
</Text>
</View>
{
(this.state.viewRef || Platform.OS === 'ios') && <BlurView
style={styles.absolute}
viewRef={this.state.viewRef}
blurType="light"
blurAmount={3}
blurRadius={5}
/>
}
</View>
);
}
}
//德普斯:
"react-native": "0.53.3",
"@react-native-community/blur": "^3.2.2"
结果: