时间戳

首页 > 解决方案 > 动态反应原生模糊背景

react-native - 动态反应原生模糊背景

问题描述

大家好，我正在使用 Overlay 元素表单 react-native elemens 包。我想在叠加层上模糊背景。叠加效果很好，但我无法使背景模糊。

import {Overlay} from 'react-native-elements';

<Overlay
  overlayStyle={{ borderRadius: 20, width: "90%" }}
  isVisible={this.state.isOverlay}
  onBackdropPress={() => {
    this.toggleOverlay();
  }}
>
  <KeyboardAwareScrollView maxHeight={500} showsVerticalScrollIndicator={false}>
    <Box flex={1} borderRadius={30}>
      <Text>Give a Star</Text>
      <Box marginVertical={10} mr={55}>
        <StarRating
          disabled={false}
          starSize={48}
          emptyStarColor="#D6D6D6"
          maxStars={5}
          rating={this.state.starCount}
          selectedStar={(rating) => this.onStarRatingPress(rating)}
          fullStarColor={"#8EC4DC"}
        />
      </Box>
    </Box>
  </KeyboardAwareScrollView>
</Overlay>;

标签： react-nativeoverlayblur

解决方案

不要认为仅依靠库存叠加就可以使用模糊效果。

我使用了来自 expo 的 BlurView 来实现我在这里寻找的效果：

https://docs.expo.io/versions/latest/sdk/blur-view/

注意：它在 android 上并没有真正模糊，但在他们的文档中指出：

On iOS, it renders a native blur view. On Android, it falls back to a semi-transparent view.

例子：

import { BlurView } from "expo-blur";

return (
    <View style={styles.behind}>
      <BlurView
        tint="dark"
        intensity={80}
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          padding: 0,
        }}
      >
        <Text>Stuff on top</text>
      </BlurView>
      <Text>Stuff Behind</Text>
    </View>
  );
};

推荐阅读