image - desenfocar - efecto blur photoshop

¿Cómo hacer que el efecto de desenfoque con reaccione nativo?

Question

¿Cómo hacer que el efecto de desenfoque con reaccione nativo? como ''imagen de fondo''

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

Answer 1

Ahora puedes hacer esto sin ninguna biblioteca usando el prop: blurRadius .

P.ej

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

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

Desafortunadamente, esto todavía no funciona en Android (RN 0.40.0). Sin embargo, podría ser útil para quienes solo buscan una solución iOS .

Edit: parece estar funcionando en Android ahora.

Answer 2

Con la versión nativa reciente de React (0.57) puede usar blurRadius, funciona tanto en iOS como en Android http://facebook.github.io/react-native/docs/image#blurradius

Answer 3

Encontré que este npm se ve muy bien react-native-blur

usage

Answer 4

Instalar react-native-blur :

npm install react-native-blur
import BlurView from ''react-native-blur'';
...
<BlurView blurType="light" style={styles.blur}>
...

Answer 5

Intente usar {ImageBackground} de ''react-native'' y configure blurRadius = {number} de esta manera:

<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

Answer 6

Para desenfocar y una vista completa en react-native , puede usar react-native-blur y aplicarlo de la siguiente manera:

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:

Answer 7

Prueba esta biblioteca borrosa.

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

https://github.com/wasabeef/Blurry

Answer 8

Puede utilizar esta biblioteca para obtener los efectos deseados. https://github.com/react-native-fellowship/react-native-blur

Answer 9

Si creó su aplicación utilizando CRNA, es decir, utilizando expo. Puedes usar BlurView desde expo.

import {BlurView} from ''expo'';

Tiene dos pilares para controlar el efecto borroso.

tint que toma el valor de la cadena a saber, light , default u dark . e intensity que va de 1 to 100