изменение индикатора Style в соответствии с активной вкладкой в ​​реагировать на навигацию - PullRequest
0 голосов
/ 21 апреля 2019

В моей панели навигации есть 3 вкладки, я добавил borderRadius ко всей панели навигации и Indicator.Чего я хочу добиться, так это

  • Когда активна 1-я вкладка, необходимо удалить как borderBottomRightRadius, так и borderTopRightRadius.
  • когда активна средняя вкладка, необходимо удалить borderRadius всего indicator.
  • Когда активна третья вкладка, необходимо удалить borderBottomLeftRadius и borderTopLeftRadius

Ниже на изображениях показан текущий сценарий.

when the 1st tab is active

When the middle tab is active

when the 3rd tab is active

вот код.

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

Как я могу это исправить?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...