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

问题描述

我正在尝试实现一个<ActionBar>，它首先从透明背景开始，然后在滚动页面时淡入背景颜色.

I'm trying to implement an <ActionBar> that starts off with a transparent background then, as the page is scrolled a background colour is faded in.

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

I've made some progress with this by creating a new UIView and adding it to the navigationbar. Then setting the background colour on this view based on the current scroll position.

页面:

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

隐藏代码:

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.

Works great - except now I am unable to use the NavigationButton.

我从Xcode的视图调试器中看到UIView在<NavigationButton>后面，但我无法与其交互.

I can see from Xcode's view debugger that the UIView is behind the <NavigationButton> yet I can not interact with it.

有人知道为什么在NavigationBar上添加UIView会破坏NavigationButton吗?

Does anyone have any idea why adding a UIView to the NavigationBar would break the NavigationButton?

有一个动画gif(太大，无法在此处上传)此处在此GitHub问题.

There is an animated gif (too large to upload here) here showing the problem and some further info in this GitHub issue.

如果有人愿意一起玩，则可以在 GitHub上托管一个示例项目. /p>

There is a sample project hosted on GitHub here if anyone wants to play along.

┌──────────────────┬─────────────────┬────────────────┬───────────────┐
│ 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    │
└──────────────────┴─────────────────┴────────────────┴───────────────┘

推荐答案

只需禁用 userInteractionEnabled 用于 myView ，您很高兴！

Just disable the userInteractionEnabled for myView and you are good to go!

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

这篇关于将视图添加到NativeScript ActionBar会中断导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！