Desarrollo Más Fácil React Native con Expo

Spanish (Español) translation by James (you can also view the original English article)

Expo es una colección de herramientas que facilitan aplicaciones nativas reaccionan código. En este tutorial, voy a mostrarle cómo usted puede crear rápidamente aplicaciones nativas reaccionan con Expo.

Con la Expo, los desarrolladores pueden crear aplicaciones nativas reaccionan sin todas las frustraciones que vienen con la instalación y configuración de las dependencias de software como Android Studio, Xcode o todas las herramientas necesarias para desarrollar y ejecutar una aplicación nativa de reaccionar.

En este tutorial voy a mostrar cómo crear un juego de memoria simple con Expo. En el camino también aprenderás lo siguiente:

Cómo utilizar las herramientas proporcionadas por la Expo. Esto incluye el CLI, SDK y la aplicación de cliente de la Expo.
Cómo crear una aplicación nativa reaccionan con Expo.

¿Qué es Expo?

Expo es un framework para desarrollar rápidamente aplicaciones React Native. Es como Laravel o sinfonía de los desarrolladores PHP o Ruby on Rails para los desarrolladores de Ruby. Expo proporciona una capa encima de las API React Native para hacerlos más fáciles de utilizar y administrar. También proporciona herramientas que facilitan el arranque y probar aplicaciones React Native. Por último, proporciona servicios que normalmente sólo están disponibles cuando se instala un componente nativo reaccione de terceros y componentes de interfaz de usuario. Todos los se hacen disponibles a través del SDK de la Expo.

Limitaciones de Expo

Antes de seguir adelante, es importante ser consciente de algunas de las limitaciones de Expo:

Expo aplicaciones no admiten la ejecución de código de fondo. Esto significa que usted no puede, por ejemplo, ejecute código que escucha los cambios de situación cuando se cierra la aplicación.
Aplicaciones de Expos se limitan a las API nativas que es compatible con el SDK de Expo. Esto significa que si tu aplicación tiene un caso de uso muy específico como comunicarse con un periférico, la única opción para implementar dicha funcionalidad es normal reaccionar nativo o escribiendo código nativo usando una librería llamada ExpoKit Bluetooth.
Expo quede su toolset. Esto significa que simplemente no se puede instalar y utilizar la mayoría de las grandes herramientas para el desarrollo React Native como herramientas de línea de comandos, andamios y estructuras de interfaz de usuario. Pero lo bueno es que el SDK de la Expo es compatible con aplicaciones React Native llano, para que no tengas ningún problema al expulsar su aplicación de Expo.
Independiente binarios de aplicaciones Expo sólo pueden construirse en línea. Expo ofrece una herramienta de línea de comandos llamada Exp. Esto permite a los desarrolladores a iniciar el proceso de construcción en los servidores de la Expo. Una vez hecho, se proporcionará un enlace para descargar el archivo .apk o .ipa.

Incluso con estas limitaciones, es importante tener en cuenta que la Expo es un marco totalmente funcional con un montón de apoyo comúnmente usado APIs de iOS o Android. Esto significa que tiene cobertura para la mayoría de las funcionalidades que las aplicaciones normalmente necesitan. Así que no hay a menudo parecen fuera de Expo para implementar la funcionalidad nativa.

Resumen de la Aplicación

La aplicación que vamos a crear es un juego de memoria. Usted puede familiarizarse con este tipo de juego, el usuario tiene que buscar parejas de entregar tarjetas de dos a la vez. Esto es lo que parece la pantalla por defecto:

Y aquí es cómo se ve como una vez todos los pares se han abierto:

Una vez que han solucionado el juego, el usuario puede Pulse el botón reset para restablecer los elementos a su estado inicial. Esto les permite empezar el juego otra vez.

Instalación de Expo

A diferencia de simple reaccionar nativo donde usted tiene que instalar y configurar Android Studio o Xcode y otras dependencias, con Expo hay sólo unos pocos pasos a seguir para empezar a desarrollar aplicaciones:

