2025/01/17 | inaki
with openai

Buscar

Django + React Native

Descripción de la imagen

Comandos para trabajar con React Native:

npx react-native start

 

npx react-native run-android

 

Diferencias entre los comandos:

  1. npx react-native start

    • Inicia el servidor Metro Bundler.
    • Sirve los archivos JavaScript a la aplicación ya instalada en el dispositivo.
    • Si la app ya está instalada, este comando es suficiente para ver los cambios en vivo gracias a Fast Refresh.

  2. npx react-native run-android

    • Compila, construye e instala la app en el dispositivo o emulador.
    • También inicia Metro Bundler si no está corriendo.
    • Si no tienes la app instalada, necesitas ejecutarlo al menos una vez.

¿Cuándo es necesario ejecutar npx react-native run-android?

  • Si es la primera vez que ejecutas la app en el dispositivo/emulador.
  • Si realizaste cambios en el código nativo (Android o iOS), como modificar AndroidManifest.xml o agregar nuevas dependencias nativas.
  • Si la aplicación falla o deja de responder, para reinstalarla correctamente.

¿Cuándo basta con npx react-native start?

  • Si la app ya está instalada en el dispositivo.
  • Si solo haces cambios en JavaScript (JSX, lógica, estilos, etc.), ya que Fast Refresh aplicará los cambios en tiempo real.

Consejo: Para asegurarte de que los cambios en JavaScript se reflejen sin problemas, siempre deja npx react-native start corriendo en una terminal mientras desarrollas.

Creación de APP utilizando django como backend y React Native como frontend. La conexión se realiza mediante API. Se crean 2 proyectos, uno para django y otro para React Native. Independientes pero que se comunicarán.

 

Instalar django-restframework

pip install djangorestframework

1.2. Configura settings.py

Añade 'rest_framework' a la lista de INSTALLED_APPS:

INSTALLED_APPS = [
    ...
    'rest_framework',
]

1.3. Crea las APIs

  • Define tus modelos si no lo has hecho ya.
  • Crea serializers para convertir modelos a formato JSON. Ejemplo:
  •  

Crear archivo serializers.py en nuestro caso en applications/home/serializers.py

from rest_framework import serializers
from .models import Blog

class BlogSerializer(serializers.ModelSerializer):
    class Meta:
        model = Blog
        fields = '__all__'

Crea vistas basadas en API en applications/home/views. Ejemplo:

from django.shortcuts import render
from rest_framework.views import APIView
from rest_framework.response import Response
from .models import Blog
from .serializers import BlogSerializer

class BlogAPIView(APIView):
    def get(self, request):
        data = Blog.objects.all()
        serializer = BlogSerializer(data, many=True)
        return Response(serializer.data)

Añade rutas en urls.py:

En urls.py principal (junto settings.py) apuntamos a applications/home/urls

urlpatterns = [
    ...
    path('', include('applications.home.urls')),
    ...
]

En urls de la aplicacion home creamos la urls para la API (applications/home/urls.py)

from django.urls import path
from .views import BlogAPIView

urlpatterns = [
    path('api/blog/', BlogAPIView.as_view(), name='blog-api'),
]

1.4. Configura CORS (Cross-Origin Resource Sharing)

Instala y configura el paquete django-cors-headers para permitir solicitudes desde React Native:

pip install django-cors-headers
pip install pillow

Añade 'corsheaders' a INSTALLED_APPS y configura en settings.py:

INSTALLED_APPS += [
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

CORS_ALLOWED_ORIGINS = [
    "http://localhost:19000",  # Dirección del servidor de desarrollo de React Native
]

Podemos probar que django esté bien preparado como backend:

http://localhost:8000/api/mymodel/

Debería mostrar algo así:

 

2. Crear el proyecto en React Native

2.1. Instala React Native CLI

Instala el entorno de React Native si aún no lo tienes (preguntará si se procede y pulsamos "y"):

Lo instalaremos aparte del directorio django, ya que el entorno virtual es independiente. En mi caso lo he creado en proyectos y quedan aśi. Son dos proyectos independientes el de ReactNative y el de Django como se puede ver:

Documents/proyectos/MyReactNativeApp

Documents/proyectos/djangoapp/djangoapp/manage.py

Documents/proyectos/djangoapp/env

 

Una vez estamos en Documentos/proyectos/ creamos el proyecto ReactNative

npx @react-native-community/cli init MyReactNativeApp

Esto creará el proyecto básico.

2.2. Navega al directorio del proyecto

cd MyReactNativeApp

Una vez dentro ejecutamos comando para Android o para Apple:

npx react-native run-android
# O para iOS
npx react-native run-ios

En nuestro caso lo haremos para android:

npx react-native run-android

Instalación de Android Studio

(Si lo tienes instalado, te puedes saltar esta pate)

Descargamos:

Descomprimimos en el directorio que nos interesa:

sudo tar -xvf android-studio-2024.2.2.13-linux.tar.gz -C /opt/

Instalar:

cd /opt/android-studio/bin
./studio.sh

Abrir Android Studio:

Al ejecutarel siguiente comando...

npx react-native run-android

...si salta este siguiente error significa que React Native no encuentra un emulador Android disponible.

1.- Error: No emulators found as an output of emulator -list-avds.

  • React Native no encuentra un emulador Android disponible.
  • Solución:

Solución:

  • Asegúrate de tener un emulador configurado en Android Studio.
  • Abre Android Studio > "Device Manager" > Crea un emulador si no tienes uno.
  • Una vez creado, ejecuta el emulador manualmente antes de usar el comando:
npx react-native run-android

2.- Error: Gradle necesita Java 17, pero estás usando Java 11.

  • radle requiere una versión más reciente de Java (Java 17), pero tu entorno está configurado para Java 11.
  • Solución:
    1. Instala Java 17 (si no lo tienes):
sudo apt update
sudo apt install openjdk-17-jdk

Cambia la versión de Java predeterminada:

sudo update-alternatives --config java
  • Selecciona Java 17 en la lista.
  • Verifica la versión de Java:
java -version

3.- Error: El entorno de Android no está configurado correctamente. Esto ocurre porque React Native no puede encontrar las herramientas del SDK de Android o no están configuradas en las variables de entorno.

  • Solución: Asegúrate de que las siguientes variables estén configuradas en tu archivo ~/.bashrc o ~/.zshrc:

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin

Luego, recarga las variables:

source ~/.bashrc

Pasos completos para solucionar el problema

  1. Configura un emulador en Android Studio:

    • Abre Android Studio.
    • Ve a Device Manager.
    • Crea y lanza un emulador.

  2. Actualiza Java a la versión 17: Instala Java 17 y cámbiala como predeterminada.

  3. Configura las variables de entorno de Android: Asegúrate de que las variables de entorno apunten correctamente al SDK de Android.

  4. Lanza el emulador manualmente (opcional): Antes de ejecutar el comando, lanza el emulador con:

emulator -avd <nombre_del_emulador>

5. Ejecuta el comando nuevamente:

npx react-native run-android

¡Ahora tu app debería ejecutarse en el emulador o dispositivo Android!

 

Para saber qué emulador tenemos instalado:

emulator -list-avds

Iniciar el emulador (en mi caso se llama Medium_Phone_API_35):

emulator -avd Medium_Phone_API_35

 

Para abrir Android Studio se pude hacer por terminal: