如何正确更改 React Native Top Navigation 中的 indicatorStyle 的宽度？答案

【问题标题】：How to correctly change the width of the indicatorStyle in React Native Top Navigation?如何正确更改 React Native Top Navigation 中的 indicatorStyle 的宽度？
【发布时间】：2020-03-23 21:39:11
【问题描述】：

我希望能够减小顶部导航栏中的indicatorStyle 的宽度以实现以下结果：

但是每当我尝试减小条的宽度时，我都无法将其正确居中。这是我目前拥有的；

下面是我的代码：

import React from 'react';
import { createAppContainer } from 'react-navigation';
import {createMaterialTopTabNavigator } from 'react-navigation-tabs';
import Colors from '../constants/Colors';
import Tab1 from '../screens/tab1';
import Tab2 from '../screens/tab2';


const HomeTab = createMaterialTopTabNavigator({
    TAB1: Tab1,
    TAB2: Tab2,
  }, 
  {
    tabBarOptions: {
        activeTintColor: 'black',
        inactiveTintColor: 'gray',
        labelStyle: { fontSize: 14, fontWeight:"700" },
        style: { backgroundColor: Colors.mainBackground, elevation: 0, shadowOpacity: 0, borderBottomWidth:2, borderColor:'#ccc' },
        indicatorStyle: { backgroundColor: 'blue', width:100},

    },
  }

);

感谢您的帮助！真的很感激:)

【问题讨论】：

标签： react-native react-navigation react-native-tabnavigator

【解决方案1】：

为了准确居中，我使用Dimensions API 来获得精确的宽度和偏移量。

const totalWidth = Dimensions.get("screen").width;

然后

indicatorStyle: {
   width: totalWidth / 4,
   left: totalWidth / 8,
}

【讨论】：

【解决方案2】：

你可以使用position值

示例

indicatorStyle : {width:50,left:"18%"},

【讨论】：

如何设置宽度，取决于标签的名称？