Wie erstellt man ein TabView mit Icon und Titel wie das unten angefügte Bild mit NativeScript?

Question

Jede Hilfe wäre willkommen. Danke

Answer 1

Um ein TabView mit Icon in NativeScript zu erstellen, sollten Sie TabViewItem iconSource Eigenschaft einrichten. Sie sollten den Image-Pfad oder den Image-Namen festlegen, wenn Sie sie aus den Ressourcen laden. Der wichtige Teil für iOS ist die Einrichtung iosIconRenderingMode="alwaysOriginal" Eigenschaft, die das Bild richtig auf der Registerkarte

<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

Dieses Beispiel auf Glyphen aus Ionicons basiert ermöglicht es zeigt, kann aber leicht angepasst werden.

<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>