反应本机底部标签栏样式添加凹凸

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”，因为Material Bottom Tab 不支持溢出所以您不能添加一个圆圈作为越界的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%',
            borderRadius: 30,
            backgroundColor: '#fff',
        },
    }

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

反应本机底部标签栏样式添加凹凸

React native Bottom Tab Bar style adding bump

css

react-native

styles

bottombar