如何使用NativeScript创建带有图标和标题的TabView，就像下面附带的图像一样？

Question

任何帮助将不胜感激。感谢

Answer 1

要在NativeScript中创建带有图标的TabView，您应该设置TabViewItem iconSource属性。如果从Resources中加载图像路径或图像名称，则应设置它们。 iOS的重要部分是设置iosIconRenderingMode="alwaysOriginal"属性，这将允许在选项卡中正确显示图像

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">

    <Page.actionBar>
        <ActionBar title="My App" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>
    <GridLayout>
        <TabView id="tabViewContainer" iosIconRenderingMode="alwaysOriginal">
            <TabView.items>
                <TabViewItem title="Tab 1" iconSource="res://icon">
                    <TabViewItem.view>
                        <Label text="This is Label in Tab 1" />
                    </TabViewItem.view>
                </TabViewItem>
                <TabViewItem title="Tab 2" iconSource="res://icon">
                    <TabViewItem.view>
                        <Label text="This is Label in Tab 2" />
                    </TabViewItem.view>
                </TabViewItem>
            </TabView.items>
        </TabView>

    </GridLayout>
</Page>

Answer 2

此示例基于Ionicons的字形，但可以很容易地进行调整。

<TabViewItem title="title">
   <TabViewItem.view>
       <FormattedString>
           <Span fontSize="40" fontFamily="ionicons" text="&#xf456;"></Span> <!--Image/Logo-->
           <Span fontSize="10" text="&#xA;"></Span> <!--BreakLine-->
           <Span fontSize="10" text="Text"></Span> <!--Text-->
       </FormattedString>
   </TabViewItem.view>
 </TabViewItem>