Descargar e instalar Node.js. Expo depende de la plataforma de Node.js para sus herramientas de línea de comandos y gestión de la dependencia.
Instalar al Cliente de Expo en su Dispositivo Android o iOS. Se utiliza para obtener una vista previa de la aplicación mientras que usted está desarrollando.
Instale la herramienta de línea de comandos. Esto le permite generar un nuevo proyecto de la Expo, iniciar un proceso de construcción y mucho más. Ejecute el siguiente comando para instalarlo:

1	npm install exp --global

Generar una Nueva Aplicación de Expo

Una vez que has instalado todas las dependencias, ahora puede generar una nueva aplicación de Expo:

1	exp init MemoryGame

Una vez hecho esto, creará una nueva carpeta llamada MemoryGame. Navegar dentro de él y empezar a correr el servidor de desarrollo:

1	cd MemoryGame
2	exp start

Alternativamente, también puede utilizar el XDE Expo. Esto le permite crear y ejecutar aplicaciones de la Expo a través de una GUI. Puede descargar al instalador desde el repositorio de GitHub Expo. Actualmente, sólo es compatible con Windows y Mac. Así que si estás en Ubuntu o Linux es mejor seguir con la línea de comandos por ahora.

Una vez que se está ejecutando el servidor de desarrollo, ahora debe poder ver algo como esto:

Es el código QR que señala a la previsualización del proyecto. Abra la aplicación de cliente de la Expo en su teléfono y escanear el código usando el lector de QR. En este punto, ahora debe poder ver la pantalla por defecto. Cada vez que usted golpea Control-S en cualquiera de los archivos del proyecto, la vista previa debe cargar automáticamente para reflejar los cambios.

Usted puede encontrar el código fuente completo del proyecto en su repositorio GitHub. O si quieres probar la aplicación, puede informarse sobre la demostración. Sólo seleccione código QR y escanear en su teléfono usando la aplicación de cliente de la Expo.

Codificación de la Aplicación

Ahora estamos listos para la aplicación del código. Vamos a empezar con algunos componentes de interfaz de usuario antes de volver y de implementación del componente principal.

Componente de Encabezado

