React Native'de Blur Background View Oluşturma

“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 15. kısmıdır. Bir önceki makalede (Part 14), React Native’de WebView oluşturmayı ve mobil projelerimizde nasıl kullanacağımızı anlattım.
Bu makalede React Native Community Blur paketi ile Android ve iOS uygulamalarının arka plan görünümünü bulanık(blur) nasıl yapabileceğimizi öğreneceğiz.
Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.
Bu yazıda @react-native-community/blur olarak bilinen harika bir react yerel npm paketi hakkında bilgi edineceğiz. React Native Community Blur paketi, hem android hem de iOS uygulamalarına bulanık arka plan görünümü oluşturmak için kullanılır. React Native Community Blur paketinde koyu, açık ve xlight olmak üzere temel olarak 3 tür bulanıklaştırma efekti vardır. Bugün bir react native uygulaması oluşturacak ve @react-native-community/blur paketini NPM sunucusunu kullanarak proje uygulamamıza yükleyeceğiz. Yüklemeyi bitirdikten sonra, react native ile bulanık görünüm yapma kodunu yazacaktık.
1. İlk adım, @react-native-community/blur paketini projemize yüklemektir. Bu nedenle, projenizin Kök dizinini Komut İstemi veya Terminal’de açın ve aşağıdaki komutu yürütün.

npm install --save @react-native-community/blur

2. Artık android’de yükleme işlemi için başka herhangi bir komut yürütmeniz gerekmiyor. Ancak iOS için kurulum işlemini tamamlamak için aşağıdaki komutu uygulamalıyız.

cd ios && pod install && cd ..

3. Şimdi bir sonraki adım, uygulama için kodlamaya başlamaktır. Bu nedenle, projenizin ana App.js dosyasını açın ve Projenize Görünüm, Stil Sayfası, Metin, Resim ve Bulanık Görünüm bileşenini içe aktarın.

import React from 'react';
import { View, StyleSheet, Text, Image } from 'react-native';
import { BlurView } from '@react-native-community/blur';

4. Ana dışa aktarma varsayılan Uygulama işlevsel bileşenimizi oluşturma.

export default function App() {
  return (
  );
}

5. Şimdi dönüş bloğunda ilk önce bir Kök Görünüm bileşeni -> Arka Plan Görüntüsü bileşeni -> BlurView Bileşeni yapacağız. Şimdi, Bulanıklaştırma Görünümü bileşenine hangi bulanıklaştırma efektini uyguladığımızı göstermek için bir Metin bileşeni yapacağız.
Burada temel olarak 3 tür BlurView efekti mevcuttur: –
1. dark
2. light
3. xlight
Mevcut Prop:
1. stil: – Bulanıklaştırma Görünümü bileşenine stil uygulamak için kullanılır.
2. blurType: – Bulanıklaştırma türünü ayarlamak için kullanılır, desteklenen değerler dark, light, xlight’tır.
3. blurAmount: – Bulanıklaştırma yoğunluğunu ayarlar.
4. lessTransparencyFallbackColor: – Yalnızca iOS, siyah, beyaz, #rrggbb, vb. – Erişilebilirlik ayarı ReduceTransparency etkinse kullanılacak arka plan rengi.

  return (
    <View style={styleSheet.MainContainer}>
      <Image
        source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2021/04/beach_new.jpg' }}
        style={styleSheet.image}
        key={'blurryImage'} />
      <BlurView
        style={styleSheet.blurView}
        blurType="light"  // Values = dark, light, xlight .
        blurAmount={10}
       // viewRef={this.state.viewRef}
        reducedTransparencyFallbackColor="white"
      />
      <Text style={{ fontSize: 34, color: 'white', fontWeight: 'bold', textAlign: 'center' }}> React Native Blur View Dark</Text>
    </View>
  );

6. Stil Oluşturma.

const styleSheet = StyleSheet.create({
  MainContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 12
  },
  blurView: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
  image: {
      position: "absolute",
      top: 0,
      left: 0,
      bottom: 0,
      right: 0,
      resizeMode: 'cover',
      width: null,
      height: null,
  }
});

7. App.js dosyası için tam Kaynak Kodu: –

import React from 'react';
import { View, StyleSheet, Text, Image } from 'react-native';
import { BlurView } from '@react-native-community/blur';
export default function App() {
  return (
    <View style={styleSheet.MainContainer}>
      <Image
        source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2021/04/beach_new.jpg' }}
        style={styleSheet.image}
        key={'blurryImage'} />
      <BlurView
        style={styleSheet.blurView}
        blurType="light"  // Values = dark, light, xlight .
        blurAmount={10}
       // viewRef={this.state.viewRef}
        reducedTransparencyFallbackColor="white"
      />
      <Text style={{ fontSize: 34, color: 'white', fontWeight: 'bold', textAlign: 'center' }}> React Native Blur View Dark</Text>
    </View>
  );
}
const styleSheet = StyleSheet.create({
  MainContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 12
  },
  blurView: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
  image: {
      position: "absolute",
      top: 0,
      left: 0,
      bottom: 0,
      right: 0,
      resizeMode: 'cover',
      width: null,
      height: null,
  }
});

Ekran görüntüleri:

Kaynak: https://reactnativecode.com/