我是新来的本地人,我正在使用react-navigation-material-bottom-tabs和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',
},
}
);
[对不起,我不是反应母语的专业人士,但经过一段时间的调试,我提出了通过添加overflow: 'hidden'
或将padding: 5
设置为barStyle的解决方案。问题出在子div上,因为它继承了与圆形边框重叠的背景颜色。
barStyle: {
borderWidth: 0.5,
borderBottomWidth: 1,
backgroundColor:'orange',
borderTopLeftRadius: 15,
borderTopRightRadius: 15,
borderColor: 'transparent',
overflow: 'hidden',
},
请参见工作snack.expo