이미지에 filter 효과 적용하기(Blur + Brightness)

(당분간 velog보다 티스토리를 더 열심히 할 예정이라, velog에 썼던 글을 그대로 가져왔음)

오늘 구현할 것

React Native에서는 CSS의 이미지 filter 속성을 사용할 수가 없다.
따라서 ImageBackground의 Style Props를 이용해서 Blur 효과를, 그리고 정석적인 방법은 아니지만 추가적인 View를 통해서 이미지의 밝기를 높이는 효과를 구현해 보려고 한다.

Blur 효과

import React from 'react';
import { View, ImageBackground, } from 'react-native';

function App() {
    return (
      <View style={{flex: 1,}}>
            <ImageBackground 
              source={require('./test.jpg')} 
              style={{flex: 1, resizeMode: 'cover',}}
              blurRadius={30}	//Blur 효과
            >
            </ImageBackground>
      </View>
    );
}

export default App;

ImageBackground의 blurRadius 속성 값을 조절하여 원하는 블러 효과를 만들어 낼 수 있다.

 

순서대로 blurRadius가 10, 50, 30

Brightness 효과

 

import React from 'react';
import { View, ImageBackground, } from 'react-native';

function App() {
    return (
      <View style={{flex: 1,}}>
            <ImageBackground 
              source={require('./test.jpg')} 
              style={{flex: 1, resizeMode: 'cover',}}
              blurRadius={30}
            >
                //View를 추가하여 밝기 조절하기
                <View style={{flex: 1, backgroundColor: 'rgba(255, 255, 255, 0.3)',}}></View>

            </ImageBackground>
      </View>
    );
}

export default App;

Blur 효과를 적용한 상태에서 이미지를 꽉 채우는 View를 만들고, 배경을 색상과 투명도를 조정해 이미지 밝기를 변경한다.

rgba(0, 0, 0, 0.3)과 rgba(255, 255, 255, 0.3)