1

我想知道如何在 Beagle 中创建与所有这三个平台兼容的图像：Angular、Android 和 iOS。

它在我的 Angular 应用程序中运行良好，但我无法让它在任何移动平台上运行。

这是我的后端代码：

Image(Local.justWeb('/public/logo.png'))

我看到有一个Local.both，但我不知道如何使用它。

4

1 回答 1

1

图像可以有两种类型：本地或远程。远程图像仅使用 URL，并且在任何平台上都以相同的方式工作。

这是本地图像的情况。本地图像资源的工作方式因平台而异。对于 Web 应用程序，您总是需要一个 URL。对于移动应用程序，您需要一个标识符来定位资源。

Local.justWeb如果您的应用程序只有 Web 客户端，或者Local.justMobile您的应用程序只有移动客户端，您可以在后端编写代码。如果您需要它适用于所有平台，您可以使用Local.both.

  • Local.justWeb接受一个参数：相对于站点根目录的 URL。
  • Local.justMobile接受一个参数：移动平台中资源的标识符。
  • Local.both接受两个参数：第一个：Web 应用程序的 URL；第二：移动平台的标识符。

在 Android 中，首先您需要将图像作为资源导入（资源选项卡 > 导入）。资源标识符可以在您的设计系统类中定义。如果您还没有设计系统类，您可以创建它。请参见下面的示例：

package com.myapp.beagle

import com.myapp.R
import br.com.zup.beagle.android.annotation.BeagleComponent
import br.com.zup.beagle.android.setup.DesignSystem

@BeagleComponent
class DesignSystem : DesignSystem() {
    override fun image(id: String): Int? {
        return when (id) {
            "informationImage" -> android.R.drawable.ic_menu_help
            "delete" -> android.R.drawable.ic_delete
            "TestImage" -> android.R.drawable.editbox_dropdown_dark_frame
            "logo" -> R.drawable.logo // <-- your identifier goes here
            else -> android.R.drawable.ic_menu_help
        }
    }
}

在 iOS 中，您只需要创建名称等于要使用的 mobileId 的资源。要创建新资源，请在 xCode 中单击资产文件夹 > + 按钮 > 创建图像。

于 2020-11-05T19:39:58.643 回答