cómo hacer el efecto de desenfoque de reaccionar con nativos?

cómo hacer el efecto de desenfoque de reaccionar con nativos ? como ‘background-image’

y quiero cambiar el efecto de «desenfoque» y «ninguno» , » no » significa que no hay efecto de desenfoque

InformationsquelleAutor alucard.g | 2016-05-10

9 Comentarios

  1. 106

    Ahora usted puede hacer esto sin ningún tipo de biblioteca con el prop: blurRadius.

    E. g

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

    Explicación: el número(1) significa que la cantidad de desenfoque que se desea aplicar en la imagen, mayor es el número, la borrosa la imagen.

    por Desgracia, esto no funciona en Android (RN 0.40.0). Sin embargo, podría ser útil que busca sólo una iOS solución.

    Edición: parece estar trabajando en Android ahora.

    • trabajo en android ahora
    • Como de RN 0.46.4 esta trabajado en android para mí (API 19).
    • Estoy buscando una solución para usar un efecto de desenfoque con animación de evento, pero esto no funciona con los que incluso en los controladores nativos. Cualquier otra solución?
    • href=»https://stackoverflow.com/questions/50317255/react-native-how-to-do-blur-view-like-ios-or-instagram»>Es posible mostrar el contenido que está detrás de la modal ?
    • increíble que esto funciona sin ningún tipo de biblioteca, simplemente una gran noticia y puede ser utilizado en <ImageBackground
  2. 7

    De desenfoque y una Vista completa en react-native puede utilizar react-native-blur y aplicarlo como este:

    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"
    

    Resultado:

    cómo hacer el efecto de desenfoque de reaccionar con nativos?

    • Puede usted por favor me guía sobre cómo unblur el contenido, en la que se pulse un botón?
    • todo lo que tienes que hacer es definir una variable dentro de la blurRadiius, como este: <imagen blurRadius={currentBlur}/> a continuación, en su buttonClick cambiar la variable a la que desee desenfoque onPress=()=>{este.currentBlur=0.5} algo como que
  3. 3

    Trate de usar {ImageBackground} de ‘reaccionar-nativa» y establecer blurRadius={número} como este:

    <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

    • Impresionante la solución! esto salvar mi día…
    • Gracias, estaba buscando esto.
  4. 2

    Si ha creado una aplicación a través de CRNA yo.e, el uso de la expo. Usted puede utilizar BlurView de la expo.

    import {BlurView} from 'expo';

    Consiguió dos puntales para controlar el efecto de desenfoque.

    tint que lleva cadena de valor, es decir,light, default, o dark.
    y intensity que va desde 1 to 100

    • Esta solución sólo funciona en iOS
    • Funciona sólo para las imágenes? ¿O es que esta desenfoque de los nativos de vista con todos los niños de los componentes?

Dejar respuesta

Please enter your comment!
Please enter your name here