Soporte de Diseño de Derecha a Izquierda para Aplicaciones React Native

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 →

Tras publicar una aplicación en las tiendas de apps, la internacionalización es el siguiente paso para ampliar tu alcance de audiencia. Más de 20 países y numerosas personas en todo el mundo utilizan idiomas de derecha a izquierda (RTL). Por lo tanto, es fundamental que tu aplicación ofrezca soporte RTL para estos usuarios.

Nos complace anunciar que React Native ha sido mejorado para soportar diseños RTL. Esta funcionalidad ya está disponible en la rama principal de react-native y estará incluida en la próxima versión candidata: v0.33.0-rc.

Esto implicó modificar css-layout, el motor de diseño central utilizado por RN, la implementación principal de RN, así como componentes JS específicos de código abierto para admitir RTL.

Para probar exhaustivamente el soporte RTL en producción, la última versión de la aplicación Facebook Ads Manager (la primera app multiplataforma 100% RN) ya está disponible en árabe y hebreo con diseños RTL tanto para iOS como para Android. Así es como se ve en estos idiomas RTL:

Cambios Generales en RN para Soporte RTL

css-layout ya maneja el concepto de start (inicio) y end (fin) para el diseño. En el flujo izquierda-derecha (LTR), start equivale a left (izquierda) y end a right (derecha). Pero en RTL, start significa right y end significa left. Esto permite que RN utilice los cálculos de start y end para determinar el diseño correcto, incluyendo position, padding y margin.

Además, css-layout hace que la dirección de cada componente herede de su elemento padre. Esto significa que simplemente debemos configurar la dirección del componente raíz como RTL, y toda la aplicación se invertirá automáticamente.

El siguiente diagrama describe los cambios a alto nivel:

Estos incluyen:

• Soporte RTL en css-layout para posicionamiento absoluto

• Mapeo de left y right a start y end en la implementación central de RN para nodos sombra

• Exposición de un módulo de utilidades puente para controlar el diseño RTL

Con esta actualización, cuando activas el diseño RTL en tu aplicación:

• El diseño de cada componente se invertirá horizontalmente

• Gestos y animaciones adoptarán automáticamente el diseño RTL si usas componentes de código abierto preparados para RTL

• Puede requerirse un esfuerzo adicional mínimo para que tu aplicación sea completamente compatible con RTL

Preparando una Aplicación para RTL

1. Para admitir RTL, primero debes agregar los paquetes de idiomas RTL a tu aplicación.

   • Consulta las guías generales para iOS y Android.

2. Permite el diseño RTL en tu aplicación llamando a la función allowRTL() al inicio del código nativo. Hemos proporcionado esta utilidad para aplicar el diseño RTL solo cuando tu aplicación esté lista. Aquí tienes un ejemplo:

   iOS:

   // in AppDelegate.m
     [[RCTI18nUtil sharedInstance] allowRTL:YES];

   Android:

   // in MainActivity.java
     I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
     sharedI18nUtilInstance.allowRTL(context, true);

3. Para Android, debes agregar android:supportsRtl="true" al elemento <application> en el archivo AndroidManifest.xml.

Ahora, cuando recompiles tu aplicación y cambies el idioma del dispositivo a uno RTL (como árabe o hebreo), el diseño de tu aplicación debería cambiar automáticamente a RTL.

Creación de componentes preparados para RTL

En general, la mayoría de componentes ya están preparados para RTL, por ejemplo:

• Diseño izquierda-derecha (LTR)

• Diseño derecha-izquierda (RTL)

Sin embargo, hay varios casos a considerar donde necesitarás el I18nManager. En I18nManager, existe la constante isRTL que indica si el diseño es RTL, permitiéndote realizar ajustes según la dirección del layout.

Iconos con significado direccional

Si tu componente usa iconos o imágenes, se mostrarán igual en diseños LTR y RTL porque RN no voltea las imágenes originales. Debes invertirlos manualmente según la dirección del layout.

• Diseño izquierda-derecha (LTR)

• Diseño derecha-izquierda (RTL)

Dos formas de invertir iconos según la dirección:

• Aplicar estilo transform al componente imagen:

  <Image
    source={...}
    style={{transform: [{scaleX: I18nManager.isRTL ? -1 : 1}]}}
  />

• O cambiar la fuente de imagen según la dirección:

  let imageSource = require('./back.png');
  if (I18nManager.isRTL) {
    imageSource = require('./forward.png');
  }
  return <Image source={imageSource} />;

Gestos y animaciones

