wake-up-neo.com

wie macht man den Unschärfeeffekt mit React-native?

 enter image description here

wie macht man den Unschärfeeffekt mit React-native? wie 'Hintergrundbild' 

und ich möchte den Effekt "Unschärfe" umschalten und "keine" , "keine" bedeutet keinen Unschärfeeffekt

29
alucard.g

Jetzt können Sie dies auch ohne Bibliothek mit der Requisite: blurRadius .

Z.B

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

Erklärung : Die Zahl (1) gibt an, wie viel Unschärfe Sie auf das Bild anwenden möchten. Je höher die Zahl, desto unschärfer das Bild.

Leider funktioniert das auf Android noch nicht (RN 0.40.0). Trotzdem könnte es nützlich sein, wer nur nach einer iOS -Lösung sucht.

Edit: Es scheint jetzt auf Android zu arbeiten.

82
Gui Herzog

Installiere reag-native-blur

npm install react-native-blur

import BlurView from 'react-native-blur';

...
<BlurView blurType="light" style={styles.blur}>
...

Wenn Sie Ihre App mit CRNA, dh mit expo, erstellt haben. Sie können BlurView von expo verwenden.

import {BlurView} from 'expo';

Es hat zwei Requisiten, um den Unschärfeeffekt zu kontrollieren.

tint nimmt den Stringwert an, nämlich light, default oder dark. Und intensity, die von 1 to 100 reichen.

2
Tharzeez

Versuchen Sie es mit {ImageBackground} von 'React-native' und setzen Sie blurRadius = {number} wie folgt:

<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-nestinghttps://facebook.github.io/react-native/ docs/image.html # blurradius

1
nivort

Um eine vollständige Ansicht in react-native zu verwischen, können Sie react-native-blur verwenden und folgendermaßen anwenden:

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>
    );
  }
}

// Abteilungen:

 "react-native": "0.53.3",
 "react-native-blur": "^3.2.2"

Ergebnis:

 enter image description here

1
Florin Dobre

Ich fand diese npm sehr gut aussehen reag-native-blur

Verwendungszweck

0
eliprodigy

Versuchen Sie diese verschwommene Bibliothek. 

abhängigkeiten :: kompilieren 'jp.wasabeef: blurry: 2.0.2'

https://github.com/wasabeef/Blurry

0
anonymous

sie können diese Bibliothek verwenden, um die gewünschten Effekte zu erzielen. https://github.com/react-native-fellowship/react-native-blur

0
Aakash Sigdel

Mit der aktuellen React-Version (0.57) können Sie blurRadius verwenden. Es funktioniert sowohl für iOS als auch für Android http://facebook.github.io/react-native/docs/image#blurradius

0
quynhnguyen68