Uso de Codegen

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Esta guía explica cómo:

• Configurar Codegen.

• Invocarlo manualmente para cada plataforma.

También describe el código generado.

Prerrequisitos

Siempre necesitarás una app de React Native para generar el código correctamente, incluso cuando invoques Codegen manualmente.

El proceso de Codegen está estrechamente ligado al build de la app, y los scripts se encuentran en el paquete NPM react-native.

Para esta guía, crea un proyecto usando la CLI de React Native así:

bash

npx @react-native-community/cli@latest init SampleApp --version 0.76.0

Codegen se usa para generar el código de vinculación para tus módulos o componentes personalizados. Consulta las guías de Módulos Nativos Turbo y Componentes Nativos Fabric para más detalles sobre cómo crearlos.

Configuración de Codegen

Puedes configurar Codegen en tu app modificando el archivo package.json. Codegen se controla mediante un campo personalizado llamado codegenConfig.

package.json

  "codegenConfig": {
    "name": "<SpecName>",
    "type": "<types>",
    "jsSrcsDir": "<source_dir>",
    "android": {
      "javaPackageName": "<java.package.name>"
    },
    "ios": {
      "modulesConformingToProtocol": {
        "RCTImageURLLoader": [
          "<iOS-class-conforming-to-RCTImageURLLoader>",
          // example from react-native-camera-roll: https://github.com/react-native-cameraroll/react-native-cameraroll/blob/8a6d1b4279c76e5682a4b443e7a4e111e774ec0a/package.json#L118-L127
          // "RNCPHAssetLoader",
        ],
        "RCTURLRequestHandler": [
          "<iOS-class-conforming-to-RCTURLRequestHandler>",
          // example from react-native-camera-roll: https://github.com/react-native-cameraroll/react-native-cameraroll/blob/8a6d1b4279c76e5682a4b443e7a4e111e774ec0a/package.json#L118-L127
          // "RNCPHAssetUploader",
        ],
        "RCTImageDataDecoder": [
          "<iOS-class-conforming-to-RCTImageDataDecoder>",
          // we don't have a good example for this, but it works in the same way. Pass the name of the class that implements the RCTImageDataDecoder. It must be a Native Module.
        ]
      },
      "componentProvider": {
        "<componentName>": "<iOS-class-implementing-the-component>"
      },
    }
  },

Puedes agregar este fragmento a tu app y personalizar los distintos campos:

• name: Nombre que se usará para crear archivos con tus especificaciones. Por convención, debe tener el sufijo Spec, pero no es obligatorio.

• type: Tipo de código a generar. Valores permitidos: modules, components, all.

  • modules: Usa este valor si solo necesitas generar código para Módulos Nativos Turbo.
  • components: Usa este valor si solo necesitas generar código para Componentes Nativos Fabric.
  • all: Usa este valor si tienes una mezcla de componentes y módulos.

• jsSrcsDir: Directorio raíz donde se encuentran todas tus especificaciones.

• android.javaPackageName: Configuración específica para Android que permite a Codegen generar archivos en un paquete personalizado.

• ios: Campo ios es un objeto para funcionalidades avanzadas (opcional para desarrolladores y mantenedores de librerías).

  • ios.modulesConformingToProtocol: Permite definir módulos nativos iOS que implementan protocolos específicos de React Native. Estos módulos se inyectan en el runtime al iniciar la app.
    • ios.modulesConformingToProtocol.RCTImageURLLoader: Lista de módulos nativos iOS que implementan el protocolo RCTImageURLLoader. Debes proporcionar nombres de clases que implementen RCTImageURLLoader.
    • ios.modulesConformingToProtocol.RCTURLRequestHandler: Lista de módulos nativos iOS que implementan el protocolo RCTURLRequestHandler. Debes proporcionar nombres de clases que implementen RCTURLRequestHandler.
    • ios.modulesConformingToProtocol.RCTImageDataDecoder: Lista de módulos nativos iOS que implementan el protocolo RCTImageDataDecoder. Debes proporcionar nombres de clases que implementen RCTImageDataDecoder.
  • ios.componentProvider: Mapa que asocia componentes React JS con clases nativas iOS. La clave es el nombre JS del componente (ej: TextInput), el valor es la clase iOS que lo implementa (ej: RCTTextInput).

