React native Bottom Tab Bar样式添加凹凸

Question

有人知道如何设置“底部标签栏”的样式，以便具有这样的功能吗？

我能够设计每个项目，还可以设计整个底部栏以在左右增加半径，但是困难的部分是相机图标上方的小凸起，我不知道该怎么做

我的导航文件看起来像这样：

const TabNavigator = createMaterialBottomTabNavigator(
{
    Home: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarIcon: ({tintColor}) => (tintColor === Color.primary ?
                    <Image source={home_icon} resizeMode="contain"
                           style={{width: 20, height: 20, tintColor: tintColor}}/>
                    :
                    <Image source={home_icon} resizeMode="contain"
                           style={{width: 20, height: 20, tintColor: tintColor}}/>
            ),
        }
    },
    Cart2: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarIcon: ({tintColor}) => (tintColor === Color.primary ?
                    <Image source={ranking_icon} resizeMode="contain"
                           style={{width: 20, height: 20, tintColor: tintColor}}/>
                    :
                    <Image source={ranking_icon} resizeMode="contain"
                           style={{width: 20, height: 20, tintColor: tintColor}}/>
            ),
        }
    },
    Cart3: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarIcon: ({tintColor}) => (tintColor === Color.primary ?
                    <Image source={photo_icon} resizeMode="contain"
                           style={{
                               width: 25,
                               height: 25,
                               position: 'absolute',
                               top: -10,
                               tintColor: tintColor,
                               marginBottom: 20
                           }}/>
                    :
                    <Image source={photo_icon} resizeMode="contain"
                           style={{width: 25, height: 25, tintColor: tintColor}}/>
            ),
        }
    },
    Cart4: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarIcon: ({tintColor}) => (tintColor === Color.primary ?
                    <Image source={gallery_icon} resizeMode="contain"
                           style={{width: 20, height: 20, tintColor: tintColor}}/>
                    :
                    <Image source={gallery_icon} resizeMode="contain"
                           style={{width: 20, height: 20, tintColor: tintColor}}/>
            ),
        }
    },
    Cart5: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarIcon: ({tintColor}) => (tintColor === Color.primary ?
                    <Image source={mission_icon} resizeMode="contain"
                           style={{width: 20, height: 20, tintColor: tintColor}}/>
                    :
                    <Image source={mission_icon} resizeMode="contain"
                           style={{width: 20, height: 20, tintColor: tintColor}}/>
            ),
        }
    },
},
{
    initialRouteName: "Home",
    activeColor: Color.primary,
    barStyle: {
        backgroundColor: Color.white,
        borderTopLeftRadius: 30,
        borderTopRightRadius: 30,
        borderBottomStartRadius: 30,
        borderBottomEndRadius: 30,
        overflow: 'hidden'
    },
},
);
export default createAppContainer(TabNavigator)

我正在Expo中使用此库material-bottom-tabs

Answer 1

感谢我的同事，问题已解决您需要使用“ createBottomTabNavigator”而不是“ createMaterialBottomTabNavigator”，因为“材料底部选项卡”不支持溢出，因此您无法将圆添加为超出范围的Item。

我的物品现在看起来像这样：

Photo: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarLabel: ' ',
            tabBarIcon: ({tintColor}) => (tintColor === Color.primary ?
                    <TouchableOpacity
                        activeOpacity={1}
                        style={{
                            borderRadius: Math.round((150 * 0.5) + (150 * 0.5)) / 2,
                            width: 150 * 0.5,
                            height: 150 * 0.5,
                            backgroundColor: '#fff',

                            justifyContent: 'center',
                            alignItems: 'center'
                        }}
                        underlayColor='#ccc'
                    >

                        <Image source={photo_icon} resizeMode="contain"
                               style={{
                                   width: 30,
                                   height: 30,
                                   tintColor: tintColor,
                               }}/>
                    </TouchableOpacity>
                    :
                    <TouchableOpacity
                        activeOpacity={1}
                        style={{
                            borderRadius: Math.round((150 * 0.5) + (150 * 0.5)) / 2,
                            width: 150 * 0.5,
                            height: 150 * 0.5,
                            backgroundColor: '#fff',
                            justifyContent: 'center',
                            alignItems: 'center',
                        }}
                        underlayColor='#ccc'
                    >

                        <Image source={photo_icon} resizeMode="contain"
                               style={{
                                   width: 30,
                                   height: 30,
                                   tintColor: tintColor,
                               }}/>
                    </TouchableOpacity>
            ),
        }
    },

现在删除“ barStyle”以使用“ tabBarOptions”：

tabBarOptions: {
        activeTintColor: Color.primary,
        style: {
            borderTopWidth: 0,
            width: '100%', // Or using a percentage as required
            borderRadius: 30,
            backgroundColor: '#fff',
        },
    }

然后您将获得我在上一个屏幕中想要的确切渲染，谢谢