Primero, permítame recordarle que React Native (RN) es una tecnología multiplataforma para crear aplicaciones móviles. Mucha gente piensa que su principal ventaja es el uso de una única base de código para dos aplicaciones, pero no considero que esta sea la más valiosa en RN. El valor principal es utilizar React con todos sus beneficios, incluida la comunidad de desarrollo web en general. Tiene mucho sentido para los desarrolladores de React comenzar a crear aplicaciones móviles con React Native después de tener una experiencia sólida con React. Pero el mundo móvil es muy diferente al de la web. Hoy quiero compartir lo que debe tener en cuenta mientras se sumerge en el mundo del desarrollo móvil.
1. Compacidad de la pantalla
CSS asume que está trabajando con un píxel como una unidad física de 1/96 de pulgada. Esto es útil si está creando un sitio web solo para computadoras de escritorio, pero cuando trabaja en un sitio para dispositivos móviles, debe considerar diferentes densidades de pantalla. Es por eso que necesita diferentes márgenes, relleno para diferentes dispositivos y diferentes activos (como imágenes) para ellos. Hay un buen artículo que explica el enfoque móvil. Alternativamente, puede consultar directamente el recurso para desarrolladores de Android .
2. Navegación
Un navegador web generalmente tiene la página actual, un botón de retroceso para almacenar el historial y otros anclajes. En la versión móvil del sitio, en cambio, tenemos pantallas y navegación entre ellas, actuando en patrones claros: navegación a través de pestañas, a lo largo de la pila y retroceso. No puede usar React-router para hacer esto, pero puede usar la biblioteca de navegación React para una navegación receptiva .
Navegación de pestañas animadas en React-Native
3. Estilos
Aquí, en el mundo móvil, CSS no funcionará y ninguna de las soluciones que funcionan con él funciona. No puede usar CSS-in-JS, LESS o cualquier otra cosa. En su lugar, puede utilizar objetos JSON para definir estilos de componentes.
Nota:
- siempre use StyleSheet.create ({}) para que React-Native pueda almacenar estilos en caché;
- Flexbox todavía está aquí, solo que tiene un nombre diferente.
Ejemplo de estilos de React-Native
4. Red
Si está creando un sitio web o una aplicación de escritorio con React (por ejemplo, Electron), puede confiar en una conexión a Internet buena y razonablemente estable. Pero ahora estamos hablando de dispositivos móviles, y aquí Internet puede ser muy lento, inestable o incluso ausente. Por tanto, es necesario desarrollar una aplicación con esta peculiaridad en mente: solicitudes de conexión, trabajo offline (caché, por ejemplo). La conexión también puede romperse durante la operación, por lo que debe estar preparado para esto.
5. Firma
A diferencia de un sitio web, que simplemente se puede implementar en un almacenamiento compatible con S3, una aplicación móvil debe estar firmada digitalmente para el teléfono para asegurarse de que el desarrollador sea de confianza. Este proceso puede ser realmente laborioso, especialmente para iOS, donde necesitas comprar un programa para un desarrollador, crear un id de aplicación, un perfil, generar y exportar un certificado de firma ... En la plataforma Android, parece más fácil: puedes generar todos los datos necesarios usando una línea de comando o usando Android Studio y distribuya la aplicación de inmediato.
6. Difusión
Nuevamente: no puede simplemente cargar contenido en S3 o una máquina virtual. Debe pasar por Google Play y App Store o distribuir su aplicación fuera de la tienda oficial, por ejemplo, si la aplicación es corporativa, destinada solo a los empleados de una organización. Sin embargo, la App Store simplemente no permitirá publicar la aplicación directamente en la App Store, tendrá que usar algún tipo de solución MDM o simplemente distribuirla a través de MS App Center, Firebase Distribution, etc.
Además, hay muchas reglas en las tiendas que deben seguirse. Estos incluyen iconos, gráficos, pautas de la interfaz de usuario , permisos, seguridad y más.
7. Herramientas
También puede usar VSCode o WebStore o incluso Vim para editar su código y Chrome como depurador, o puede usar Xcode y Android Studio para obtener más beneficios como registros, herramientas de monitoreo, edición de archivos y más. También le encantará Flipper, Reactotron y otras herramientas que acelerarán su trabajo con React-Native.
React-Native en WebStorm IDE
8. Emuladores, simuladores y dispositivos
Para el desarrollo web, basta con varios navegadores. Para el desarrollo móvil, debe ejecutar el código en un dispositivo móvil: puede usar su teléfono, pero es poco probable que tenga dispositivos con Android e iOS a su alcance.
Buenas noticias: puede usar emuladores de Android (que se pueden descargar y ejecutar desde Android Studio) o simuladores de iOS construidos a partir de Xcode si está en una Mac (no, no puede tener simuladores de iOS en ningún otro hardware, al menos legalmente ). Es una experiencia totalmente nueva, pero divertida.
9. Relación con el código nativo
Su código js permanecerá con usted, pero también interactuará con el código nativo (Kotlin, Swift). La aplicación debe estar correctamente vinculada, de lo contrario, podría bloquearse o funcionar mal. La buena noticia es que cuando se trabaja con React-Native desde la versión 0.60, la vinculación ocurre automáticamente para la mayoría de las bibliotecas externas.
Arquitectura de una aplicación React-Native
10. Reutilización de código
¡Buenas noticias, finalmente! Si está creando una aplicación web y una aplicación móvil, puede reutilizar parte del código. Definitivamente puede reutilizar todo el dominio y el código de red, ya que no hay especificidad para Internet o dispositivos móviles. Lo más probable es que también pueda reutilizar la lógica empresarial, pero esto es menos probable.
En artículos futuros, espero analizar más de cerca cada uno de estos puntos.