Vinculación

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 →

Linking te proporciona una interfaz general para interactuar con enlaces entrantes y salientes de la aplicación.

Cada enlace (URL) tiene un Esquema de URL. Algunos sitios web tienen prefijos como https:// o http://, donde http es el Esquema de URL. A este esquema lo llamaremos simplemente "esquema".

Además de https, probablemente también conozcas el esquema mailto. Al abrir un enlace con este esquema, tu sistema operativo abrirá una aplicación de correo instalada. De manera similar, existen esquemas para realizar llamadas telefónicas y enviar SMS. Más adelante encontrarás información sobre los esquemas URL integrados.

Al igual que con el esquema mailto, puedes enlazar a otras aplicaciones mediante esquemas de URL personalizados. Por ejemplo, cuando recibes un correo con Magic Link de Slack, el botón Launch Slack es una etiqueta de anclaje con un href similar a: slack://secret/magic-login/other-secret. Como con Slack, puedes indicar al sistema operativo que deseas manejar un esquema personalizado. Cuando se abre la aplicación de Slack, recibe la URL utilizada para abrirla. Esto se conoce comúnmente como deep linking. Descubre cómo obtener el deep link en tu aplicación.

Un esquema de URL personalizado no es la única forma de abrir tu aplicación en dispositivos móviles. Por ejemplo, si envías por correo un enlace para abrir en móvil, un esquema personalizado no sería ideal porque el usuario podría abrir el correo en escritorio donde el enlace no funcionaría. En su lugar, usa enlaces estándar https como https://www.myapp.io/records/1234546. En móviles, estos enlaces pueden configurarse para abrir tu aplicación. En Android esta función se llama Deep Links, mientras que en iOS se conoce como Universal Links.

Esquemas de URL integrados

Como se mencionó, existen esquemas URL para funcionalidades básicas disponibles en todas las plataformas. La siguiente lista no es exhaustiva, pero cubre los esquemas más utilizados.

Scheme	Description	iOS	Android
mailto	Open mail app, eg: mailto: hello@world.dev	✅	✅
tel	Open phone app, eg: tel:+123456789	✅	✅
sms	Open SMS app, eg: sms:+123456789	✅	✅
https / http	Open web browser app, eg: https://expo.dev	✅	✅

Habilitar Deep Links

Projects with Native Code Only

The following section only applies to projects with native code exposed. If you are using the managed Expo workflow, see the guide on Linking in the Expo documentation for the appropriate alternative.

Si deseas habilitar deep links en tu aplicación, consulta la siguiente guía:

Android

For instructions on how to add support for deep linking on Android, refer to Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links.

If you wish to receive the intent in an existing instance of MainActivity, you may set the launchMode of MainActivity to singleTask in AndroidManifest.xml. See <activity> documentation for more information.

xml

<activity
  android:name=".MainActivity"
  android:launchMode="singleTask">

iOS

NOTE: On iOS, you'll need to add the LinkingIOS folder into your header search paths as described in step 3 here. If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your *AppDelegate.m:

ObjectiveC

AppDelegate.mm

// iOS 9.x or newer
#import <React/RCTLinkingManager.h>

- (BOOL)application:(UIApplication *)application
   openURL:(NSURL *)url
   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

If your app is using Universal Links, you'll need to add the following code as well:

AppDelegate.mm

- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
 restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
{
 return [RCTLinkingManager application:application
                  continueUserActivity:userActivity
                    restorationHandler:restorationHandler];
}

Swift

AppDelegate.swift

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
  return RCTLinkingManager.application(app, open: url, options: options)
}

If your app is using Universal Links, you'll need to add the following code as well:

AppDelegate.swift

func application(
  _ application: UIApplication,
  continue userActivity: NSUserActivity,
  restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
    return RCTLinkingManager.application(
      application,
      continue: userActivity,
      restorationHandler: restorationHandler
    )
  }

Manejo de Deep Links

Existen dos formas de manejar las URL que abren tu aplicación.

1. Si la aplicación ya está abierta, se lleva al primer plano y se dispara un evento 'url' de Linking

Puedes manejar estos eventos con Linking.addEventListener('url', callback), que llama a callback({url}) con la URL vinculada.

2. Si la aplicación no está abierta, se inicia y la URL se pasa como initialURL

