RootTag

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 →

RootTag es un identificador opaco asignado a la vista raíz nativa de tu superficie de React Native, es decir, la instancia de ReactRootView o RCTRootView para Android o iOS respectivamente. En resumen, es un identificador de superficie.

¿Cuándo usar un RootTag?

Para la mayoría de desarrolladores de React Native, es probable que no necesites trabajar con RootTags.

Los RootTags son útiles cuando una aplicación renderiza múltiples vistas raíz de React Native y necesitas manejar llamadas a APIs nativas de forma diferente según la superficie. Un ejemplo es cuando una aplicación usa navegación nativa y cada pantalla es una vista raíz de React Native separada.

En navegación nativa, cada vista raíz de React Native se renderiza dentro de una vista de navegación de la plataforma (ej. Activity en Android, UINavigationViewController en iOS). Esto permite aprovechar los paradigmas de navegación de la plataforma como apariencia nativa y transiciones de navegación. La funcionalidad para interactuar con las APIs de navegación nativa puede exponerse a React Native mediante un módulo nativo.

Por ejemplo, para actualizar la barra de título de una pantalla, llamarías a la API del módulo de navegación setTitle("Updated Title"), pero necesitaría saber qué pantalla de la pila actualizar. Aquí se requiere un RootTag para identificar la vista raíz y su contenedor host.

Otro caso de uso para RootTag es cuando tu aplicación necesita atribuir una llamada JavaScript específica a código nativo según su vista raíz de origen. Se requiere un RootTag para diferenciar el origen de la llamada entre diferentes superficies.

Cómo acceder al RootTag... si lo necesitas

En versiones 0.65 e inferiores, RootTag se accede mediante un contexto heredado. Para preparar React Native para las funciones Concurrentes de React 18 y posteriores, estamos migrando a la nueva Context API mediante RootTagContext en 0.66. La versión 0.65 soporta tanto el contexto heredado como el RootTagContext recomendado para permitir a los desarrolladores migrar sus puntos de llamada. Consulta el resumen de cambios importantes.

Cómo acceder a RootTag mediante RootTagContext.

js

import {RootTagContext} from 'react-native';
import NativeAnalytics from 'native-analytics';
import NativeNavigation from 'native-navigation';

function ScreenA() {
  const rootTag = useContext(RootTagContext);

  const updateTitle = title => {
    NativeNavigation.setTitle(rootTag, title);
  };

  const handleOneEvent = () => {
    NativeAnalytics.logEvent(rootTag, 'one_event');
  };

  // ...
}

class ScreenB extends React.Component {
  static contextType: typeof RootTagContext = RootTagContext;

  updateTitle(title) {
    NativeNavigation.setTitle(this.context, title);
  }

  handleOneEvent() {
    NativeAnalytics.logEvent(this.context, 'one_event');
  }

  // ...
}

Aprende más sobre la Context API para clases y hooks en la documentación de React.

Cambio importante en 0.65

RootTagContext anteriormente se llamaba unstable_RootTagContext y cambió a RootTagContext en 0.65. Actualiza cualquier uso de unstable_RootTagContext en tu base de código.

Cambio importante en 0.66

El acceso mediante contexto heredado a RootTag será eliminado y reemplazado por RootTagContext. Desde la versión 0.65, recomendamos a los desarrolladores migrar proactivamente los accesos a RootTag usando RootTagContext.

Planes futuros

Con el avance de la nueva arquitectura de React Native, habrá iteraciones futuras de RootTag, manteniendo el tipo RootTag como opaco y evitando cambios disruptivos en las bases de código de React Native. ¡No dependas del hecho de que RootTag actualmente es un alias numérico! Si tu aplicación usa RootTags, sigue nuestros registros de cambios de versión disponibles aquí.