comment rendre l'effet flou avec react-native?
image description here" src="/images/content/37131278/76c6d313b64c94d0b3cb16404c561e67.jpg">
comment rendre l'effet flou avec react-native ? comme 'background-image'
et je veux passer à l'effet "flou" et "aucun" ， "none" signifie qu'aucun effet de flou
8 réponses
Maintenant vous pouvez le faire sans aucune bibliothèque en utilisant le prop: blurRadius.
E. g
<Image
style={styles.img}
resizeMode='cover'
source={imgSrc}
blurRadius={1}
/>
Explication: le nombre(1) signifie la quantité de flou que vous voulez appliquer sur l'image, plus le nombre est élevé, plus l'image est floue.
malheureusement, cela ne fonctionne pas encore sur Android (RN 0.40.0). Néanmoins, il pourrait être utile pour qui cherche seulement un iOS solution.
Edit: Il semble fonctionner sur Android maintenant.
Installer réagissent-native-flou:
npm install react-native-blur
import BlurView from 'react-native-blur';
...
<BlurView blurType="light" style={styles.blur}>
...
si vous avez créé votre application en utilisant CRNA I. e, en utilisant expo. Vous pouvez utiliser Flurview depuis expo.
import {BlurView} from 'expo';
il y a deux accessoires pour contrôler l'effet flou.
tint qui prend la valeur de chaîne à savoir light, default, ou dark.
et intensity qui va de moins!--6-->
Essayez d'utiliser {ImageBackground} à partir de 'réagir indigènes" et blurRadius={numéro} comme ceci:
<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
flou et une Vue d'ensemble react-native vous pouvez utiliser react-native-blur et l'appliquer comme ceci:
import React, { Component } from 'react';
import { BlurView } from 'react-native-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-blur": "^3.2.2"
Résultat:
essayez cette bibliothèque floue.
dépendances :: compiler 'jp.wasabeef:floues:2.0.2'
vous pouvez utiliser cette bibliothèque pour obtenir les effets désirés. https://github.com/react-native-fellowship/react-native-blur
j'ai trouvé ce mnp à l'air très bien réagissent-native-flou