Remote image on NavigationButton in Nativescript/Angular

对着背影说爱祢 提交于 2021-01-28 12:10:34

问题


I want to put the user's avatar on the left of my app's header. It works fine in IOS, but it doesn't work in android. I tried to do this:

    <NavigationButton [icon]="customImage" color="#a81b38" (tap)="toggleSideDrawer()" *ngIf="isAndroid">
        <StackLayout verticalAlignment="center">
            <Label id="avatarImg" height="45" width="45" borderRadius="50" backgroundColor="#eeeeee"></Label>
        </StackLayout>
    </NavigationButton>

but I get an error during compilation. The custom image is a remote image (https://myimage), but android is looking into local file resources.

So I removed the icon and I put the image inside, trying this:

 <NavigationButton color="#a81b38" (tap)="toggleSideDrawer()" *ngIf="isAndroid">
    <StackLayout verticalAlignment="center">
        <Label [style.background-image]="customImage" style.background-position="center"
            style.background-size="cover" class="avatarImage" height="30" width="30" borderRadius="50"
            backgroundColor="#eeeeee"></Label>
    </StackLayout>
</NavigationButton>

I don't get any error, but I can't see anything in my header, it's all white. I tried also to use instead of , but same issue


回答1:


You can try removing the <NavigationButton> for android and putting the <StackLayout> directly inside your <ActionBar> with a horizontalAlignment set to 'left'

<ActionBar>
  <StackLayout *ngIf="isAndroid" horizontalAlignment="left" verticalAlignment="center">
    <Label [style.background-image]="customImage" style.background-position="center"
            style.background-size="cover" class="avatarImage" height="30" width="30" borderRadius="50"
            backgroundColor="#eeeeee"></Label>
  </StackLayout>
</ActionBar>


来源:https://stackoverflow.com/questions/56773574/remote-image-on-navigationbutton-in-nativescript-angular

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!