ネイティブスクリプトのxmlサンプルを見つけるのが非常に難しいです。ネイティブスクリプト用のブートスニップはありますか？

Question

ネイティブスクリプトでボトムバーを作成しようとしています。私の最初の試みは非常に初歩的な考えで下にあります。私は素晴らしいフォントを使用して、アイコンの下に単語を置くことを考えています。私の質問は、ブートストラップのためのbootsnipのようなxmlを持っているこのウェブサイトまたはウェブサイトのサンプルXMLです。下のhtheコードは、画像に描かれているゴール下のナビゲーションバーを達成する良い方法です。

<DockLayout stretchLastChild="true"> 
     <StackLayout dock="bottom" verticalAlignment="bottom" stretch="fill"> 
      <StackLayout orientation="horizontal" horizontalAlignment="center"> 
       <Label text="Home" dock="left" backgroundColor="red"></Label> 
       <Label text="Medications" dock="left" backgroundColor="green"></Label> 
       <Label text="Medication Detail" dock="left" backgroundColor="blue"></Label> 
       <Label text="Whatever" backgroundColor="yellow"></Label> 
      </StackLayout> 
     </StackLayout> 
    </DockLayout> 

Answer 1

あなたはこれを試すNativeScript Tab View Sample code

OR

を使用することができます。 あなたはListView

<GridLayout rows="*, auto, auto"> 
    <ScrollView row="0"> 
     <StackLayout row="0" backgroundColor="#eeeeee"> 
      <Label text="Hello world" textWrap="true"></Label> 
      <Label text="Hello world" textWrap="true"></Label> 
      <Label text="Hello world" textWrap="true"></Label> 
      <Label text="Hello world" textWrap="true"></Label> 
      <Label text="Hello world" textWrap="true"></Label> 
      <Label text="Hello world" textWrap="true"></Label> 
      <Label text="Hello world" textWrap="true"></Label> 
      <Label text="Hello world" textWrap="true"></Label> 
      <Label text="Hello world" textWrap="true"></Label> 
      <Label text="Hello world" textWrap="true"></Label> 
      <Label text="Hello world" textWrap="true"></Label> 
      <Label text="Hello world" textWrap="true"></Label> 
      <Label text="Hello world" textWrap="true"></Label> 
      <Label text="Hello world" textWrap="true"></Label> 
      <Label text="Hello world" textWrap="true"></Label> 
      <Label text="Hello world" textWrap="true"></Label> 
      <Label text="Hello world" textWrap="true"></Label> 
      <Label text="Hello world" textWrap="true"></Label> 
      <Label text="Hello world" textWrap="true"></Label> 
     </StackLayout> 
    </ScrollView> 
    <StackLayout height="2" backgroundColor="#777" row="1"></StackLayout> 
    <GridLayout class="foot" columns="*,*,*,*" row="2"> 
     <Label col="0" text="" textWrap="true"></Label> 
     <Label col="1" text="" textWrap="true"></Label> 
     <Label col="2" text="" textWrap="true"></Label> 
     <Label col="3" text="" textWrap="true"></Label> 
    </GridLayout> 
</GridLayout> 

で ScrollViewを交換することができます

.foot { 
     background-color: #ccc; 
    } 

    .foot label { 
     text-align: center; 
     vertical-align: middle; 
     padding: 10; 
     font-size: 20; 
    }