web-dev-qa-db-fra.com

comment rendre l'effet de flou avec react-native?

 enter image description here

comment rendre l'effet de flou avec react-native? comme 'background-image' 

et je veux changer l’effet 'flou' et 'aucun'

imageimage-processingreact-nativeblur
29
alucard.g

Maintenant, vous pouvez le faire sans aucune bibliothèque en utilisant le prop: blurRadius.

Par exemple

<Image
    style={styles.img}
    resizeMode='cover'
    source={imgSrc} 
    blurRadius={1}
/>

Explication: le nombre (1) signifie la quantité de flou que vous souhaitez appliquer à 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, cela pourrait être utile pour ceux qui recherchent uniquement une solution iOS.

Edit: Il semble fonctionner maintenant sur Android.

82
Gui Herzog

Installez react-native-blur : 

npm install react-native-blur

import BlurView from 'react-native-blur';

...
<BlurView blurType="light" style={styles.blur}>
...
2
Jan Franz Palngipang

Si vous avez créé votre application avec CRNA, c’est-à-dire avec expo. Vous pouvez utiliser BlurView de expo.

import {BlurView} from 'expo';

Il y avait deux accessoires pour contrôler l'effet de flou.

tint qui prend la valeur de chaîne à savoir light, default ou dark. et intensity qui va de 1 to 100

2
Tharzeez

Essayez d’utiliser {ImageBackground} depuis 'react-native' et définissez blurRadius = {numéro} comme suit:

<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-nestinghttps://facebook.github.io/react-native/ docs/image.html # blurradius

1
nivort

Pour brouiller une vue entière dans 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:

 enter image description here

1
Florin Dobre

J'ai trouvé ce npm très beau react-native-blur

utilisation

0
eliprodigy

Essayez cette bibliothèque floue. 

dependencies :: compile 'jp.wasabeef: blurry: 2.0.2'

https://github.com/wasabeef/Blurry

0
anonymous

vous pouvez utiliser cette bibliothèque pour obtenir les effets souhaités. https://github.com/react-native-fellowship/react-native-blur

0
Aakash Sigdel

Avec la version native récente de React (0.57), vous pouvez utiliser blurRadius, cela fonctionne aussi bien sur iOS que sur Android http://facebook.github.io/react-native/docs/image#blurradius }

0
quynhnguyen68