如何在 Beagle 中创建适用于 Angular、Android 和 iOS 的图像？

Question

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

它在我的 Angular 应用程序中工作得很好，但我无法让它在任何移动平台上工作。

这是我的后端代码：

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

我看到有一个Local.both，但我不知道具体怎么用。

Answer 1

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

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

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

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

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

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 中单击资产文件夹 > + 按钮 > 创建图像。

如何在 Beagle 中创建适用于 Angular、Android 和 iOS 的图像？

How do I create an image in Beagle that works for Angular, Android and iOS?

beagle

beagle-android

beagle-ios

beagle-web

beagle-angular