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

Question

如有任何帮助，我们将不胜感激。谢谢

Answer 1

要在 NativeScript 中创建带图标的 TabView，您应该设置 TabViewItem iconSource 属性。如果从资源中加载它们，则应设置图像路径或图像名称。 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>

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

How to create a TabView with icon and title like the image i attached below using NativeScript?

javascript

nativescript

angular