comment rendre l'effet flou avec react-native?

enter image description here

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

24
demandé sur alucard.g 2016-05-10 09:54:56
la source

8 ответов

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.

64
répondu Gui Herzog 2017-08-21 17:24:01
la source

Installer réagissent-native-flou:

npm install react-native-blur

import BlurView from 'react-native-blur';

...
<BlurView blurType="light" style={styles.blur}>
...
2
répondu Jan Franz Palngipang 2016-09-03 20:16:38
la source

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-->

2
répondu Tharzeez 2018-02-27 19:42:01
la source

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

1
répondu nivort 2018-06-05 10:34:15
la source

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:

enter image description here

1
répondu Florin Dobre 2018-06-19 12:46:19
la source

essayez cette bibliothèque floue.

dépendances :: compiler 'jp.wasabeef:floues:2.0.2'

https://github.com/wasabeef/Blurry

0
répondu anonymous 2016-05-10 10:00:03
la source

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

0
répondu Aakash Sigdel 2016-05-10 12:01:34
la source

j'ai trouvé ce mnp à l'air très bien réagissent-native-flou

utilisation

0
répondu eliprodigy 2016-09-03 19:06:05
la source

Autres questions sur