有没有办法制作`react-navigation`的`指标`，适合标签？

Posted 2021-04-04

我想把导航栏的indicator放到标签上。但它只适合第一个标签。对于所有其他选项卡，指示器在右侧滑动了一点。我在导航的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);

我怎样才能解决这个问题 ？

答案

问题是你的marginLeft和marginRight通过你的整个tabBar传播。

您可以通过引入以下内容来解决此问题：

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 

并更新tabBarOptions：

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个选项卡：