El encabezado se utiliza para mostrar el título de la aplicación creando una carpeta de componentes. En su interior, crea un archivo Header.js y añadir lo siguiente:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class Header extends React.Component {
  
  render() {
    return (
      <View style={styles.header}>
        <Text style={styles.header_text}>MemoryGame</Text>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  header: {
    flex: 1,
    flexDirection: 'column',
    alignSelf: 'stretch',
    paddingTop: 20,
    paddingBottom: 5,
    backgroundColor: '#f3f3f3'
  },
  header_text: {
    fontWeight: 'bold',
    fontSize: 17,
    textAlign: 'center'
  }
});

Esto es sólo un componente React Native básico, con un estilo para que coincida con la interfaz de usuario de nuestra aplicación.

Componente Puntaje

El siguiente es el componente para la visualización de la puntuación (components/Score.js):

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class Score extends React.Component {
  
  render() {
    return (
      <View style={styles.score_container}>
        <Text style={styles.score}>{this.props.score}</Text>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  score_container: {
    flex: 1,
    alignItems: 'center',
    padding: 10
  },
  score: {
    fontSize: 40,
    fontWeight: 'bold'
  }
});

Una vez más, sólo un simple Mostrar componente con una vista de texto y algunos estilo básico.

Componente de Tarjeta

El componente de la tarjeta (components/Card.js) mostrará las cartas. Estas tarjetas utilizan iconos del conjunto de iconos de vector de Expo. Esta es una de las características que vienen directamente de la caja cuando usas Expo: incluye los iconos de conjuntos de icono como FontAwesome, Entypo y Ionicons.

En el código a continuación, puedes ver que estamos utilizando sólo FontAwesome. Tiene el icono que queremos para la visualización de estado de la tarjeta por defecto: un signo de interrogación. Como veremos más adelante en el componente principal de la aplicación, también usaremos los iconos de Entypo y Ionicons. La referencia a las fuentes del icono pasará a este componente, por lo que no es necesario especificar aquí:

1	import React from 'react';
2	import { StyleSheet, Text, View, TouchableHighlight } from 'react-native';
3	import { FontAwesome } from '@expo/vector-icons'; // use FontAwesome from the expo vector icons

En el método render(), sólo utilizamos la fuente y el icono pasada como apoyos si se abre la tarjeta. Por defecto, sólo mostrará el icono de signo de interrogación de FontAwesome. Pero si la tarjeta está abierta, utilizará el icono fuente, icono y color que se pasa como apoyos.

Cada una de las tarjetas puede ser aprovechada. Cuando aprovechado, se ejecutará la función clickCard(), que es pasado a través de los apoyos. Más adelante se verá la función de lo que hace, pero de momento, sólo sé que actualiza el estado para mostrar el icono de la tarjeta:

export default class Card extends React.Component {

  render() {
    
    let CardSource = FontAwesome; // set FontAwesome as the default icon source
    let icon_name = 'question-circle';
    let icon_color = '#393939';
    
    if(this.props.is_open){
      CardSource = this.props.src;
      icon_name = this.props.name;
      icon_color = this.props.color;
    }
    
    return (
      <View style={styles.card}>
        <TouchableHighlight onPress={this.props.clickCard} activeOpacity={0.75} underlayColor={"#f1f1f1"}>
          <CardSource 
            name={icon_name} 
            size={50} 
            color={icon_color} 
          />
        </TouchableHighlight>   
      </View>
    );
  }
}

No te olvides de añadir los estilos:

const styles = StyleSheet.create({
  card: {
    flex: 1,
    alignItems: 'center'
  },
  card_text: {
    fontSize: 50,
    fontWeight: 'bold'
  }
});

Ayudantes

También utilizaremos una función auxiliar denominada shuffle(). Esto nos permite ordenar la matriz de las tarjetas en orden aleatorio para que su orden será diferente cada vez que se reinicia el juego:

Array.prototype.shuffle = function() {
  var i = this.length, j, temp;
  if(i == 0) return this;
  while(--i){
   j = Math.floor(Math.random() * (i + 1));
   temp = this[i];
   this[i] = this[j];
   this[j] = temp;
  }
  return this;
}

Componente Principal

El componente principal (App.js) contiene la lógica de la aplicación principal y trae todo junto. Empezar por incluyendo los paquetes reaccionan y Expo que vamos a usar. Esta vez estamos utilizando todas las fuentes de icono de los iconos de vector de Expo:

1	import React from 'react';
2	import { StyleSheet, View, Button } from 'react-native';
3	import { Ionicons, FontAwesome, Entypo } from '@expo/vector-icons';

A continuación, se incluyen los componentes y el ayudante que creamos anteriormente:

import Header from './components/Header';
import Score from './components/Score';
import Card from './components/Card';

import helpers from './helpers';

Dentro del constructor, primero creamos la matriz que representa las tarjetas únicas. src es la fuente del icono, name es el nombre del icono (usted puede encontrar los nombres en GitHub si desea utilizar otros iconos) y el color es, naturalmente, el color del icono:

export default class App extends React.Component {

  constructor(props) {
    super(props);
    // bind the functions to the class
    this.renderCards = this.renderCards.bind(this);
    this.resetCards = this.resetCards.bind(this);
    
    // icon sources
    let sources = {
      'fontawesome': FontAwesome,
      'entypo': Entypo,
      'ionicons': Ionicons
    };

    // the unique icons to be used
    let cards = [
      {
        src: 'fontawesome',
        name: 'heart',
        color: 'red'
      },
      {
        src: 'entypo',
        name: 'feather',
        color: '#7d4b12'
      },
      {
        src: 'entypo',
        name: 'flashlight',
        color: '#f7911f'
      },
      {
        src: 'entypo',
        name: 'flower',
        color: '#37b24d'
      },
      {
        src: 'entypo',
        name: 'moon',
        color: '#ffd43b'
      },
      {
        src: 'entypo',
        name: 'youtube',
        color: '#FF0000'
      },
      {
        src: 'entypo',
        name: 'shop',
        color: '#5f5f5f'
      },
      {
        src: 'fontawesome',
        name: 'github',
        color: '#24292e'
      },
      {
        src: 'fontawesome',
        name: 'skype',
        color: '#1686D9'
      },
      {
        src: 'fontawesome',
        name: 'send',
        color: '#1c7cd6'
      },
      {
        src: 'ionicons',
        name: 'ios-magnet',
        color: '#d61c1c'
      },
      {
        src: 'ionicons',
        name: 'logo-facebook',
        color: '#3C5B9B'
      }
    ];

    // next: add code creating the clone and setting the cards in the state
  }

}

Tenga en cuenta que en vez de directamente la src como FontAwesome, Entypo o Ionicons para cada uno de los objetos, estamos utilizando los nombres de propiedad en el objeto los recursos. Esto es porque necesitamos crear una copia de la matriz de las tarjetas en orden para que cada tarjeta tiene un par. Crear una copia mediante métodos de matriz como slice() creará una copia de la matriz, pero el problema es que una vez que los objetos individuales se modifican en la copia o la original, ambas matrices son también modificadas.

Esto nos lleva a la solución de abajo que es para crear un objeto completamente nuevo por convertir la matriz de cards en cadena y luego de análisis para convertir a una matriz. Esta es la razón por qué estamos utilizando cadenas puesto que las funciones no se puede convertir en cadenas. Luego, combinamos los dos para llegar a la matriz, que contiene todas las cartas que necesitamos:

1	let clone = JSON.parse(JSON.stringify(cards)); // create a completely new array from the array of cards
2
3	this.cards = cards.concat(clone); // combine the original and the clone

A continuación, pasar por esa matriz generar un ID único para cada uno, establecer el origen del icono y ponerlo a un estado cerrado por defecto:

// add the ID, source and set default state for each card
this.cards.map((obj) => {
  let id = Math.random().toString(36).substring(7);
  obj.id = id;
  obj.src = sources[obj.src];
  obj.is_open = false;
});

Ordenar las tarjetas al azar y establecer el estado predeterminado:

this.cards = this.cards.shuffle(); // sort the cards randomly

// set the default state
this.state = {
  current_selection: [], // this array will contain an array of card objects which are currently selected by the user. This will only contain two objects at a time.
  selected_pairs: [], // the names of the icons. This array is used for excluding them from further selection
  score: 0, // default user score
  cards: this.cards // the shuffled cards
}

El método render() representa el encabezado, cartas, puntuación y el botón para reiniciar el juego. Está utilizando la función renderRows() para representar las filas de la tarjeta individual. La pantalla tendrá seis filas que contiene cuatro cartas:

render() {
  return (
    <View style={styles.container}>
      <Header />
      <View style={styles.body}>
        { 
          this.renderRows.call(this) 
        }
      </View>
      <Score score={this.state.score} />
      <Button
        onPress={this.resetCards}
        title="Reset"
        color="#008CFA" 
      />
    </View>
  );
}

Aquí está el código para la función renderRows(). Esto utiliza la función getRowContents(), que es responsable de crear una matriz de matrices con cuatro artículos. Esto nos permite procesar cada fila y luego usar otra función para las tarjetas de representación para cada iteración de la función map():

renderRows() {
 
  let contents = this.getRowContents(this.state.cards);
  return contents.map((cards, index) => {
    return (
      <View key={index} style={styles.row}>
        { this.renderCards(cards) }
      </View>
    );
  });
 
}

Esta es la función de getRowContents():

getRowContents(cards) {
  let contents_r = [];
  let contents = [];
  let count = 0;
  cards.forEach((item) => {
    count += 1;
    contents.push(item);
    if(count == 4){
      contents_r.push(contents)
      count = 0;
      contents = [];
    }
  });

  return contents_r;
}

El siguiente es la función de renderCards(). Esto acepta la matriz de objetos de la tarjeta y representa mediante el componente cards. Lo único que tenemos que hacer es pasar las propiedades individuales de cada objeto de la tarjeta como apoyos. Esto entonces se utiliza para representar el icono correcto, como has visto en el código para el componente cards. La función clickCard() se pasa también como un apoyo. La tarjeta de identificación se pasa a esa función para que la tarjeta única se puede identificar y actualizada:

renderCards(cards) {
  return cards.map((card, index) => {
    return (
      <Card 
        key={index} 
        src={card.src} 
        name={card.name} 
        color={card.color} 
        is_open={card.is_open}
        clickCard={this.clickCard.bind(this, card.id)} 
      />
    );
  });
}

Dentro de la función clickCard(), obtener los detalles de la tarjeta seleccionada y comprobar si deben ser procesado más:

clickCard(id) {
  let selected_pairs = this.state.selected_pairs;
  let current_selection = this.state.current_selection;
  let score = this.state.score;
  
  // get the index of the currently selected card
  let index = this.state.cards.findIndex((card) => {
    return card.id == id;
  });

  let cards = this.state.cards;
  
  // the card shouldn't already be opened and is not on the array of cards whose pairs are already selected
  if(cards[index].is_open == false && selected_pairs.indexOf(cards[index].name) === -1){

    // next: add code for processing the selected card

  }

}

Ahora vamos a rellenar el código para el manejo de una tarjeta seleccionada.

En primer lugar, abrimos la tarjeta y añadir a la gama de tarjetas actualmente seleccionadas:

cards[index].is_open = true;
    
current_selection.push({ 
  index: index,
  name: cards[index].name
});

// next: add code for determining whether the user has selected the correct pair or not

Una vez que hay dos elementos en la matriz de cartas seleccionados, comprobamos si los nombres de icono son los mismos. Si son entonces significa el usuario ha seleccionado el par correcto. Si no son iguales entonces es un par incorrecto. En ese caso, cerramos la primera tarjeta que seleccionó y luego añadir un poco de retraso antes de cerrar la segunda tarjeta. (De esta manera el usuario puede ver el icono de la tarjeta antes de que revierta al estado cerrado.)

if(current_selection.length == 2){
  if(current_selection[0].name == current_selection[1].name){
    score += 1; // increment the score
    selected_pairs.push(cards[index].name); 
  }else{
    cards[current_selection[0].index].is_open = false; // close the first
    
    // delay closing the currently selected card by half a second.
    setTimeout(() => {
      cards[index].is_open = false;
      this.setState({
        cards: cards
      });
    }, 500);
  }

  current_selection = [];
}

// next: add code for updating the state

Lo último que debemos hacer en el controlador de evento click es actualizar el estado para reflejar los cambios en la interfaz de usuario:

this.setState({
  score: score,
  cards: cards,
  current_selection: current_selection
});

Una función relacionada es el controlador de evento de reset. Cuando se golpea ligeramente el botón reset, nos simplemente restaurar el estado predeterminado cerrando todas las cartas y arrastrando los pies.

resetCards() {
  // close all cards
  let cards = this.cards.map((obj) => {
    obj.is_open = false;
    return obj;
  });

  cards = cards.shuffle(); // re-shuffle the cards
  
  // update to default state
  this.setState({
    current_selection: [],
    selected_pairs: [],
    cards: cards,
    score: 0
  });
}

Por último, vamos a añadir unos estilos básicos para hacer que nuestra aplicación se ven bien.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignSelf: 'stretch',
    backgroundColor: '#fff'
  },
  row: {
    flex: 1,
    flexDirection: 'row'
  },
  body: {
    flex: 18,
    justifyContent: 'space-between',
    padding: 10,
    marginTop: 20
  }
});

Prueba la Aplicación

Desde el servidor de desarrollo de la Expo ha estado funcionando todo este tiempo, todos los cambios deben enviarse a su dispositivo móvil con recarga directo. Probar la aplicación y asegúrese de que funciona como se supone a.

Conclusión

¡Eso es todo! En este tutorial has aprendido cómo utilizar la Expo XDE para conectar rápidamente una aplicación React Native. Expo es una buena manera para empezar a desarrollar aplicaciones React Native porque elimina la necesidad de instalar un montón de software que es a menudo una causa de frustración, especialmente para los principiantes. También proporciona herramientas que hace muy fácil de obtener una vista previa de la aplicación mientras se está desarrollando. Asegúrese de comprobar los recursos mencionados en el sitio web de Expo si usted quiere aprender más.

Y mientras tanto, echa un vistazo a algunos de nuestros otros posts sobre desarrollo de aplicaciones React Native!