Puedes manejar estos eventos con Linking.getInitialURL(), que devuelve una Promise que se resuelve con la URL si existe.

---

Ejemplo

Abrir enlaces y Deep Links (Universal Links)

TypeScript

JavaScript

Abrir configuraciones personalizadas

TypeScript

JavaScript

Obtener el Deep Link

TypeScript

JavaScript

Enviar intenciones (Android)

TypeScript

JavaScript

Referencia

Métodos

addEventListener()

tsx

static addEventListener(
  type: 'url',
  handler: (event: {url: string}) => void,
): EmitterSubscription;

Agrega un manejador para cambios en Linking escuchando el tipo de evento url y proporcionando el manejador.

---

canOpenURL()

tsx

static canOpenURL(url: string): Promise<boolean>;

Determina si una aplicación instalada puede manejar una URL específica.

El método devuelve un objeto Promise. Cuando se determina si la URL puede manejarse, la promesa se resuelve y el primer parámetro indica si puede abrirse.

La Promise se rechazará en Android si no se pudo verificar la apertura de la URL o cuando se orienta a Android 11 (SDK 30) sin especificar las consultas de intención relevantes en AndroidManifest.xml. En iOS, la promesa se rechazará si no agregaste el esquema específico en la clave LSApplicationQueriesSchemes dentro de Info.plist (ver más abajo).

Parámetros:

Name	Type	Description
url Required	string	The URL to open.

¡Para URLs web, el protocolo ("http://", "https://") debe establecerse correctamente!

Este método tiene limitaciones en iOS 9+. Según la documentación oficial de Apple:

• Si tu app está vinculada a una versión anterior de iOS pero se ejecuta en iOS 9.0 o superior, puedes llamar a este método hasta 50 veces. Al alcanzar ese límite, las llamadas posteriores siempre resolverán a false. Si el usuario reinstala o actualiza la app, iOS reinicia el límite.

A partir de iOS 9, tu app también debe incluir la clave LSApplicationQueriesSchemes en Info.plist o canOpenURL() siempre resolverá a false.

Al desarrollar para Android 11 (SDK 30) debes especificar los intents para los esquemas que deseas manejar en AndroidManifest.xml. Puedes encontrar una lista de intents comunes aquí.

Por ejemplo, para manejar esquemas https, agrega esto a tu manifiesto:

<manifest ...>
    <queries>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="https"/>
        </intent>
    </queries>
</manifest>

---

getInitialURL()

tsx

static getInitialURL(): Promise<string | null>;

Si el inicio de la app fue desencadenado por un enlace, devolverá la URL del enlace; de lo contrario, devolverá null.

Para implementar deep linking en Android, consulta https://developer.android.com/training/app-indexing/deep-linking.html#handling-intents

getInitialURL puede devolver null cuando la Depuración Remota de JS está activa. Desactívala para asegurarte de recibirla.

---

openSettings()

tsx

static openSettings(): Promise<void>;

Abre la app de Configuración y muestra los ajustes personalizados de tu app, si existen.

---

openURL()

tsx

static openURL(url: string): Promise<any>;

Intenta abrir la url especificada con cualquiera de las apps instaladas.

Puedes usar otras URLs, como ubicaciones (ej. "geo:37.484847,-122.148386" en Android o "https://maps.apple.com/?ll=37.484847,-122.148386" en iOS), contactos, o cualquier otra URL que pueda abrirse con apps instaladas.

El método devuelve un objeto Promise. Si el usuario confirma el diálogo de apertura o la URL se abre automáticamente, la promesa se resuelve. Si el usuario cancela o no hay apps registradas para esa URL, la promesa se rechaza.

Parámetros:

Name	Type	Description
url Required	string	The URL to open.

Este método fallará si el sistema no sabe abrir la URL especificada. Para URLs no http(s), verifica primero con canOpenURL().

¡Para URLs web, el protocolo ("http://", "https://") debe establecerse correctamente!

Este método puede comportarse distinto en simuladores: ej. los enlaces "tel:" no funcionan en el simulador de iOS al no tener acceso a la app de teléfono.

---

sendIntent()

Android

tsx

static sendIntent(
  action: string,
  extras?: Array<{key: string; value: string | number | boolean}>,
): Promise<void>;

Lanza un intent de Android con extras.

Parámetros:

Name	Type
action Required	string
extras	Array<{key: string, value: string ｜ number ｜ boolean}>