How can I curve the top two corners of react-navigation-material-bottom-tabs?

问题

I am new to react native and I am using react-navigation & react-navigation-material-bottom-tabs.

All I want to do is curve the top-right corner and top-left corner of bottom tab bar.

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

回答1:

Sorry, I'm not react-native pro but after debugging for some time i came up with solution by adding overflow: 'hidden' to barStyle. The problem lies in child div as it inherits background color which overlaps with your rounded border.

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

see working snack.expo

来源：https://stackoverflow.com/questions/58140865/how-can-i-curve-the-top-two-corners-of-react-navigation-material-bottom-tabs