NativeScript：如何使TabView菜单缩小以适合设备宽度？

Question

我有一个带有三个TabViewItem的TabView，类似这样：

  <TabView   :selectedIndex="selectedTab" @selectedIndexChange="onTabChange">
      <TabViewItem  title="Add new images">
         some content...
      </TabViewItem>
      <TabViewItem title="Backedup images">
        some content...
      </TabViewItem>
      <TabViewItem title="Manage categories">
       some content...
      </TabViewItem>

    </TabView>

问题在于选项卡菜单在屏幕外“溢出”： 如您所见，由于标题较长，第三个选项卡部分可见。

是否有一种方法可以强制选项卡项目“尊重”设备的宽度，同时相应地缩小标题的字体大小？

Answer 1

没有公开用于调整Tab宽度的直接API，但是您可以通过调整本机视图上的布局参数来实现。

如果您想为每个标签页分配相等的宽度，请用标签页数除以屏幕宽度。在TabView的已加载事件中运行以下代码。

import { isIOS, isAndroid, screen } from 'tns-core-modules/platform';

onTabViewLoaded: function(args) {
    var tabView = args.object;
    if (isAndroid) {
        var nativeTabView = tabView._tabLayout.getChildAt(0),
            width = screen.mainScreen.widthPixels / nativeTabView.getChildCount();

        for (let i = 0; i < nativeTabView.getChildCount(); i++) {
            const view = nativeTabView.getChildAt(i),
                layoutParams = view.getLayoutParams();

            layoutParams.weight = 0;
            layoutParams.width = width;
            view.setLayoutParams(layoutParams);
        }
        nativeTabView.invalidate();
    }
}