create react native app redux auth
1.0.0
Este es un Boilerplate create-react-native-app con redux y autenticación local y reactación de navegación incorporada.
create-react-native-app-redux-auth genera todos los archivos fundamentales para una nueva aplicación nativa React con redux enchufado (para administración estatal) más react navegación y autenticación local completamente hecha!
Puede trabajar con todos los componentes y API en React Native, así como la mayoría de las API de JavaScript que proporciona la aplicación Expo.
create-react-native-app-redux-auth !Se puede encontrar un tutorial escrito completo aquí.
Este proyecto fue arrancado con la aplicación Crear React Native y FSG.
Asegúrese de tener instalado el nodo V6 o posterior, así como la versión actual de Expo Client 2.5.0 en su dispositivo móvil para admitir React Native 0.55. No se requiere instalación de Xcode o Android Studio.
$ npm install -g create-react-native-app-redux-auth La herramienta create-react-native-app-redux-auth línea de comandos se puede usar de un par de maneras diferentes.
$ create-react-native-app-redux-auth Simplemente ejecutar create-react-native-app-redux-auth en un directorio crea un subcarpeta generated que contiene sus nuevos archivos de aplicación.
Alternativamente, create-react-native-app-redux-auth puede tomar una ruta de archivo (relativa o absoluta, e incluso una que aún no exista), y usará/creará la carpeta de destino y la llenará con sus nuevos archivos de aplicación.
$ create-react-native-app-redux-auth path/to/any/directory/you/prefer Si ya ha realizado y cd 'D en un directorio, y desea llenarlo con los nuevos archivos de la aplicación, simplemente use el . camino.
$ create-react-native-app-redux-auth . # caution, this will put the new files in your current folder! Después de generar los archivos, asegúrese de que los siguientes comandos se ejecuten en la raíz del proyecto ( generated/ a menos que haya utilizado un argumento de ruta como se explicó anteriormente):
$ npm installPara comenzar rápido, solo cambia 2 cosas :
package.json , cambie el "nombre" al nombre de su aplicación.IP.js , cambie la IP a la dirección IP completa de su backend, ya sea en localhost:PORT o en algún lugar desplegado, como Heroku.Para habilitar la autenticación local incorporada, el proyecto generado asume una base de datos en ejecución. Debe configurar su servidor para las llamadas de Axios de Redux:
${IP}/auth/login con la carga útil {correo electrónico: correo electrónico, contraseña: contraseña}.${IP}/auth/signup con la carga útil {Correo electrónico: correo electrónico, contraseña: contraseña}.${IP}/auth/logout sin carga útil. $ npm start¡Gracias por jugar! Hadoken. ?
A continuación encontrará información sobre cómo realizar tareas comunes. La versión más reciente de esta guía está disponible aquí.
Solo debe actualizar la instalación global de create-react-native-app muy raramente, idealmente nunca.
La actualización de la dependencia react-native-scripts de su aplicación debe ser tan simple como aumentar el número de versión en package.json y reinstalar las dependencias de su proyecto.
La actualización a una nueva versión de React Native requiere actualizar las versiones de paquetes react-native , react y expo , y establecer la sdkVersion correcta en app.json . Consulte la guía de versiones para obtener información actualizada sobre la compatibilidad de la versión del paquete.
Si el hilo se instaló cuando se inicializó el proyecto, entonces las dependencias se habrán instalado a través del hilo, y probablemente debería usarlo para ejecutar estos comandos también. A diferencia de la instalación de dependencia, el comando que ejecuta la sintaxis es idéntico para el hilo y el npm en el momento de este escrito.
npm startEjecuta su aplicación en modo de desarrollo.
Ábrelo en la aplicación Expo en su teléfono para verlo. Se volverá a cargar si guarda ediciones en sus archivos, y verá errores de compilación y registros en el terminal.
A veces es posible que deba restablecer o borrar el caché del paquete nativo React. Para hacerlo, puede pasar el indicador --reset-cache al script de inicio:
npm start --reset-cache
# or
yarn start --reset-cache
npm testEjecuta el corredor de prueba de Jest en sus pruebas.
npm run ios Al igual que npm start , pero también intenta abrir su aplicación en el simulador de iOS si está en una Mac y la instale.
npm run android Al igual que npm start , pero también intenta abrir su aplicación en un dispositivo Android conectado o emulador. Requiere una instalación de herramientas de compilación de Android (consulte Docios nativos de React para una configuración detallada). También recomendamos instalar GenyMotion como su emulador de Android. Una vez que haya terminado de configurar el entorno de compilación nativo, hay dos opciones para hacer que la copia correcta de adb esté disponible para crear la aplicación React Native:
adb de Android StudioSettings -> ADB . Seleccione "Usar herramientas SDK de Android" y actualizar con su directorio SDK de Android. adb de Genymotion/Applications/Genymotion.app/Contents/MacOS/tools/ .npm run ejectEsto comenzará el proceso de "expulsar" a partir de los scripts de compilación de la aplicación Native React. Se le harán un par de preguntas sobre cómo le gustaría construir su proyecto.
ADVERTENCIA: Ejecutar Eject es una acción permanente (aparte de cualquier sistema de control de versiones que use). Una aplicación expulsada requerirá que tenga un entorno Xcode y/o Android Studio configurado.
Puede editar app.json para incluir claves de configuración en la tecla expo .
Para cambiar el nombre de visualización de su aplicación, establezca la tecla expo.name en app.json en una cadena apropiada.
Para establecer un icono de aplicación, establezca la tecla expo.icon en app.json para que sea una ruta local o una URL. Se recomienda que use un archivo PNG 512X512 con transparencia.
Este proyecto está configurado para usar JEST para las pruebas. Puede configurar cualquier estrategia de prueba que desee, pero Jest funciona fuera de la caja. Cree archivos de prueba en directorios llamados __tests__ o con la extensión .test para que los archivos carguen por Jest. Vea el proyecto de plantilla para una prueba de ejemplo. La documentación de Jest también es un recurso maravilloso, al igual que el tutorial de pruebas nativas React.
Puede configurar parte de Crea React Native App Behavior utilizando variables de entorno.
Al comenzar su proyecto, verá algo así para la URL de su proyecto:
exp://192.168.0.2:19000
El "manifiesto" en esa URL le dice a la aplicación Expo cómo recuperar y cargar el paquete JavaScript de su aplicación, por lo que incluso si lo carga en la aplicación a través de una URL como exp://localhost:19000 , la aplicación de cliente Expo aún intentará recuperar su aplicación en la dirección IP que proporciona el script de inicio.
En algunos casos, esto es menos que ideal. Este podría ser el caso si necesita ejecutar su proyecto dentro de una máquina virtual y debe acceder al paquete a través de una dirección IP diferente a la que se imprime por defecto. Para anular la dirección IP o el nombre de host detectado por la aplicación Create React Native, puede especificar su propio nombre de host a través de la variable de entorno REACT_NATIVE_PACKAGER_HOSTNAME :
Mac y Linux:
REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname' npm start
Windows:
set REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname'
npm start
El ejemplo anterior haría que el servidor de desarrollo escuche en exp://my-custom-ip-address-or-hostname:19000 .
Create React Native App realiza mucho trabajo para hacer que la configuración y el desarrollo de la aplicación sean simples y directos, pero es muy difícil hacer lo mismo para implementar en la tienda de aplicaciones de Apple o la tienda Play de Google sin confiar en un servicio alojado.
Expo proporciona alojamiento gratuito para las aplicaciones solo JS creadas por CRNA, lo que le permite compartir su aplicación a través de la aplicación Expo Cliente. Esto requiere el registro para una cuenta de Expo.
Instale la herramienta de línea de comandos exp y ejecute el comando Publish:
$ npm i -g exp
$ exp publish
También puede usar un servicio como las compilaciones independientes de Expo si desea obtener un IPA/APK para su distribución sin tener que construir el código nativo usted mismo.
Si desea construir e implementar su aplicación usted mismo, deberá expulsar de CRNA y usar Xcode y Android Studio.
Esto suele ser tan simple como ejecutar npm run eject en su proyecto, que lo guiará a través del proceso. Asegúrese de instalar react-native-cli y siga la Guía del Código Nativo de inicio para React Native.
Si ha utilizado las API de Expo mientras trabaja en su proyecto, esas llamadas de API dejarán de funcionar si se expulsa a un proyecto Native REACT regular. Si desea continuar usando esas API, puede expulsar a "React Native + Expokit" que aún le permitirá construir su propio código nativo y continuar usando las API de Expo. Consulte la guía de expulsión para obtener más detalles sobre esta opción.
Si no puede cargar su aplicación en su teléfono debido a un tiempo de espera de red o una conexión rechazada, un buen primer paso es verificar que su teléfono y computadora estén en la misma red y que pueden comunicarse entre sí. Cree React Native App necesita acceso a los puertos 19000 y 19001, así que asegúrese de que su configuración de red y firewall permita el acceso desde su dispositivo a su computadora en ambos puertos.
Intente abrir un navegador web en su teléfono y abrir la URL que imprime el script del paquete, reemplazando exp:// con http:// . Entonces, por ejemplo, si está debajo del código QR en su terminal, verá:
exp://192.168.0.1:19000
Intente abrir Safari o Chrome en su teléfono y cargar
http://192.168.0.1:19000
y
http://192.168.0.1:19001
Si esto funciona, pero aún no puede cargar su aplicación escaneando el código QR, abra un problema en el repositorio de aplicaciones Native Crear react con detalles sobre estos pasos y cualquier otro mensaje de error que pueda haber recibido.
Si no puede cargar la URL http en el navegador web de su teléfono, intente usar la función de Hotspot de ajuste/móvil en su teléfono (tenga cuidado con el uso de datos), conectando su computadora con esa red WiFi y reiniciando el paquete. Si está utilizando una VPN, es posible que deba deshabilitarla.
Si estás en una Mac, hay algunos errores que los usuarios a veces ven al intentar npm run ios :
Hay algunos pasos que puede tomar para solucionar problemas de este tipo de errores:
Command Line Tools esté configurada en algo. A veces, cuando las herramientas CLI son instaladas por primera vez por Homebrew, esta opción se deja en blanco, lo que puede evitar que las utilidades de Apple encuentren el simulador. Asegúrese de volver a ejecutar npm/yarn run ios después de hacerlo.Reset Contents and Settings... Después de que eso haya terminado, renuncie al simulador y vuelva a ejecutar npm/yarn run ios .Si no puede escanear el código QR, asegúrese de que la cámara de su teléfono se esté enfocando correctamente, y también asegúrese de que el contraste en los dos colores en su terminal sea lo suficientemente alto. Por ejemplo, los temas predeterminados de WebStorm pueden no tener suficiente contraste para que los códigos QR terminales sean escaneables con los escáneres de código de barras del sistema que usa la aplicación Expo.
Si esto le causa problemas, es posible que desee intentar cambiar el tema de color de su terminal para tener más contraste o ejecutar la aplicación de creación de React Native desde un terminal diferente. También puede ingresar manualmente la URL impresa por el script Packager en la barra de búsqueda de la aplicación de exposición para cargarla manualmente.