En desarrollo para Android/iOS, al cambiar a RTL los gestos y animaciones se invierten respecto a LTR. Actualmente en RN, estos no tienen soporte a nivel de núcleo pero sí en componentes. Algunos como SwipeableRow y NavigationExperimental ya soportan RTL, pero otros componentes con gestos requerirán ajustes manuales.

Un ejemplo claro de soporte para gestos en RTL es SwipeableRow.

Ejemplo de gestos

// SwipeableRow.js
_isSwipingExcessivelyRightFromClosedPosition(gestureState: Object): boolean {
  // ...
  const gestureStateDx = IS_RTL ? -gestureState.dx : gestureState.dx;
  return (
    this._isSwipingRightFromClosed(gestureState) &&
    gestureStateDx > RIGHT_SWIPE_THRESHOLD
  );
},

Ejemplo de animación

// SwipeableRow.js
_animateBounceBack(duration: number): void {
  // ...
  const swipeBounceBackDistance = IS_RTL ?
    -RIGHT_SWIPE_BOUNCE_BACK_DISTANCE :
    RIGHT_SWIPE_BOUNCE_BACK_DISTANCE;
  this._animateTo(
    -swipeBounceBackDistance,
    duration,
    this._animateToClosedPositionDuringBounce,
  );
},

Mantenimiento de tu aplicación preparada para RTL

Incluso después del lanzamiento inicial de una app compatible con RTL, probablemente necesitarás iterar en nuevas funciones. Para mejorar la eficiencia de desarrollo, I18nManager proporciona la función forceRTL() para pruebas RTL más rápidas sin cambiar el idioma del dispositivo de prueba. Podrías incluir un interruptor simple para esto en tu aplicación. Aquí un ejemplo del caso RTL en RNTester:

<RNTesterBlock title={'Quickly Test RTL Layout'}>
  <View style={styles.flexDirectionRow}>
    <Text style={styles.switchRowTextView}>forceRTL</Text>
    <View style={styles.switchRowSwitchView}>
      <Switch
        onValueChange={this._onDirectionChange}
        style={styles.rightAlignStyle}
        value={this.state.isRTL}
      />
    </View>
  </View>
</RNTesterBlock>;

_onDirectionChange = () => {
  I18nManager.forceRTL(!this.state.isRTL);
  this.setState({isRTL: !this.state.isRTL});
  Alert.alert(
    'Reload this page',
    'Please reload this page to change the UI direction! ' +
      'All examples in this app will be affected. ' +
      'Check them out to see what they look like in RTL layout.',
  );
};

Al trabajar en una nueva función, puedes alternar fácilmente este botón y recargar la app para ver el diseño RTL. La ventaja es que no necesitarás cambiar la configuración de idioma para probar, aunque algunas alineaciones de texto no cambiarán, como se explica en la siguiente sección. Por lo tanto, siempre es recomendable probar tu app en el idioma RTL antes del lanzamiento.

Limitaciones y Planes Futuros

El soporte RTL debería cubrir la mayoría de la experiencia de usuario en tu app; sin embargo, actualmente existen algunas limitaciones:

• Los comportamientos de alineación de texto difieren en Android e iOS
  • En iOS, la alineación predeterminada depende del paquete de idioma activo y es consistente en un lado. En Android, la alineación predeterminada depende del idioma del contenido: inglés se alinea a la izquierda y árabe a la derecha.
  • En teoría, esto debería ser consistente entre plataformas, pero algunos usuarios pueden preferir un comportamiento sobre otro. Se necesita más investigación de experiencia de usuario para determinar las mejores prácticas.

• No existe una "verdadera" izquierda/derecha

  Como se mencionó anteriormente, mapeamos los estilos left/right de JS a start/end. Todo left en código para diseño RTL se convierte en "derecha" en pantalla, y right en código se convierte en "izquierda". Esto es conveniente porque no requiere muchos cambios en tu código, pero significa que no hay forma de especificar "verdadera izquierda" o "verdadera derecha" en el código. En el futuro, podría ser necesario permitir que un componente controle su dirección independientemente del idioma.

• Hacer el soporte RTL para gestos y animaciones más accesible

  Actualmente, aún se requiere esfuerzo de programación para hacer compatibles gestos y animaciones con RTL. Idealmente, en el futuro se podría simplificar este soporte para desarrolladores.

¡Pruébalo!

Revisa el RTLExample en RNTester para entender mejor el soporte RTL, y ¡cuéntanos cómo te funciona!

Finalmente, ¡gracias por leer! Esperamos que el soporte RTL en React Native te ayude a expandir tus aplicaciones para audiencias internacionales.