Cómo exportar una aplicación móvil desde un proyecto React existente usando React Native con cambios mínimos

Hasta donde sé, la única forma de hacerlo es crear un nuevo proyecto nativo de reacción y copiar sobre su src / carpeta (o lo que sea que contenga su código js personalizado) y luego cambiar las partes necesarias para que funcione con RN. La buena noticia es que debe haber una gran cantidad de código compartido entre la aplicación web y la aplicación móvil, la regla general es:

  • La mayoría / toda la lógica de negocios en sus componentes se puede compartir, las excepciones incluyen cualquier referencia al DOM o al objeto de ventana.
  • Si está utilizando redux, entonces todo el código redux (acciones, reductores, middlewares, etc.) debe ser 100% reutilizable.
  • El enrutamiento probablemente necesitará muchos ajustes o se volverá a hacer por completo, depende de lo que decida usar, el enrutador de reacción tiene un enrutador RN, pero no lo he probado personalmente. La buena noticia es que hay un nuevo enrutador que está destinado a ser el nuevo enrutador que los creadores afirman que funciona tanto en la web como en el nativo, por lo que parece prometedor: react-community / react-navigation
  • Es poco probable que los estilos sean reutilizables, la transición será un poco más suave si está utilizando el enfoque “CSS en JS”, pero incluso entonces es posible que deba cambiar el nombre de algunas propiedades o cambiarlas completamente porque funcionan de manera diferente en RN.
  • Todo el HTML no es reutilizable, supongo que podría acelerar un poco las cosas reemplazando todas las etiquetas div / span con las etiquetas Ver / Texto, pero aún así, necesitará muchos ajustes

El ajuste de los estilos y el html probablemente te llevará más tiempo, pero en general no tendrás que preocuparte por la lógica de tu aplicación.

Sin embargo, para referencia futura, Microsoft lanzó una nueva biblioteca React para crear aplicaciones multiplataforma (web y móvil). No lo he probado personalmente, pero vale la pena echarle un vistazo:

Una biblioteca para crear aplicaciones multiplataforma – ReactXP

El truco para esto es asegurarse de que haya extraído todo su código dependiente del DOM en módulos específicos. Cualquier cosa que llame a `window` o contenga un elemento HTML como` div` no funcionará en RN. Es posible que tenga que hacer una auditoría de algunas de sus dependencias para esto también.

Si está utilizando algo como redux para administrar su estado, probablemente tenga suerte. ¡Casi todo esto debería ser completamente transferible a una aplicación móvil!

Una vez que haya hecho eso, puede comenzar a portar las partes de su interfaz que desea en el móvil a RN. Recuerde, trate de mantener los componentes de su interfaz lo más “tontos” posible para que pueda compartir su código “inteligente” entre la web y el móvil. Es posible que desee utilizar una herramienta “monorepo” como Lerna u OAO para mantener el código que comparte por separado entre las aplicaciones. Los paquetes privados de NPM son otra buena opción.