как сделать эффект размытия с помощью реакции-родной? как "background-image"
и я хочу переключить эффект "размытие" и "нет", "нет" означает эффект размытия
как сделать эффект размытия с помощью реакции-родной? как "background-image"
и я хочу переключить эффект "размытие" и "нет", "нет" означает эффект размытия
Теперь вы можете сделать это без использования библиотеки с помощью prop: blurRadius.
например
<Image
style={styles.img}
resizeMode='cover'
source={imgSrc}
blurRadius={1}
/>
Объяснение: число (1) означает количество размытия, которое вы хотите применить на изображении, тем выше число, тем более грубое изображение.
К сожалению, это еще не работает на Android (RN 0.40.0). Тем не менее, может быть полезно, кто ищет только решение iOS.
Изменить: Сейчас работает на Android.
Для размытия и всего вида в react-native
вы можете использовать @react-native-community/blur
и применить его следующим образом:
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 (
<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-community/blur": "^3.2.2"
Результат:
Установите react-native-blur:
npm install react-native-blur
import BlurView from 'react-native-blur';
...
<BlurView blurType="light" style={styles.blur}>
...
Попробуйте использовать {ImageBackground} из'act-native 'и установите blurRadius = {число} следующим образом:
<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
Если вы создали свое приложение, используя CRNA, т.е. используя expo. Вы можете использовать BlurView с выставки.
import {BlurView} from 'expo';
У него есть два реквизита для управления эффектом размытия.
tint
, который принимает строковое значение, а именно light
, default
или dark
.
и intensity
в диапазоне от 1 to 100
Попробуйте эту размытую библиотеку.
dependencies:: compile 'jp.wasabeef: blurry: 2.0.2'
вы можете использовать эту библиотеку для получения желаемых эффектов. https://github.com/react-native-fellowship/react-native-blur
Я нашел, что npm выглядит очень хорошо react-native-blur
С последней родной версией React (0.57) вы можете использовать blurRadius, она работает как на iOS, так и на Androidhttp://facebook.github.io/react-native/docs/image#blurradius