Gorhom BottomSheet用BlurView透明背景时圆角失效的解决方法

我用BlurView给Gorhom BottomSheet实现了透明模糊背景，但BlurView导致BottomSheet的左上角和右上角圆角消失。尝试调整View、BottomSheet和BlurView的style与backgroundStyle组合都没解决问题，原代码如下：

import React from 'react'
import { useMemo } from "react"
import BottomSheet from "@gorhom/bottom-sheet"
import { StyleSheet, View, Text, Image, ImageBackground } from 'react-native'
import { BlurView } from "@react-native-community/blur";

const image = {uri: 'https://legacy.reactjs.org/logo-og.png'};

function TestScreen() {
    const snapPoints = useMemo(() => ["25%", "50%", "70%"], []);

    return (
        <View style={styles.container}>
            <ImageBackground source={image} resizeMode="cover" style={styles.image}>
                <BottomSheet 
                    index={0} 
                    snapPoints={snapPoints} 
                    backgroundStyle={styles.bottomSheet}
                    backgroundComponent={({ style, backgroundStyle }) => (
                        <BlurView
                            style={[style, { flex: 1, overflow: 'hidden'}]}
                            blurType="light"
                            blurAmount={10}
                            reducedTransparencyFallbackColor="white"
                            backgroundStyle={[backgroundStyle, {flex:1, overflow: 'hidden'}]}
                        />
                    )}
                >
                    {/* Your BottomSheet content here */}
                </BottomSheet>
            </ImageBackground>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    image: {
        flex: 1,
        justifyContent: 'center',
    },
    bottomSheetWrapper: {
        flex: 1,
        borderTopLeftRadius: 100,
        borderTopRightRadius: 100,
        overflow: 'hidden', // Ensure content inside the container respects rounded corners
    },
    bottomSheet: {
        flex: 1, // Ensure BottomSheet fills the entire container
        borderTopLeftRadius: 50, // Adjust as needed
        borderTopRightRadius: 50, // Adjust as needed
    },
    text: {
        color: 'white',
        fontSize: 42,
        lineHeight: 84,
        fontWeight: 'bold',
        textAlign: 'center',
        backgroundColor: '#000000c0',
    },
});

export default TestScreen;

解决方法 #

BlurView本身对圆角的支持有限，需要通过外层容器裁剪来实现圆角效果。修改backgroundComponent，用一个带圆角和overflow: 'hidden'的View包裹BlurView，让BlurView在这个容器内显示，就能保留圆角：

import React from 'react'
import { useMemo } from "react"
import BottomSheet from "@gorhom/bottom-sheet"
import { StyleSheet, View, Text, Image, ImageBackground } from 'react-native'
import { BlurView } from "@react-native-community/blur";

const image = {uri: 'https://legacy.reactjs.org/logo-og.png'};

function TestScreen() {
    const snapPoints = useMemo(() => ["25%", "50%", "70%"], []);

    return (
        <View style={styles.container}>
            <ImageBackground source={image} resizeMode="cover" style={styles.image}>
                <BottomSheet 
                    index={0} 
                    snapPoints={snapPoints}
                    backgroundComponent={({ style }) => (
                        // 外层容器设置圆角和裁剪
                        <View style={[style, styles.bottomSheetContainer]}>
                            <BlurView
                                style={styles.blurView}
                                blurType="light"
                                blurAmount={10}
                                reducedTransparencyFallbackColor="white"
                            />
                        </View>
                    )}
                >
                    {/* Your BottomSheet content here */}
                </BottomSheet>
            </ImageBackground>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    image: {
        flex: 1,
        justifyContent: 'center',
    },
    bottomSheetContainer: {
        flex: 1,
        borderTopLeftRadius: 50,
        borderTopRightRadius: 50,
        overflow: 'hidden', // 关键：裁剪超出容器的内容
    },
    blurView: {
        flex: 1,
    },
    text: {
        color: 'white',
        fontSize: 42,
        lineHeight: 84,
        fontWeight: 'bold',
        textAlign: 'center',
        backgroundColor: '#000000c0',
    },
});

export default TestScreen;

修改说明 #

• 移除了原backgroundStyle属性，将圆角和裁剪逻辑移到包裹BlurView的外层View中
• 外层View的overflow: 'hidden'会裁剪掉BlurView超出圆角的部分，从而保留BottomSheet的圆角形状
• BlurView只需设置flex:1填满父容器即可，不需要额外的圆角或overflow设置

内容的提问来源于stack exchange，提问作者user24094248