我有三个标签在顶部标签栏导航不同宽度的文本.是否有可能使指标宽度匹配的文本?在一个类似的注意,我如何才能使标签匹配的文本的宽度太,而不会使它显示奇怪.我已经尝试了宽度自动,但它不停留在中心.
这是它看起来与自动宽度:
<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>
7条答案
按热度按时间hrirmatl1#
我还需要使指示器适合文本大小,标签的动态宽度,以及由于长标签而可滚动的顶部栏。结果如下所示:
tab bar with dynamic indicator width
如果您不关心适合标签的指示器宽度,您可以简单地将
screenOptions.tabBarScrollEnabled: true
与screenOptions.tabBarIndicatorStyle
中的width: "auto"
结合使用。否则,您需要创建自己的标签栏组件,并将其传递给
<Tab.Navigator>
的tabBar
属性。我使用了ScrollView
,但如果您只有几个带有短标签的标签,View
会更简单。以下是此自定义TabBar组件的Typescript代码:我设法使它的工作与混合:
请让我知道如果你找到一个更方便的解决方案。
iaqfqrcu2#
在
screenOptions
中,为tabBarScrollEnabled: true
tabBarItemStyle: {{width: "auto", minWidht: "100"}}
minWidth
只是为了保持设计一致。请注意,我使用的是react-navigation 6.x和Camille Hg,答案非常有用。
qv7cva1a3#
您必须将
width:auto
添加到tabStyle以使选项卡宽度灵活。然后在每个tabBarLabel
<Text>
组件中添加样式textAlign: "center"
和width: YOUR_WIDTH
。YOUR_WIDTH
可以是不同的每个标签,可以是你的文本。长度 * 10(如果你想让它取决于你的文本长度)或从尺寸屏幕宽度,并将其除以任何其他数字,使其在屏幕上的宽度相等。示例:...
vcudknz34#
从indicatorStyle中删除宽度并使用flex:1
t30tvxxf5#
我已经使用了一些关于onLayout的技巧来实现这一点,请注意,我是在假设两个标签的情况下实现的,并且第二个标签的宽度大于第一个标签的宽度。它可能需要调整其他用例。
更新:
如果菜单名是静态的,那么在
widths
内部硬编码宽度可能是一个更健壮的解决方案,尽管这样做的维护成本稍高一些。资源:
0vvn1miw6#
我有同样的问题,我终于能够使指标采取正是文本大小。
我不知道在哪个版本中这是可能的..但显然你可以添加一个自定义指示器组件(旁边的能力,添加一个自定义tabBar组件)
在创建TopTabNavigator时,重要的是要按照下的代码中所述添加属性。
现在对于CustomTabBarIndIndIndIndicator组件,我们只需转到react-native-tab-view的官方github存储库,然后转到TabBarIndicator.tsx并将组件复制到名为CustomTabBarIndicator的文件中“只是为了与示例保持一致,但您可以称之为任何您想要的”,并且不要忘记将附加属性添加到tabBarItemPadding的Props类型“如果您使用的是typescript”
现在对图像中高亮显示的线做一个小的修改
变更:
将成为:
就是这样:)
附注:我添加了图片,因为我不知道如何准确地描述在哪里进行更改
如果你不想使用typescript .. jsut,就从代码中删除所有类型,这样就可以了:)
ubbxdtey7#
现在可以使用以下选项实现OP的预期结果: