Question

我在顶部的标签栏导航中有三个标签，它们的文字宽度不同。是否可以使指示器宽度与文本匹配？在类似的注释上，如何使选项卡也与文本的宽度匹配而又不会使文本显示怪异。我尝试过自动宽度设置，但它不能保持居中。

自动宽度显示如下：

    <Tab.Navigator 
                initialRouteName="Open"
                tabBarOptions={{
                    style: { 
                      backgroundColor: "white", 
                      paddingTop: 20, 
                      paddingHorizontal: 25
                      },
                    indicatorStyle: {
                      borderBottomColor: colorScheme.teal,
                      borderBottomWidth: 2,
                      width: '30%',
                      left:"9%"
                    },
                    tabStyle : {
                      justifyContent: "center",
                      width: tabBarWidth/3,
                    }
                  }}
            >
                <Tab.Screen 
                    name="Open" 
                    component={WriterRequestScreen} 
                    initialParams={{ screen: 'Open' }} 
                    options={{ 
                      tabBarLabel: ({focused}) => <Text style = {{fontSize: 18, fontWeight: 'bold', color: focused? colorScheme.teal : colorScheme.grey}}> Open </Text>, 
                   }}
                    />
               <Tab.Screen 
                    name="In Progress" 
                    component={WriterRequestScreen} 
                    initialParams={{ screen: 'InProgress' }}
                    options={{ 
                      tabBarLabel: ({focused}) => <Text style = {{fontSize: 18, fontWeight: 'bold', color: focused? colorScheme.teal : colorScheme.grey}}> In Progress </Text>}}
                    />
               <Tab.Screen 
                name="Completed" 
                component={WriterRequestScreen} 
                initialParams={{ screen: 'Completed' }}
                options={{ tabBarLabel: ({focused}) => <Text style = {{fontSize: 18, fontWeight: 'bold', color: focused? colorScheme.teal : colorScheme.grey}}> Completed </Text>}}
                />
            </Tab.Navigator>

Answer 1

indicatorStyle: {
    width: 100,
    left: 50,
},

Answer 2

您必须将 width:auto 添加到 tabStyle 才能使标签宽度灵活。

然后在每个 tabBarLabel <Text> 组件中添加样式 textAlign: "center" 和 width: YOUR_WIDTH .

YOUR_WIDTH 对于每个标签可以不同，可以是你的 text.length * 10（如果你想让它取决于你的文本长度）或者从 Dimensions 获取屏幕宽度并将其除以任何其他数字使其在屏幕上的宽度相等。示例：

const win = Dimensions.get('window');

...

bigTab: {
    fontFamily: "Mulish-Bold",
    fontSize: 11,
    color: "#fff",
    textAlign: "center",
    width: win.width/2 - 40
},
smallTab: {
    fontFamily: "Mulish-Bold",
    fontSize: 11,
    color: "#fff",
    textAlign: "center",
    width: win.width / 5 + 10
}

Answer 3

从 indicatorStyle 中移除宽度并使用 flex:1

indicatorStyle: {    borderBottomColor: colorScheme.teal,
                      borderBottomWidth: 2,
                      flex:1,
                      left:"9%"
                    },

反应本机顶部标签栏导航器：指示器宽度以匹配文本

3 个答案: