具有透明背景的Bottomsheet（Gorhom）未将边缘倒圆

Question

我正在尝试在底页上创建透明背景，我已经使用 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} 
                    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;

我尝试了修复 View、Bottomsheet 和 BlurView 组件的样式、backgroundStyle 的组合。

Answer 1

不要将边框半径样式添加到底部工作表本身或包装视图，要应用此样式，您应该将其添加到子组件中

<BlurView
   style={[
      style,
      { flex: 1, overflow: 'hidden'},
      {
        borderTopLeftRadius: 50, // Adjust as needed
        borderTopRightRadius: 50, // Adjust as needed
      }
   ]}
   blurType="light"
   blurAmount={10}
   reducedTransparencyFallbackColor="white"
   backgroundStyle={[backgroundStyle, {flex:1, overflow: 'hidden'}]}
 />