В моей панели навигации есть 3 вкладки, я добавил borderRadius
ко всей панели навигации и Indicator
.Чего я хочу добиться, так это
- Когда активна 1-я вкладка, необходимо удалить как
borderBottomRightRadius
, так и borderTopRightRadius
. - когда активна средняя вкладка, необходимо удалить
borderRadius
всего indicator
. - Когда активна третья вкладка, необходимо удалить
borderBottomLeftRadius
и borderTopLeftRadius
Ниже на изображениях показан текущий сценарий.
![when the 1st tab is active](https://i.stack.imgur.com/Qp4IJ.jpg)
![When the middle tab is active](https://i.stack.imgur.com/B5G1N.jpg)
![when the 3rd tab is active](https://i.stack.imgur.com/JUFmg.jpg)
вот код.
const Width = Dimensions.get('window').width;
const tabBarWidth = Width - 30;
const Navigation = createMaterialTopTabNavigator(
{
S1: Screen1,
S2: Screen2,
S3: Screen3,
},
{
swipeEnabled: false,
animationEnabled:false ,
tabBarOptions: {
activeTintColor: "white",
inactiveTintColor: "blue",
upperCaseLabel: false,
scrollEnabled: false,
inactiveBackgroundColor: "white",
indicatorStyle: {
height: null,
top: 0,
backgroundColor: 'blue',
borderRadius:10
},
style: {
marginLeft: 15,
marginRight:15,
borderWidth: 1,
borderRadius: 10,
height: 30,
borderColor: "blue",
backgroundColor: "white",
},
tabStyle: {
justifyContent: "center",
width: tabBarWidth/3
},
labelStyle: {
marginTop: -4
}
}
}
);
Как я могу это исправить?