2

有人知道如何设置底部标签栏的样式，以便拥有这样的东西吗？

底部标签栏

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

我的导航文件如下所示：

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

4

1 回答 1

1

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

我的项目现在看起来像这样：

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%',
            borderRadius: 30,
            backgroundColor: '#fff',
        },
    }

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

于 2019-12-29T21:01:09.150 回答