web-dev-qa-db-ja.com

反応ネイティブでぼかし効果を作成する方法は？

enter image description here

反応ネイティブでぼかし効果を作る方法は？ 「背景画像」のような

そして、私は効果「ぼかし」と「なし」を切り替えたい、「なし」はぼかし効果がないことを意味する

imageimage-processingreact-nativeblur
39
alucard.g

これで、ライブラリを使用せずにprop：blurRadiusを使用してこれを行うことができます。

例えば

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

説明：数値（1）は、画像に適用するぼかしの量を意味し、数値が大きいほど、画像がぼやけます。

残念ながら、これはAndroidではまだ機能しません（RN 0.40.0）。それにもかかわらず、iOSソリューションのみを探している人にとっては便利かもしれません。

編集：現在Androidに取り組んでいるようです。

104
Gui Herzog

react-nativeでビュー全体をぼかして表示するには、react-native-blurを使用して次のように適用します。

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"

結果：

enter image description here

7
Florin Dobre

インストール react-native-blur ：

npm install react-native-blur

import BlurView from 'react-native-blur';

...
<BlurView blurType="light" style={styles.blur}>
...
3
Jan Franz Palngipang

「react-native」から{ImageBackground}を使用してみて、blurRadius = {number}を次のように設定します。

<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

3
nivort

CRNA、つまりexpoを使用してアプリを作成した場合。 ExpoからBlurViewを使用できます。

import {BlurView} from 'expo';

ぼかし効果を制御するための2つの小道具がありました。

tintは文字列値、つまりlight、default、またはdarkを取ります。およびintensityは、1 to 100から

2
Tharzeez

このnpmは非常によく見えることがわかりました react-native-blur

使用法

0
eliprodigy

このぼやけたライブラリを試してください。

依存関係::コンパイル 'jp.wasabeef：blurry：2.0.2'

https://github.com/wasabeef/Blurry

0
anonymous

このライブラリを使用して、必要な効果を得ることができます。 https://github.com/react-native-fellowship/react-native-blur

0
Aakash Sigdel

最近のReactネイティブバージョン（0.57）ではblurRadiusを使用できます。iOSとAndroidの両方で動作します http://facebook.github.io/react-native/docs/image＃blurradius

0
quynhnguyen68