Cómo depurar felizmente una aplicación React Native para Android

Primero asegúrate de que tu ordenador y tu dispositivo móvil estén en el mismo entorno Wi-Fi.

En segundo lugar, debes habilitar la depuración USB para instalar tu aplicación en tu dispositivo. ¡Asegúrese de haber activado el interruptor de depuración USB del dispositivo!

Asegúrese de que su dispositivo se haya conectado correctamente. Puede ingresar dispositivos adb para verificar:

Ver dispositivo a la derecha. columna para indicar que El dispositivo se ha conectado correctamente. Tenga en cuenta que sólo debe conectar un dispositivo.

Porque si conectas varios dispositivos (incluidos simuladores), algunas de tus operaciones posteriores pueden fallar. Desenchufe los dispositivos innecesarios o apague el emulador y asegúrese de que solo una de las salidas de los dispositivos adb esté conectada.

Ahora podemos ejecutar reaccionar-nativo run-android para instalar e iniciar nuestra aplicación en el dispositivo

Después de ejecutar este comando, de hecho, simplemente configure un servidor de nodo localmente, compile y empaquete su proyecto de Android

y luego cárguelo en su teléfono móvil. Luego, cuando se cambia el archivo js o se recarga

js se selecciona manualmente en el modo de depuración, el archivo del paquete se actualizará automáticamente para lograr el efecto de depuración que se muestra inmediatamente después de que se cambia el archivo js.

¿Qué diablos es esta "pantalla roja"? No se preocupe, es normal. Necesitamos conectarnos al servidor de desarrollo. Los siguientes pasos resolverán este problema.

Agite el teléfono o ejecute adb shell input keyevent 82 para abrir el menú de desarrollador.

Haga clic para ingresar a Configuración de desarrollo

Haga clic en Depurar host del servidor para el dispositivo

Ingrese la dirección IP y el número de puerto de su computadora (por ejemplo, la mía es 192.168. 3.15:8081 )

Nota: si su dispositivo es Android 5.0 o superior (API 21), no necesita molestarse con este paso

En su lugar: ejecute adb reverse tcp: 8081 tcp: 8081 (Crea un puerto reenviado desde el dispositivo a la computadora, siempre que el dispositivo y la computadora estén conectados vía USB)

Sin ninguna configuración adicional, puedes usar Reload JS y otras opciones de desarrollo

Herramientas para desarrolladores de Chrome

Para depurar código js en Chrome, debe seleccionar Depurar JS en el menú de desarrollo, lo que abrirá una nueva página.

En

Chrome, presione la opción ? o seleccione Ver -gt; Desarrollador -gt; Herramientas de desarrollo (Herramientas de desarrollador) para abrir la consola de herramientas de desarrollador. . Active la opción Pausa al detectar excepciones

para obtener una mejor experiencia de desarrollo.

Chrome no puede ver directamente la interfaz de usuario de la aplicación, pero solo puede proporcionar salida de consola y depurar scripts js en el punto de interrupción del elemento de fuentes.

¿Quieres ver el registro de la APLICACIÓN?

Ejecute adb logcat *:S ReactNative:V ReactNativeJS:V en la terminal para ver los registros de su aplicación.

Actualización en tiempo real

Esta opción puede hacer que el dispositivo o simulador conectado se actualice automáticamente después de cambiar el código js.

Cómo habilitarlo: primero abra el menú de desarrollo, seleccione Configuración de desarrollo y luego seleccione la opción Recarga automática en cambio de JS.

Solo en este punto puedes depurar completamente Android RN, lo cual es tan tedioso que no me gusta. .

Espera, ¿se te ocurre alguna manera de simplificar el proceso?

Dado que nuestro proyecto RN contiene un proyecto de Android completo, ¿por qué no importar el proyecto de Android a Android Studio para ejecutarlo? No solo puede ver registros js y registros nativos al mismo tiempo, sino que los estudiantes que desarrollan Android están más familiarizados con AS y pueden usar teclas de acceso directo de AS y varios complementos para mejorar la eficiencia de la depuración.

¡Pruébalo, la respuesta es sí!

También puedes iniciar un servidor de nodo ejecutando react-native start, pero no te ayudará a instalar la APP en el dispositivo.

Lo anterior es la forma en que lo solucioné después de entrar en la trampa. Puedes depurarlo felizmente presionando esta combinación de golpes. El nivel es limitado, si tienes una mejor manera, ¡solo dame un consejo! ¡Bienvenidos a Paizhuan!

Aquí se inserta un anuncio: Tome una foto de nuestro espacio abierto del bosque de albaricoqueros (246078103). Esperamos que los estudiantes interesados ​​se unan a nosotros.

Algunos problemas a resolver en el futuro

1. Respecto al dispositivo MinSdkVerison

RN solo es compatible con dispositivos Android 4.1.2 (API16) y superiores. Para datos de red, 4.0 representa aproximadamente. En comparación con una proporción de 0.7, ya que la mayoría de las aplicaciones ya no admiten dispositivos por debajo de 4.0, este aspecto sigue siendo aceptable actualmente, nuestra carpeta de registros médicos es 3.0 (API-11) y el bolsillo es 4.0 (API-11). 14)

2. Nuestro androidRN ahora solo puede representar la interfaz a través de Debug JS, pero no puede usar Reload JS normalmente

3.