8,515 lecturas

Cómo agregar iconos y pantalla de bienvenida en React Native (sin biblioteca)

por Lucas Leonardo7m2023/03/15

Demasiado Largo; Para Leer

Este tutorial fue creado con la aplicación construida usando create-react-app. Para trabajar con el entorno de Apple, necesitamos un macOS. Para esto, necesitaremos íconos en varios tamaños así como una versión redonda de los íconos (sin fondo). Además, tenga en cuenta que si no tiene estos tamaños, tenemos una guía paso a paso sobre cómo configurar esto.

featured image - Cómo agregar iconos y pantalla de bienvenida en React Native (sin biblioteca)

Hoy enfrenté el siguiente desafío en mi pasantía: modificar/implementar una pantalla de inicio y un ícono para el proyecto en el que estoy trabajando.

Sin embargo, preferí hacerlo de forma nativa para no depender de bibliotecas de terceros. Dediqué algo de tiempo para hacer el estudio de cómo funciona, dónde tendría que hacer cambios y a qué se aplicaría. Después de hacer el pincho entendí que tendría que hacerlo por separado para iOS y Android.

¡Hablemos primero de iOS!

Nota: este tutorial se creó con la aplicación creada con create-react-app.

iOS

En primer lugar, debemos recordar que para trabajar con el entorno de Apple, necesitamos macOS. Ahora que el proyecto ya está creado, vamos a la carpeta 'ios' y lo abrimos en Xcode .

Luego de eso, vamos a la carpeta con el nombre de nuestro proyecto, siguiendo el ejemplo ficticio a continuación:
Ahora, nos dirigiremos al archivo 'Imágenes', donde tendremos las opciones de tamaño. Simplemente arrastre las imágenes correspondientes para cada dimensión y también una para que sea el ícono de la aplicación para usar en la pantalla de inicio (si no sabe cómo formatear sus imágenes para cumplir con los estándares, al final del artículo, tendremos una breve tutorial de cómo hacerlo).
Llegados a este punto, ya hemos terminado de configurar los iconos, y ahora pasamos a la pantalla de inicio. Para este paso, usaré un fondo sólido y una imagen en el centro como ejemplo, pero puede editarlo como creó su diseño (o como lo imaginó jajaja).

En primer lugar, abriremos el archivo 'LaunchScreen' en Xcode. En este archivo navegaremos en el siguiente orden: 'View Controller Scene' → 'View Controller' → 'View' .

En este campo tenemos el área segura, que no es más que el espacio útil en la pantalla.

De forma predeterminada, ya viene con el nombre que le diste a la aplicación cuando la creaste y un pie de página "Desarrollado por React Native". En este caso, eliminaremos el pie de página y el nombre de la aplicación. Después de eso, haremos clic en el '+' en la esquina superior derecha e iremos a la opción 'Vista de imagen' y la arrastraremos a la aplicación, la alinearemos en el medio y ajustaremos la capacidad de respuesta.
Ahora que hemos ajustado todo, simplemente cierre Xcode y cree su aplicación. Su aplicación estará configurada

(Nota: si ya lo habías ejecutado en tu teléfono o emulador antes, ¡recuerda eliminar la aplicación para que se apliquen los cambios de icono)!

Androide

Ahora pasemos a la configuración de Android. Para esto, necesitaremos íconos en varios tamaños así como una versión redonda de los íconos (sin fondo). Además, tenga en cuenta que si no tiene estos tamaños, tenemos una guía paso a paso al final de la publicación sobre cómo configurar esto. Un poco diferente de lo que hicimos en iOS, elegí no usar Android Studio aquí y en su lugar modifiqué el código directamente porque no encontré su menú de formato muy interesante.
Con las imágenes ya guardadas en tu dispositivo, abriremos la carpeta de la aplicación en el administrador de archivos → android → app → src → main → res. Dentro de la carpeta "res", tenemos la carpeta "drawable" y otras carpetas "mipmap-suffix" .

