¿Cómo creo una imagen en Beagle que funcione para Angular, Android e iOS?

Question

Me gustaría saber cómo creo una imagen en Beagle que sea compatible con estas tres plataformas: Angular, Android e iOS.

Está funcionando bien en mi aplicación Angular, pero no puedo hacer que funcione en ninguna plataforma móvil.

Aquí está mi código para el backend:

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

Vi que hay un Local.both, pero no sé exactamente cómo usarlo.

Answer 1

Una imagen puede ser de dos tipos: local o remota. Las imágenes remotas solo usan una URL y funcionan de la misma manera en cualquier plataforma.

Sin embargo, este es el caso de las imágenes locales. Un recurso de imagen local funciona de manera diferente según la plataforma. Para las aplicaciones web, siempre necesitará una URL. Para las aplicaciones móviles, necesitará un identificador para ubicar el recurso.

En el backend, puede escribir Local.justWebsi su aplicación solo tiene clientes web o Local.justMobilesi su aplicación solo tiene clientes móviles. Si necesita que funcione para todas las plataformas, puede usar Local.both.

• Local.justWeb acepta un solo parámetro: la URL relativa a la raíz del sitio.
• Local.justMobile acepta un solo parámetro: el identificador del recurso en plataformas móviles.
• Local.bothacepta dos parámetros: primero: la URL de la aplicación web; segundo: el identificador para plataformas móviles.

En Android, primero debe importar la imagen como un recurso (pestaña de recursos> importar). Se puede definir un identificador de recurso en su clase de sistema de diseño. Si aún no tiene una clase de sistema de diseño, puede crearla. Vea el ejemplo a continuación:

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

En iOS, solo necesita crear el recurso con un nombre igual al mobileId que va a usar. Para crear un nuevo recurso, en xCode, haga clic en la carpeta de activos> botón +> crear imagen.