Есть ли способ сделать `индикатор` из` реагирующей на навигацию`, подходящей для вкладки?

Question

Я хочу разместить indicator панели навигации на вкладке.но он подходит только для 1-й вкладки.для всех остальных вкладок индикатор немного проскальзывал для правой стороны .Я использовал margins как для левой, так и для правой части в разделе style навигации.Ниже на рисунках показан сценарий.

Вот код навигационного компонента

const Navigation = createMaterialTopTabNavigator(
    {
        S: Screen1,
        S2: Screen2,
        S3: Screen3,
    },
    {
        swipeEnabled: false,
        tabBarOptions: {
            activeTintColor: "white",
            inactiveTintColor: "blue",
            upperCaseLabel: false,
            scrollEnabled: false,
            inactiveBackgroundColor: "white",
            indicatorStyle: {
                height: null,
                top: 0,
                backgroundColor: 'red',
                width:110,
            },
            style: {
                marginLeft: 15,
                marginRight:15,
                borderWidth: 1,
                height: 30,
                borderColor: "blue",
                backgroundColor: "white",
            },
            tabStyle: {
                borderWidth:1,
                borderColor:"blue",
                justifyContent: "center"
            },
            labelStyle: {
                marginTop: -4
            }
        }
    }
);

export default createAppContainer(Navigation);

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

Answer 1

Проблема в том, что ваши marginLeft и marginRight распространяются через всю панель вкладок.

Вы можете исправить это, введя следующее:

import { Dimensions } from 'react-native';
const width = Dimensions.get('window').width;
const tabBarWidth = width - 30;  // Subtract margins from your screen width. In your case 2*15= 30 

и обновление вашей вкладки BarOptions:

tabBarOptions: {
            activeTintColor: "white",
            inactiveTintColor: "blue",
            upperCaseLabel: false,
            scrollEnabled: false,
            inactiveBackgroundColor: "white",
            indicatorStyle: {
                height: null,
                top: 0,
                backgroundColor: 'red',
                //width:110,  remove width here
            },
            style: {
                marginTop: 60, // quick hack for iphone X 
                marginLeft: 15,
                marginRight:15,
                borderWidth: 1,
                height: 30,
                borderColor: "blue",
                backgroundColor: "white",
            },
            tabStyle: {
                borderWidth:1,
                borderColor:"blue",
                justifyContent: "center",
                width: tabBarWidth/4, // divided by amount of screens you have 
            },
            labelStyle: {
                marginTop: -4
            }
        } 

Как видите, результат работает также, например, с 4 вкладками: