Question

我正在尝试实现一个以透明背景开始的<ActionBar>，然后在页面滚动时，背景颜色渐渐消失。

我通过创建新的UIView并将其添加到导航栏，在此方面取得了一些进展。然后根据当前滚动位置在此视图上设置背景颜色。

Page：

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" backgroundSpanUnderStatusBar="true">

<Page.actionBar>
    <ActionBar title="Page two">
        <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" tap="tapGoBack"/>
    </ActionBar>
</Page.actionBar>

<ScrollView id="scrollView" style="margin-top: -64" backgroundColor="salmon">

    <StackLayout style="height: 800">
        <Image src="~/img/enjoying-a-tasty-burger-picjumbo-com.jpg" />
    </StackLayout>

</ScrollView>
</Page>

Codebehind：

var frameModule = require("ui/frame");

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

    if (page.ios) {

        var controller = frameModule.topmost().ios.controller;

        /**
         * Make ActionBar background transparent
         */
        var navBar = controller.navigationBar;
        navBar.shadowImage = new UIImage();
        navBar.setBackgroundImageForBarMetrics(new UIImage, UIBarMetrics.UIBarMetricsDefault);

        /**
         * Add custom view to navBar
         */
        var navBounds = navBar.bounds;
        var myView = UIView.alloc().init();
        myView.frame = {
            origin: { x: navBounds.origin.x, y: navBounds.origin.y - 20 },
            size: { width: navBounds.size.width, height: navBounds.size.height + 20 }
        };
        myView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
        navBar.addSubview(myView);

        navBar.backgroundColor = UIColor.colorWithRedGreenBlueAlpha(0.20, 0.20, 0.20, 0.0);
        navBar.sendSubviewToBack(myView);

        /**
         * Fade in myView on scroll
         */
        var scrollView = page.getViewById("scrollView");
        scrollView.on('scroll', function(args){
            var offset = args.object.verticalOffset;
            myView.backgroundColor = UIColor.colorWithRedGreenBlueAlpha(0.20, 0.20, 0.20, (offset-50)/50);
        });

    }

}


exports.tapGoBack = function() {
    frameModule.topmost().goBack();
}

效果很好 - 除了现在我无法使用NavigationButton。

我可以从Xcode的视图调试器中看到UIView在<NavigationButton>后面但我无法与之交互。

有没有人知道为什么在UIView添加NavigationBar会破坏NavigationButton？

有一个动画gif（太大而无法在此处上传）here显示问题以及this GitHub issue中的其他一些信息。

如果有人想要一起玩，可以在GitHub here上托管一个示例项目。

┌──────────────────┬─────────────────┬────────────────┬───────────────┐
│ Component        │ Current version │ Latest version │ Information   │
│ nativescript     │ 2.4.2           │ 2.4.2          │ Up to date    │
│ tns-core-modules │ 2.4.4           │ 2.4.4          │ Up to date    │
│ tns-android      │                 │ 2.4.1          │ Not installed │
│ tns-ios          │ 2.4.0           │ 2.4.0          │ Up to date    │
└──────────────────┴─────────────────┴────────────────┴───────────────┘

Answer 1

只需停用 userInteractionEnabled myView ，您就可以开始了！

...
myView.userInteractionEnabled = false;
navBar.addSubview(myView);
...

将视图添加到NativeScript ActionBar会中断导航

1 个答案: