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

Question

我是 native react 的新手，我正在使用 react-navigation 和 react-navigation-material-bottom-tabs 。

我想要做的就是弯曲底部标签栏的右上角和左上角。

我的代码:

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',
        },
    }
);

Answer 1

抱歉，我不是 react-native pro，但经过一段时间的调试后，我想出了解决方案，将 overflow: 'hidden' 添加到 barStyle。问题在于子 div，因为它继承了与圆角边框重叠的背景颜色。

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

见工作 snack.expo