如何弯曲react-navigation-material-bottom-tabs的顶部两个角?

2023-11-22

我是本地反应新手,我正在使用反应导航 & 反应导航材料底部选项卡.

我想做的就是弯曲底部选项卡栏的右上角和左上角。

My Code:

const screen1 = createMaterialBottomTabNavigator(
    {
        Home: {
            screen: HomeScreen,
            style : {
                backgroundColor: 'black'
            }
        },
        About: AboutScreen,
        Scan: ScanScreen,
        Fav: AllScreen
    },
    {
        initialRouteName: "Home",
        activeColor: 'red',
        inactiveColor: 'blue',

        barStyle: {
            borderWidth: 0.5,
            borderBottomWidth: 1,
            backgroundColor: 'white',
            borderBottomLeftRadius: 0,
            borderBottomRightRadius: 0,
            borderTopLeftRadius: 15,
            borderTopRightRadius: 15,
            borderTopColor: '#000',
            borderBottomColor: '#000',
            borderLeftColor: '#000',
            borderRightColor: '#000',
        },
    }
);


抱歉,我不是反应本机专业人士,但经过一段时间的调试后,我通过添加找到了解决方案overflow: 'hidden'到 barStyle.问题在于子 div,因为它继承了与圆形边框重叠的背景颜色。

enter image description here

barStyle: {
            borderWidth: 0.5,
            borderBottomWidth: 1,
            backgroundColor:'orange',
            borderTopLeftRadius: 15,
            borderTopRightRadius: 15,
            borderColor: 'transparent',
            overflow: 'hidden',
        },  

看工作零食博览会

enter image description here

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何弯曲react-navigation-material-bottom-tabs的顶部两个角? 的相关文章

随机推荐