¿Cómo hacer el efecto de desenfoque con react-native?

Encontramos el arreglo a esta dificultad, o por lo menos eso esperamos. Si continuas con inquietudes coméntalo y con gusto te ayudaremos

Solución:

Ahora puedes hacer esto sin ninguna biblioteca usando el accesorio: desenfoqueRadio.

P.ej

Explicación: el número (1) significa la cantidad de desenfoque que desea aplicar en la imagen, cuanto mayor sea el número, más borrosa será la imagen.

Desafortunadamente, esto aún no funciona en Android (RN 0.40.0). No obstante, podría ser útil para quien busca sólo un iOS solución.

Editar: Parece estar funcionando en Android ahora.

Intente usar ImageBackground de ‘react-native’ y configure blurRadius=number así:

    Blur background

https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting https://facebook.github.io/react-native/docs/image.html#blurradius

Para desenfocar y toda una Vista en react-native puedes usar @react-native-community/blur y aplicarlo así:

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 (
      
          this.viewRef = viewRef; 
          onLayout=() =>  this.onTextViewLoaded(); 
        >
          
          
            TEXT 2222 n
            TEXT 3333
          
        
         Platform.OS === 'ios') && 
        
      
    );
  

// Depósitos:

 "react-native": "0.53.3",
 "@react-native-community/blur": "^3.2.2"

Resultado:

Si haces scroll puedes encontrar los comentarios de otros programadores, tú todavía puedes mostrar el tuyo si te apetece.

---

---

Utiliza Nuestro Buscador