要模糊和整个react-native
视图,您可以使用@react-native-community/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>
);
}
}
// Deps:
"react-native": "0.53.3",
"@react-native-community/blur": "^3.2.2"
结果:
0
如何使用react-native产生模糊效果?就像“背景图片”
我想切换效果“模糊”和“无”,“无”表示没有模糊效果