【问题标题】:Nativescript - Add border top To ActionbarNativescript - 将边框顶部添加到操作栏
【发布时间】:2018-02-21 09:12:10
【问题描述】:

大家好,我有一个问题, 我想在我的操作栏顶部添加红色边框 下面是我的代码 -

<ActionBar class=" border-top"  title="" loaded="loaded" >
    <NavigationButton ></NavigationButton>
    <ActionBar.actionItems  >
        <ActionItem ios.position="right" >
            <ActionItem.actionView>
                <AbsoluteLayout >
                <Label text="&#xf145;" class="action-item gray" />
                </AbsoluteLayout>
            </ActionItem.actionView>
        </ActionItem>
        <ActionItem ios.position="right" >
            <ActionItem.actionView>
                <AbsoluteLayout  class="{{ selectedPage ==='contacts' ? 'higlight-menu-item':'' }}">
                    <Label text="&#xf0c0;" class="action-item gray" />
                </AbsoluteLayout>
            </ActionItem.actionView>
        </ActionItem>
    </ActionBar.actionItems>
</ActionBar>

在我的 app.css 中

.border-top {
  border-top-color:#ec295f;
    border-top-width:2;
}

这在 Android 设备上运行良好,但在 IOS 上没有显示 似乎没有适用于 IOS 的开箱即用解决方案 我在这里发现了问题 https://github.com/NativeScript/NativeScript/issues/5395

https://github.com/NativeScript/NativeScript/issues/2470#issuecomment-233555881

但是我不知道怎么写?? 我尝试了几天,但没有解决方案有人可以帮忙吗??

【问题讨论】:

    标签: nativescript angular2-nativescript


    【解决方案1】:

    Nativescript 中没有解决方案,所以我不得不访问 IOS 的本地方法并编写自己的解决方案。 这是我的解决方案:

    var colorModule = require("color");
    var red = new colorModule.Color("#ec295f");
    const frameModule = require('ui/frame');
    
    
    if (frameModule.topmost().ios) {
            let controller = frameModule.topmost().ios.controller;
            let navBar = controller.navigationBar;
            let border = new UIView(CGRectMake(0, 1, navBar.frame.size.width, 2));
            border.backgroundColor = UIColor(red.ios);
            border.opaque = true;
            navBar.addSubview(border);
        }
    

    希望它可以帮助某人:)

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多