La carpeta "drawable" es donde configuraremos nuestro splash y tendremos el ícono principal, mientras que las carpetas "mipmap" son las responsables de los diferentes tamaños de íconos e íconos redondos. Lo primero que haremos será sustituir los archivos de iconos por los nuestros. Recomiendo usar los mismos nombres que los que ya están allí para que no tenga que modificar el código nativo todavía, como se muestra a continuación:

Ahora que hemos realizado cambios en toda nuestra aplicación, ¡pasaremos a la parte nativa! Dentro de la carpeta dibujable, tenemos el archivo "rn_edit_text_material.xml" y haremos algunas configuraciones en él.

Para que sea menos detallado escribir, dejaré las configuraciones que usé para que simplemente copie y pegue en su código junto con una explicación de cada cambio: Agregamos la etiqueta <layer-list> para dirigir los esquemas del proyecto , y dentro de él le pasamos lo que queremos usar.

En este caso, utilicé la <item android: drawable="@color/primary" /> para establecer el color de fondo (lo configuraremos en el siguiente paso), y la última etiqueta con el prefijo item android: para establecer las dimensiones, qué imagen usar y su posicionamiento en la pantalla del dispositivo.

 <?xml version="1.0" encoding="utf-8"?> <!-- Copyright (C) 2014 The Android Open Source Project Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-- This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I). The item below with state_pressed="false" and state_focused="false" causes a NullPointerException. NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/> For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR. --> <item android:drawable="@color/primary" /> <item android:width="100dp" android:height="100dp" android:drawable="@drawable/icon" android:gravity="center" /> </layer-list>

Ahora configuraremos nuestro backgroundColor, para eso navegaremos a la carpeta "res" y crearemos un archivo llamado "colors.xml" dentro de la carpeta "values". Agregaremos el código a continuación, que contiene una etiqueta <resources> con nuestra etiqueta de color de fondo, ya con el mismo nombre que le dimos en el paso anterior.
```
 <?xml version="1.0" encoding="utf-8" ?> <resources> <color name="primary">#f2f2f2</color> </resources>
```

"styles.xml" es un archivo dentro de la carpeta "values", donde editaremos la siguiente línea que viene por defecto al crear la app:
```
 <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
```
a este código:
```
 <item name="android:windowBackground"> @drawable/rn_edit_text_material </item> <item name="android:statusBarColor"> @color/primary </item>
```
En el fragmento de código mencionado anteriormente, establecemos a qué ventana pertenece el fondo en la parte superior, y en la parte inferior, establecemos el color (previamente definido). ¡Gran trabajo! Su aplicación de Android debe estar configurada con la nueva pantalla de bienvenida y los iconos. No olvide probarlo a fondo antes de publicarlo en la tienda de aplicaciones. ¡Buena suerte con tu aplicación!

Creación de iconos en los tamaños deseados.

Para crear nuestros íconos en los tamaños exactos, usaremos 2 herramientas, la primera se llama #Figma ( https://www.figma.com/ ) y el segundo es un sitio web llamado #ApeTools ( https://apetools.webprofusion.com/#/tools/imagegorilla ). En ApeTools subimos nuestra imagen y la formateamos en el tamaño estándar de iOS o Android. En Figma, cargaremos nuestras imágenes de Android y les agregaremos un borderRadius para redondearlas.

ApeHerramientas:
Para usarlo, haremos clic en la opción "elegir archivo", seleccionamos el logotipo y luego seleccionamos la base de Android e iOS, después de eso, simplemente haga clic en Kapow. y el sitio mostrará automáticamente nuestros íconos.
Figura:
Nota: Este paso es solo para configurar el icono de Android.

Abriremos la web o la aplicación #Figma, subiremos las imágenes que queramos redondear y en el menú de la derecha, en la opción de curva, pondremos '100' para conseguir un círculo perfecto (en el ejemplo de abajo lo hice con una sola imagen para ilustración, pero debe hacerse en todas las imágenes de "@mipmap" y también usé un borderRadius más grande porque mi imagen de muestra era demasiado grande).