Usar códigos específicos para iOS y Android

Descubre cómo hacer que las aplicaciones desarrolladas en React Native tengan partes distintas cuando se ejecutan Android y en iOS, y las diferente formas de hacerlo.

Vamos a comenzar a ver qué opciones o qué métodos distintos tenemos para conseguir tal efecto.

Cambiar la extensión del fichero

Una de las opciones es apoyarnos en una de las particularidades de React Native, que es cambiar la extensión del fichero, ya sea un fichero JavaScript, un fichero de imagen o cualquier fichero que estemos importando de uno de nuestros componentes de React Native.

Para un archivo JavaScript, por ejemplo, si en lugar de usar la extensión .js usamos .android.js o .ios.js, cuando nuestra aplicación se compile para un terminal u otro, el sistema ya sabe que tiene que coger un fichero u otro en función de para qué sistema operativo lo está preparando.

De esta manera, como vemos en este ejemplo, tenemos una imagen que tiene un icono distinto en cada sistema, y tenemos también un botón, que es a modo de ejemplo, cómo funciona el botón nativo en cada uno de los dos sistemas, y que también tiene diferente interfaz en cada uno de ellos.

Renombrándolos de esa forma en ambos casos y utilizando el import sin añadir la extensión, lo que conseguimos es que cuando nuestra aplicación se abra en Android se importen los ficheros de Android, y que cuando se abra en un iPhone importe los ficheros de iOS.

Módulo Platform

Otra forma con la que podemos conseguir lo que queremos es utilizar el componente Platform, que podemos utilizar de distintas maneras.

Una de las formas de utilizarlo es a través Platform.OS.

De esta forma nos va a devolver un string que va a contener el nombre del sistema operativo en el que se está ejecutando. Así podemos definir la altura de nuestro componente y que sea distinta para cada uno de los terminales, simplemente preguntando si es iOS o no y utilizando este operador ternario.

	import {Platorm, StyleSheet} from ‘react-native’;

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

Otra forma de utilizarlo es a través del método Select.

Con el mismo se va a crear una especie de switch case condicional, en el cual podemos definir cada una de las opciones, porque ya sabemos que React Native puede funcionar en otros elementos, no solamente en Android y en iOS, y devolver qué parte de componente queremos.

	import {Platorm, StyleSheet} from ‘react-native’;

	const styles = StyleSheet.create({
		container: {
			flex: 1,
			…Platform.select({
				ios: {
					backgroundColor: ‘red’,
				android: {
					backgroundColor: ‘blue’,
				}
			}),
		},	
	});

En este caso estamos definiendo el código rojo o azul en función del sistema operativo, y utilizamos el operador Spread para aplicar esos estilos al componente anterior.

También podemos utilizarlo para hacer un import de un componente.

Podemos tener un componente que se llame ComponentIOS y ComponentAndroid e importar uno u otro en función de lo que necesitemos.

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

	<Component />;

Este ejemplo es simplemente para ver qué se puede hacer, ya que en el caso de importar un componente, podríamos directamente haber cambiado el nombre, lo que tendría menos código y sería más fácil de mantener o de utilizar que con el ejemplo anterior.

Platform también tiene otra opción, que es Platform.Version.

Esta opción nos permite ir un paso más allá, no solamente cambiar el código en función del sistema operativo, sino en función de la versión del sistema operativo que está ejecutándose.

Ya que sabemos que en algunas versiones anteriores hay ciertas funcionalidades no disponibles, podemos utilizar esta opción para no ofrecer ciertas características si sabemos que es un terminal antiguo o cualquier otro mensaje que nosotros queramos utilizar.

Código nativo

Otra opción que tenemos es hacer un módulo nativo.

En el caso de que tengamos un componente con código nativo, tanto en Android como en iOS, vamos a necesitar conectarlo a través de los elementos bridge, que nos ofrece el sistema operativo, con nuestro código JS.

Cuando estamos ejecutando desde JavaScript y queremos que sea nativo, va a utilizar esas definiciones para llamar a la parte nativa de Android o la parte nativa de iOS.

De esta manera, al tenerlos separados, en lógica o en la visualización que queremos en la parte nativa, cuando lo estemos utilizando desde la parte JavaScript va a ser una, y en la parte nativa va a ser distinto cada uno de los dos sistemas.