在nativescript应用程序中添加轮播图像

Question

我正在学习nativescript。我想在第一个Tab中添加轮播图像。我找到了javascript＆amp;网上的xml文件，但我不知道如何使用这些java＆amp; xml文件。你能帮帮我吗？

app.component.html：

<TabView #tabView [items]="tabviewitems" (selectedIndexChanged)="tabViewIndexChange(tabView.selectedIndex)" dir="rtl"></TabView>

app.component.ts

import { Component } from "@angular/core";
import { StackLayout } from "ui/layouts/stack-layout";
import { Label } from "ui/label";
import { TabView, SelectedIndexChangedEventData, TabViewItem } from "ui/tab-view";
import { View } from "ui/core/view";

@Component({
    moduleId: module.id,
    templateUrl: "./app.component.html",
})
export class AppComponent {
    public tabviewitems: Array<TabViewItem>;

    constructor() {
        this.tabviewitems = [];

        let innerFirstStackLayout = new StackLayout();
        let firstLabel = new Label();
        firstLabel.margin = "15";
        firstLabel.text = "Label first page";
        innerFirstStackLayout.addChild(firstLabel);

        let innerSecondStackLayout = new StackLayout();
        let secondLabel = new Label();
        secondLabel.margin = "15";
        secondLabel.text = "Label second page";
        innerSecondStackLayout.addChild(secondLabel);

        let innerThirdStackLayout = new StackLayout();
        let thirdLabel = new Label();
        thirdLabel.margin = "15";
        thirdLabel.text = "Label third page";
        innerThirdStackLayout.addChild(thirdLabel);

        this.tabviewitems.push(this.createTabItem("Tab1", innerFirstStackLayout));
        this.tabviewitems.push(this.createTabItem("Tab2", innerSecondStackLayout));
        this.tabviewitems.push(this.createTabItem("Tab3", innerThirdStackLayout));

    }

    public tabViewIndexChange(res) {
        alert("Tab View selected index: " + res);

    }

    createTabItem(title: string, view: View): TabViewItem {
        const item = new TabViewItem();
        item.title = title;
        item.view = view;
        return item;
    }
}

carousel2.xml：

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" xmlns:ns="nativescript-carousel">
<Page.actionBar>
    <ActionBar title="Dynamic"></ActionBar>
</Page.actionBar>

<ScrollView>
    <StackLayout>
        <Label text="Define a template and assign the 'items' array." textWrap="true" margin="10,0,0,0"/>
        <Label text="Also works well innside a ScrollView." textWrap="true" margin="0,0,20,0" />

        <StackLayout height="100" verticalAlignment="center">
            <Label text="Some content here..." textWrYou need to specify all --key-store-* options.
    * --key-store-alias - Provides the alias for the keystore file specified with --key-store-path. You can use the --key-store-* options along with --release to produce a signed release build. You need to specify all --key-store-* options.
    * --key-store-alias-password - Provides the password for the alias specified with --key-store-alias-password. You can use the --key-store-* options along with --release to produce a signed release build. You need to specify all --key-store-* options.

### Attributes

    * <Device ID> is the index or Device Identifierap="true"/>
        </StackLayout>

        <GridLayout height="250">
            <ns:Carousel id="myCarousel" height="250" color="white" pageChanged="myChangeEvent" pageTapped="mySelectedEvent" pageScrolling="myScrollingEvent" android:indicatorAnimation="slide"
                items="{{ myDataArray }}" indicatorColor="#fff">
                <ns:Carousel.itemTemplate>
                    <ns:CarouselItem  verticalAlignment="center" backgroundColor="{{ color }}" height="250">
                        <GridLayout rows="*" columns="*,*">
                             <Label text="{{ title }}"  horizontalAlignment="center" verticalAlignment="center" col="0"/>
                            <Image src="{{ image }}" height="100" col="1" />
                        </GridLayout>
                    </ns:CarouselItem>
                </ns:Carousel.itemTemplate>
            </ns:Carousel>
        </GridLayout>

        <Label text="Indicator animation type: 'slide'" textWrap="true" ios:visibility="collapsed" margin="10,0,0,0"/>

        <Button text="Select page 3" tap="selectPageEvent" margin="10,10,0,10"/>
        <StackLayout height="400" margin="10,0,0,0">
            <Label text="Some content here..." textWrap="true" />
        </StackLayout>
    </StackLayout>
</ScrollView>
</Page>

carousel2.js

 var observableModule = require("data/observable");
var pageData = new observableModule.Observable();
var myDataArray = [
    {title:"Slide 1", color: "#b3cde0", image:"https://raw.githubusercontent.com/manijak/nativescript-photoviewer/master/demo/res/01.jpg"},
    {title:"Slide 2", color: "#6497b1", image:"https://raw.githubusercontent.com/manijak/nativescript-photoviewer/master/demo/res/02.jpg"},
    {title:"Slide 3", color: "#005b96", image:"https://raw.githubusercontent.com/manijak/nativescript-photoviewer/master/demo/res/03.jpg"},
    {title:"Slide 4", color: "#03396c", image:"https://raw.githubusercontent.com/manijak/nativescript-photoviewer/master/demo/res/04.jpg"}
    /*{title:"Slide 5", color: "#011f4b", image: ""}*/
];
var myCarousel = null;
pageData.set("myDataArray", myDataArray);

function pageLoaded(args) {
    var page = args.object;
    page.bindingContext = pageData;

    myCarousel = page.getViewById("myCarousel");
}
exports.pageLoaded = pageLoaded;

exports.selectPageEvent = function(args){
    if(!myCarousel) return;
    myCarousel.selectedPage = 2;
}

exports.myScrollingEvent = function(args){
    console.log("Scrolling: " + args.state.offset);
}