React Native 将边框半径添加到活动标签栏

Question

我想为活动标签栏导航器实现顶部边框半径，如下图所示。

我下面的代码正在为整个 createBottomTabNavigator 实现边框半径，但与我上面预期的不同

<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

请协助

Answer 1

activeBackgroundColor: COLORS.reddish, 先去掉这个然后

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

在 Tab.screen 查看更改此

Answer 2

我在阅读了 React Navigation 文档后才弄清楚。

为了设置单个选项卡的样式，我在 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。

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

Answer 3

我像这样为每个选项卡项添加了边框半径：

 <Tab.Navigator
      screenOptions={{
        tabBarActiveBackgroundColor: 'red',
        headerShown: false,
        tabBarItemStyle: {
          borderRadius: 200,
        },
      }}

React Native 将边框半径添加到活动标签栏

React Native add border Radius to active tab bar

react-native

react-navigation

react-navigation-bottom-tab