向 NativeScript ActionBar 添加视图会中断导航

Question

我正在尝试实现一个<ActionBar>，它以透明背景开始，然后随着页面滚动，背景颜色淡入。

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

页面：

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

我可以从 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

只需为 myView 禁用 userInteractionEnabled 即可！

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