React native 将本机边界半径添加到活动选项卡栏

我想为活动选项卡栏导航器实现一个顶部边界半径，如下图所示

下面的代码实现了整个CreateBoottomTabNavigator的边界半径，但与上面的预期不同

<Tab.Navigator
        tabBarOptions={{
            showLabel:false,
            activeBackgroundColor: COLORS.reddish,
            inactiveBackgroundColor: COLORS.transparent,
            style:{
                position:'absolute',
                bottom:0,
                right:0,
                left:0,
                elevation:0,
                height:55,
                borderTopRightRadius: 20,
                borderTopLeftRadius: 20,

            },
            
        }}
    >
        <Tab.Screen
            name="Home"
            component={Home}
            options={{
                tabBarIcon:({focused })=> (
                    <View style={{
                            alignItems:'center',
                            justifyContent:'center',
                            }}>
                        <Image 
                            source={icons.home}
                            resizeMode='contain'
                            style={{
                                width:30,
                                height:30,
                                tintColor:focused?COLORS.white: COLORS.reddish
                            }}
                        />
                        <Text style={{
                            color:focused?COLORS.white:COLORS.reddish,
                            
                        }}>HOME</Text>
                    </View>
                )
            }}
        />
     //code for other Tab.Screen

(
家
)
}}
/>
//其他选项卡屏幕的代码

---

请协助

activeBackgroundColor:COLORS.red，首先删除此项并

 <View style={{
            alignItems:'center',
            borderTopRightRadius: 20,
            borderTopLeftRadius: 20,
            backgroungColor:focused?COLORS.reddish: COLORS.white
            justifyContent:'center',
         }}>

---

在Tab.screen视图中更改这个

我在阅读了React导航文档后能够理解

为了设置单个选项卡的样式，我在tabBarOptions中添加了tabStyle道具，如下面的代码所示

<Tab.Navigator
        tabBarOptions={{
            showLabel:false,
            activeBackgroundColor: COLORS.reddish,
            inactiveBackgroundColor: COLORS.transparent,
            tabStyle:{ //Add this 
                borderTopRightRadius:20,//add border top right radius
                borderTopLeftRadius:20,//add border top left radius
                paddingVertical:3
            },
            style:{
                position:'absolute',
                bottom:0,
                right:0,
                left:0,
                elevation:0,
                height:60,

            },
            
        }}
        
        
    >

结果如下所示，正如我所希望的

谢谢你@Ankit Patel

---

我没有尝试过你的方法，但我一定会尝试

我隐约记得在使用特定的边界半径而不仅仅是边界半径时遇到了问题。我不知道这对您是否可行，但您通常可以通过将原始视图包装到包含borderRadius样式和溢出的视图中来绕过它：“隐藏”