Nativescript 实现视图之间的协调

该模块实现了iOS和Android两个平台的协调。它基于rxJs的 生产者/消费者模式。

该模块增强Nativescript视图，以添加行为

    interface View {
        addBehaviour(behaviour: Behaviour);
    } 


export interface Behaviour {
    view: View;
    onCreate?();
    onInitNative?();
    onDispose?();
    onLoaded?();
    onUnloaded?();
}

它还提供一个生产者接口。生产者是使其他视图移动的视图（例如滚动视图上的滚动事件）

export interface Producer {
    init();
    start();
    stop();
    stream: Rx.Subject<ProducerData>;
}

该模块提供了一些行为。但你可以创建自己的行为。

以下是基于滚动视图（或列表视图）的行为列表

• FixedHeaderBehavior : 根据滚动位置隐藏/显示（使用平移和透明度）一个标题
• ExpandableHeaderBehavior: 根据滚动位置增加或减少标题的高度
• ScrollScaleBehavior: 根据滚动位置缩放或取消缩放视图
• AnchorBehaviour : 当键盘显示时，文本输入锚定在顶部、底部或中间。即使在设置了自动增长的情况下，输入也会保持锚定

FixedHeaderBehavior

let header: View = null;
let listView: ListView = null;
let behav = new FixedHeaderBehavior(listView);
behav.height = 112;
behav.speedFactor = 1; //HOW MUCH INCREASE OR DECREASE SIZE OF HEADER RELATIVE TO DELTA SCROLL
behav.deferHideFactor = 3; //START HIDING ONLY IF SCROLL IS 3 TIMES GREATER THAN HEADER HEIGHT
behav.deferShowFactor = 1;//START SHOWING ONLY IF SCROLL IS 1 TIMES GREATER THAN HEADER HEIGHT
behav.playOpacity = false; //PLAY WITH HEADER OPACITY WHEN HIDING
behav.maxTranslate = 56;//MAXIMUM TRANSLATION VALUE APPLIED TO HEADER
behav.thresholdFactor = 0.3;//IF HEADER HAS 1/3 OF HIS HEIGHT HIDDEN (SHOWN)=> SO PLAY ANIMATION TO HIDE (SHOW) ALL
header.addBehaviour(behav);

ScrollScaleBehavior

let btn: Button = null;
let listView: ListView = null;
    let behavBtn = new ScrollScaleBehavior(listView);
    behavBtn.height = 56;//HEIGHT OF BUTTON
    behavBtn.deferHideFactor = 3;//START HIDING ONLY IF SCROLL IS 3 TIMES GREATER THAN HEADER HEIGHT
    behavBtn.deferShowFactor = 1;//START SHOWING ONLY IF SCROLL IS 1 TIMES GREATER THAN HEADER HEIGHT
    btn.addBehaviour(behavBtn);

ExpandableHeaderBehavior

let headerImage: Image = null;
let scrollview: ScrollView = null;
let behav = new ExpandableHeaderBehavior(scrollview);
    behav.height = 400; //MAXIMUM HEIGHT OF THE IMAGE
    behav.disappearAt = 56 + page.getStatusBarHeightDip();//HIDE IMAGE WHEN HEIGHT IS UNDER
    behav.showAnimation = (ex) => {//PLAY AN ANIMATION WHEN SHOWN
        appbar.animate({ backgroundColor: new Color("transparent"), duration: ex.animationDuration, curve: AnimationCurve.easeOut });
    };
    behav.hideAnimation = (ex) => {//PLAY AN ANIMATION WHEN HIDDEN
        appbar.animate({ backgroundColor: new Color("purple"), duration: ex.animationDuration, curve: AnimationCurve.easeIn });
    };
    headerImage.addBehaviour(behav);

<Image src="~/img/logo.png" id="headerImage" stretch="aspectFill" height="400" verticalAlignment="top"/>
<app:AppBarLayout columns="auto,*,auto,auto" rows="auto" id="actionbar">
    <app:AppBarIcon text="list" col="0"/>
    <app:AppBarTitle text="My Application" col="1"/>
    <app:AppBarIcon text="notifications" col="2" />
    <app:AppBarIcon text="search" col="3" tap="openSearch"/>
</app:AppBarLayout> 

AnchorBehaviour

文本布局得到了增强。这使得这个新属性可用

export interface TextLayout{
    anchor:"bottom"|"middle"|"top"|"visible";
} 

<TextLayout anchor="bottom">
    ...
</TextLayout> 

查看所有模块在这里