Nativescript/Angular 中 NavigationButton 上的远程图像

Question

我想将用户的头像放在我的应用 header 的左侧。它在 IOS 中工作正常，但在 android 中不起作用。我尝试这样做：

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

但是在编译过程中出现错误。自定义图像是远程图像(https://myimage)，但android正在查看本地文件资源。

所以我删除了图标并将图像放入其中，尝试这样做：

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

我没有收到任何错误，但我在 header 中看不到任何内容，全是白色的。我也尝试使用而不是，但同样的问题

Answer 1

您可以尝试删除 android 的 <NavigationButton> 并将 <StackLayout> 直接放在 <ActionBar> 中，并将 horizontalAlignment 设置为 '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>

Nativescript/Angular 中 NavigationButton 上的远程图像

Remote image on NavigationButton in Nativescript/Angular

android

nativescript

nativescript-angular

angular