Cuando Codegen se ejecuta, busca entre todas las dependencias de la app archivos JS que sigan convenciones específicas, y genera el código requerido:

• Los Módulos Nativos Turbo requieren que los archivos de especificación tengan prefijo Native. Ej: NativeLocalStorage.ts es un nombre válido.

• Los Componentes Nativos Fabric requieren que los archivos de especificación tengan sufijo NativeComponent. Ej: WebViewNativeComponent.ts es un nombre válido.

Ejecución de Codegen

El resto de esta guía asume que ya tienes configurado un Módulo Turbo Nativo, un Componente Fabric Nativo o ambos en tu proyecto. También asumimos que tienes archivos de especificación válidos en el jsSrcsDir especificado en package.json.

Android

Codegen para Android está integrado con el React Native Gradle Plugin (RNGP). El RNGP contiene una tarea invocable que lee las configuraciones definidas en el archivo package.json y ejecuta Codegen. Para ejecutar la tarea de Gradle, primero navega a la carpeta android de tu proyecto. Luego ejecuta:

bash

./gradlew generateCodegenArtifactsFromSchema

Esta tarea invoca el comando generateCodegenArtifactsFromSchema en todos los proyectos importados de la app (la aplicación y todos los módulos de nodo vinculados). Genera el código en la carpeta correspondiente node_modules/<dependency>. Por ejemplo, si tienes un componente nativo Fabric cuyo módulo de nodo se llama my-fabric-component, el código generado se encuentra en la ruta SampleApp/node_modules/my-fabric-component/android/build/generated/source/codegen. Para la app, el código se genera en la carpeta android/app/build/generated/source/codegen.

El código generado

Tras ejecutar el comando de Gradle anterior, encontrarás el código de Codegen en la carpeta SampleApp/android/app/build. La estructura será similar a esta:

build
└── generated
    └── source
        └── codegen
            ├── java
            │   └── com
            │       ├── facebook
            │       │   └── react
            │       │       └── viewmanagers
            │       │           ├── <nativeComponent>ManagerDelegate.java
            │       │           └── <nativeComponent>ManagerInterface.java
            │       └── sampleapp
            │           └── NativeLocalStorageSpec.java
            ├── jni
            │   ├── <codegenConfig.name>-generated.cpp
            │   ├── <codegenConfig.name>.h
            │   ├── CMakeLists.txt
            │   └── react
            │       └── renderer
            │           └── components
            │               └── <codegenConfig.name>
            │                   ├── <codegenConfig.name>JSI-generated.cpp
            │                   ├── <codegenConfig.name>.h
            │                   ├── ComponentDescriptors.cpp
            │                   ├── ComponentDescriptors.h
            │                   ├── EventEmitters.cpp
            │                   ├── EventEmitters.h
            │                   ├── Props.cpp
            │                   ├── Props.h
            │                   ├── ShadowNodes.cpp
            │                   ├── ShadowNodes.h
            │                   ├── States.cpp
            │                   └── States.h
            └── schema.json

El código generado se divide en dos carpetas:

• java que contiene el código específico de la plataforma

• jni que contiene el código C++ necesario para la interacción correcta entre JS y Java.

En la carpeta java, puedes encontrar el código generado para componentes nativos Fabric en el subdirectorio com/facebook/viewmanagers.

• <nativeComponent>ManagerDelegate.java contiene los métodos que el ViewManager puede llamar en el componente nativo personalizado

• <nativeComponent>ManagerInterface.java contiene la interfaz del ViewManager.

En la carpeta cuyo nombre se configuró en codegenConfig.android.javaPackageName, encontrarás la clase abstracta que un módulo Turbo nativo debe implementar para realizar sus tareas.

En la carpeta jni, finalmente, está todo el código boilerplate para conectar JS con Android.

