ios - 将 View 添加到 NativeScript ActionBar 会破坏导航

Question

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

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

页面:

<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 的 View 调试器中看到 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);
...