Código Específico de Plataforma

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 →

Al construir aplicaciones multiplataforma, querrás reutilizar tanto código como sea posible. Pueden surgir escenarios donde tenga sentido que el código sea diferente, por ejemplo, cuando necesites implementar componentes visuales separados para Android e iOS.

React Native ofrece dos formas de organizar tu código y separarlo por plataforma:

• Usando el módulo Platform.

• Usando extensiones de archivo específicas por plataforma.

Algunos componentes pueden tener propiedades que funcionan solo en una plataforma. Todas estas props están anotadas con @platform y tienen un pequeño distintivo junto a ellas en el sitio web.

Módulo Platform

React Native proporciona un módulo que detecta la plataforma en la que se ejecuta la aplicación. Puedes usar esta lógica de detección para implementar código específico por plataforma. Usa esta opción cuando solo partes pequeñas de un componente sean específicas de plataforma.

tsx

import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  height: Platform.OS === 'ios' ? 200 : 100,
});

Platform.OS será ios cuando se ejecute en iOS y android cuando se ejecute en Android.

También existe el método Platform.select que, dado un objeto cuyas claves pueden ser 'ios' | 'android' | 'native' | 'default', devuelve el valor más adecuado para la plataforma actual. Es decir, si se ejecuta en un teléfono, las claves ios y android tendrán prioridad. Si no están especificadas, se usará la clave native y luego la clave default.

tsx

import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'green',
      },
      default: {
        // other platforms, web for example
        backgroundColor: 'blue',
      },
    }),
  },
});

Esto resultará en un contenedor con flex: 1 en todas las plataformas, fondo rojo en iOS, fondo verde en Android y fondo azul en otras plataformas.

Como acepta un valor de tipo any, también puedes usarlo para devolver componentes específicos por plataforma, como se muestra a continuación:

tsx

const Component = Platform.select({
  ios: () => require('ComponentIOS'),
  android: () => require('ComponentAndroid'),
})();

<Component />;

tsx

const Component = Platform.select({
  native: () => require('ComponentForNative'),
  default: () => require('ComponentForWeb'),
})();

<Component />;

Detecting the Android version

Android

En Android, el módulo Platform también puede usarse para detectar la versión de la plataforma Android en la que se ejecuta la aplicación:

tsx

import {Platform} from 'react-native';

if (Platform.Version === 25) {
  console.log('Running on Nougat!');
}

Nota: Version corresponde a la versión de la API de Android, no a la versión del sistema operativo Android. Para encontrar la correspondencia, consulta el Historial de versiones de Android.

Detecting the iOS version

iOS

En iOS, Version es el resultado de -[UIDevice systemVersion], un string con la versión actual del sistema operativo. Un ejemplo de versión del sistema es "10.3". Por ejemplo, para detectar el número de versión principal en iOS:

tsx

import {Platform} from 'react-native';

const majorVersionIOS = parseInt(Platform.Version, 10);
if (majorVersionIOS <= 9) {
  console.log('Work around a change in behavior');
}

Extensiones específicas de plataforma

Cuando tu código específico por plataforma es más complejo, deberías considerar dividirlo en archivos separados. React Native detectará cuando un archivo tenga extensión .ios. o .android. y cargará el archivo correspondiente cuando otros componentes lo requieran.

Por ejemplo, imagina que tienes estos archivos en tu proyecto:

shell

BigButton.ios.js
BigButton.android.js

Luego puedes importar el componente así:

tsx

import BigButton from './BigButton';

React Native seleccionará automáticamente el archivo correcto según la plataforma en ejecución.

Extensiones nativas específicas (compartir código con NodeJS y Web)

También puedes usar la extensión .native.js cuando un módulo debe compartirse entre NodeJS/Web y React Native sin diferencias Android/iOS. Esto es especialmente útil en proyectos con código común compartido entre React Native y ReactJS.

Por ejemplo, imagina que tienes estos archivos en tu proyecto:

shell

Container.js # picked up by webpack, Rollup or any other Web bundler
Container.native.js # picked up by the React Native bundler for both Android and iOS (Metro)

Puedes importarlo sin la extensión .native, así:

tsx

import Container from './Container';

Consejo profesional: Configura tu bundler web para ignorar extensiones .native.js y evitar código no utilizado en tu paquete de producción, reduciendo así el tamaño final del bundle.