• <codegenConfig.name>.h contiene la interfaz de tus módulos Turbo nativos personalizados en C++.

• <codegenConfig.name>-generated.cpp contiene el código de conexión (glue code) de tus módulos Turbo nativos personalizados en C++.

• react/renderer/components/<codegenConfig.name>: esta carpeta contiene todo el código de enlace requerido por tu componente personalizado.

Esta estructura se ha generado usando el valor all para el campo codegenConfig.type. Si usas el valor modules, no esperes ver la carpeta react/renderer/components/. Si usas el valor components, no esperes ver ninguno de los otros archivos.

iOS

Codegen para iOS depende de scripts Node que se invocan durante el proceso de compilación. Los scripts están ubicados en la carpeta SampleApp/node_modules/react-native/scripts/.

El script principal es generate-codegen-artifacts.js. Para invocarlo, ejecuta este comando desde la carpeta raíz de tu app:

bash

node node_modules/react-native/scripts/generate-codegen-artifacts.js

Usage: generate-codegen-artifacts.js -p [path to app] -t [target platform] -o [output path]

Options:
      --help            Show help                                      [boolean]
      --version         Show version number                            [boolean]
  -p, --path            Path to the React Native project root.        [required]
  -t, --targetPlatform  Target platform. Supported values: "android", "ios",
                        "all".                                        [required]
  -o, --outputPath      Path where generated artifacts will be output to.

donde:

• --path es la ruta a la carpeta raíz de tu app.

• --outputPath es el destino donde Codegen escribirá los archivos generados.

• --targetPlatform es la plataforma para la que deseas generar el código.

El código generado

Ejecutar el script con estos argumentos:

shell

node node_modules/react-native/scripts/generate-codegen-artifacts.js \
    --path . \
    --outputPath ios/ \
    --targetPlatform ios

Generará estos archivos en la carpeta ios/build:

build
└── generated
    └── ios
        ├── <codegenConfig.name>
        │   ├── <codegenConfig.name>-generated.mm
        │   └── <codegenConfig.name>.h
        ├── <codegenConfig.name>JSI-generated.cpp
        ├── <codegenConfig.name>JSI.h
        ├── FBReactNativeSpec
        │   ├── FBReactNativeSpec-generated.mm
        │   └── FBReactNativeSpec.h
        ├── FBReactNativeSpecJSI-generated.cpp
        ├── FBReactNativeSpecJSI.h
        ├── RCTModulesConformingToProtocolsProvider.h
        ├── RCTModulesConformingToProtocolsProvider.mm
        └── react
            └── renderer
                └── components
                    └── <codegenConfig.name>
                        ├── ComponentDescriptors.cpp
                        ├── ComponentDescriptors.h
                        ├── EventEmitters.cpp
                        ├── EventEmitters.h
                        ├── Props.cpp
                        ├── Props.h
                        ├── RCTComponentViewHelpers.h
                        ├── ShadowNodes.cpp
                        ├── ShadowNodes.h
                        ├── States.cpp
                        └── States.h

Parte de estos archivos generados son utilizados por React Native en el Core. Luego hay un conjunto de archivos que contienen el mismo nombre especificado en el campo codegenConfig.name del package.json.

• <codegenConfig.name>/<codegenConfig.name>.h: contiene la interfaz de tus módulos Turbo nativos personalizados para iOS.

• <codegenConfig.name>/<codegenConfig.name>-generated.mm: contiene el código de enlace de tus módulos nativos Turbo personalizados para iOS.

• <codegenConfig.name>JSI.h: contiene la interfaz de tus módulos nativos Turbo personalizados en C++.

• <codegenConfig.name>JSI-generated.h: contiene el código de enlace de tus módulos nativos Turbo personalizados en C++.

• react/renderer/components/<codegenConfig.name>: esta carpeta contiene todo el código de enlace requerido por tu componente personalizado.

Esta estructura se ha generado usando el valor all para el campo codegenConfig.type. Si usas el valor modules, no esperes ver la carpeta react/renderer/components/. Si usas el valor components, no esperes ver ninguno de los otros archivos.