Buenas tardes, residentes de Khabrovsk. Hoy compartimos con ustedes una traducción de un artículo cuya traducción fue preparada específicamente para el primer lanzamiento del
curso ReactJS / React Native-Developer . Que tengas una buena lectura.
Si eres nuevo en el mundo React Native, entonces sabes que tiene algunas trampas que te gustaría evitar. En algunos casos, tendrá que elegir de antemano sin tener la menor idea de cómo o qué afectará.
A continuación, he compilado una lista de los mejores consejos prácticos de mi experiencia personal que espero sean de utilidad para usted :)
Use Expo-Kit solo si realmente sabe lo que está haciendo.
Expo es una herramienta gratuita de código abierto para React Native. Es posible que este sea el mejor conjunto de herramientas para crear aplicaciones en React Native, sin embargo, también tiene sus limitaciones.
Use Expo:- Si solo desea crear un sandbox, no cree un repositorio para su aplicación. Simplemente cree una nueva aplicación usando el paquete create-react-native-app .
- Si ha investigado antes de crear una aplicación y se ha dado cuenta de que todas sus necesidades pueden ser cubiertas por las soluciones que ofrece Expo.
- Si no tiene una computadora Mac OS, pero aún así desea crear aplicaciones para iPhone. Esta es la única alternativa para crear ejecutables IPA.
No use Expo:- Si eres nuevo en React Native y crees que esta es la única forma de crear una aplicación. En primer lugar, verifique si cumple con sus requisitos.
- Si planea utilizar paquetes RN de terceros con módulos de usuario nativos. Expo no admite esta funcionalidad, en cuyo caso deberá extraer el (expulsar) Expo-Kit . En mi opinión, si inicialmente va a extraer cualquier conjunto de herramientas, no debe usarlo en absoluto. El procedimiento de extracción complicará la creación de la aplicación, en comparación con si no la usó en absoluto.
En general, creo que Expo es una gran herramienta, y utilizo
Expo Snack para compartir el código React Native. Sin embargo, por el momento solo puede ser útil para crear ciertos tipos de aplicaciones.
Cómo estructurar carpetas y archivos de su aplicación
Organizar una aplicación en React Native no es diferente de organizar una aplicación en React. Por lo tanto, si está familiarizado con esto, simplemente adhiérase a la misma lógica. Sin embargo, si este no es el caso, la lógica que se describe a continuación será útil:
- Agregue la carpeta a la raíz y asígnele el nombre "aplicación";
- Crear carpetas dentro de la "aplicación":
assets : dentro tengo hasta tres carpetas con fuentes, íconos e imágenes.
components : aquí colocará todos los componentes de React compartidos. Por lo general, estos son los componentes que llamamos "ficticios" porque no tienen lógica de estado y pueden reutilizarse fácilmente dentro de la aplicación.
views : estas son nuestras pantallas de aplicaciones, aquellas con las que nos movemos de una a otra. Los componentes de reacción también se almacenan aquí, los que llamamos contenedores, porque almacenan su propio estado.
modules : las partes que no tienen una vista correspondiente (JCX) se almacenan allí. Ejemplos típicos son el módulo de colores (contiene todos los colores de la aplicación) y el módulo de utilidades (contiene funciones de utilidad que se pueden reutilizar).
services : aquí están las funciones que envuelven las llamadas API.
i18n : la traducción se almacena aquí para usuarios con diferentes idiomas y configuraciones regionales.
Todas las aplicaciones requieren un cierto tipo de configuración, por lo que generalmente creo un archivo llamado
config.js y lo
config.js allí. Si hay demasiadas líneas en el archivo de configuración, puede crear una carpeta de
config separada y dividirla en varios archivos.
Si tiene una biblioteca de administración de estado, también necesitará carpetas para sus componentes. En el caso de Redux, se utilizan 2 o más carpetas, una para
actions y otra para
reducers . Si no utiliza paquetes externos y prefiere usar la API React Context, puede crear sus propios proveedores, que se pueden colocar en la carpeta de módulos o en la nueva carpeta de
providers .
Seleccionamos la biblioteca de navegación de acuerdo a sus necesidades.
Desafortunadamente, RN aún no tiene una solución completa o al menos un reemplazo digno para el antiguo componente Navigator, por lo que ahora nos centraremos en cómo la comunidad resuelve este problema. Por lo tanto, si va a crear un proyecto y desea saber qué biblioteca de navegación usar, esta sección es solo para usted.
En general, hay dos tipos de bibliotecas de navegación: navegadores JavaScript y navegadores nativos. Las primeras están escritas en JavaScript, mientras que las bibliotecas nativas están escritas en módulos nativos de acuerdo con la plataforma (Android, iOS) y conectadas a módulos JavaScript para ser incorporados al código. Los primeros son mucho más fáciles de configurar, mientras que los segundos son mucho más eficientes. Tómese el tiempo para descubrir qué tipo le conviene más y luego elija entre tantas bibliotecas de ese tipo.
Spencer Carly ha hecho un gran trabajo y ha desarrollado opciones de navegación actuales en el mundo React Native, puede leer su
artículo sobre este tema. Las soluciones más populares ahora son
React Navigation , como una solución de JavaScript, y
React Native Navigation , como una solución nativa.
Para mayor comodidad, use la biblioteca de contenedor CSS-in-JS
En React Native, CSS está escrito en JavaScript. Aquí no tenemos otra opción. Personalmente, en lugar de usar el método
StyleSheet.create y el código CSS en JavaScript puro, uso la biblioteca
Styled Components . Los componentes con estilo hacen que CSS sea claro nuevamente y hacen que JSX sea más semántico.
Recientemente escribí un artículo sobre por qué prefiero usar componentes con estilo en las aplicaciones
React Native , puede leerlo para comprender mejor el tema.
Decida de antemano cómo desea que su aplicación escale en diferentes dispositivos con diferentes tamaños de pantalla.
Lo más probable es que esté desarrollando una aplicación para más de un dispositivo y tamaño de pantalla. Ahora hay dos enfoques para el diseño y el desarrollo de aplicaciones.
Puede optar por una UX / UI diferente según el tamaño de la pantalla. Para la mayoría de los tipos de aplicaciones, esta es probablemente la mejor opción, pero requiere mucho esfuerzo, ya que debe idear e implementar varias opciones de pantalla. Los tamaños de pantalla se pueden determinar utilizando la
API Dimensiones . Por otro lado, puede usar un paquete de terceros que proporciona algunas herramientas
listas para usar, como la
interfaz de usuario React Native Responsive .
O puede usar la misma UI / UX, que escalará proporcionalmente para todos los tamaños de pantalla. Esta es la mejor opción si, por ejemplo, estás desarrollando un juego. Nuevamente, puede usar un paquete de terceros, por ejemplo,
React Native Responsive Screen .
Descargo de responsabilidad: soy el creador del paquete React Native Responsive Screen .
Ten cuidado con la animación.
La animación es crucial para las aplicaciones móviles, pero el rendimiento de React Native es pobre.
Para protegerse contra errores, debe probar la animación en el dispositivo, ya que el emulador no proporciona los comentarios correctos. También debe usar
useNativeDriver (con verdadero) siempre que sea posible, ya que esto ayudará a lograr un mejor rendimiento.
Si desea más consejos sobre cómo lograr un mejor rendimiento, eche un vistazo a mi
artículo anterior.
También recuerda
- React Native no tiene elementos DOM. En cambio, trabajamos con elementos nativos.
- Sobre CSS:
- No todas las funciones son compatibles, al menos todavía no. Para obtener más información, consulte la documentación: Ver propiedades de estilo , propiedades de estilo de imagen , propiedades de estilo de texto .
- Las propiedades acortadas no siempre funcionan bien, por lo que es mejor usar propiedades específicas (como margen inferior, margen superior, margen izquierdo, margen derecho en lugar de margen).
- No todas las propiedades admiten porcentajes. Por ejemplo, lo siguiente: margen, ancho de borde y radio de borde. Si alguien intenta usar valores porcentuales, RN los ignorará o la aplicación se bloqueará en principio.
- RN admite flex fuera de la caja. Examínelo y úselo cuando sea apropiado. ¡Este es el mejor aliado de CSS!
Eso es todo. Obtenga más información sobre el curso
aquí .