Блог

Главная - Вопросы по программированию - Я хочу размыть фон, когда модальный открывается в react native

Я хочу размыть фон, когда модальный открывается в react native

#css #react-native #stylesheet #modal-view

#css #react-native #таблица стилей #modal-view

Вопрос:

Предположим, у меня есть модальный в react-native view, и всякий раз, когда я открываю модальный, я хочу размыть или изменить цвет фонового представления, просто сфокусировавшись только на модальном.

Заранее спасибо

Комментарии:

1. Вы что-нибудь пробовали?

2. Некоторые доступные решения в stackoverflow, но у меня ничего не получилось

Ответ №1:

Используйте react-native-blur

 import React, { Component } from "react";
import { Animated, View, Platform, Easing, StyleSheet} from "react-native";
import { BlurView } from "@react-native-community/blur"; 

export default class Blur extends Component {

  render() {
    return (
      <BlurView
        style={styles.blur}
        blurType="light" 
        blurAmount={10} 
        reducedTransparencyFallbackColor="white"
      />
    );
  }
}

const styles = StyleSheet.create({
  blur: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    justifyContent: "center",
    backgroundColor: "rgba(100,100,100, 0.5)",
    padding: 20,

    // zIndex: 10,
    // opacity: 0.5,
  },
});

Ответ №2:

Я использую universal blur HOC, который исправляет некоторые ошибки iOS Android

 import React from 'react';
import { Button, Text, View } from 'react-native';
import { withBlurModal } from './MyWithBlurModal';

const MyModalContent = ({ openModal, closeModal }) => (
  <View>
    <Text>MyModalContent</Text>
    <Button title="Close modal" onPress={closeModal} />
  </View>
);

const MyScreen = ({ openModal, closeModal, blurTargetRef }) => (
  <View
    // ref need for Android to indicate what part of View need to blur
    ref={blurTargetRef}
  >
    <Button title="Open modal" onPress={openModal} />
  </View>
);

const Screen = withBlurModal(MyModalContent)(MyScreen);