Apps Moviles

Primeros Pasos Apps Móviles con React Native

Por en sábado, junio 27, 2020
apps en react native

Las aplicaciónes hibridas llegaron para quedarse y es un hecho que en muchas ocasiones se requiere de agilizar los tiempos de desarrollo, ya que las empresas requieren de apps multiplataforma.

Existen varias formas de crear apps hoy vamos a hacer uso de React Native, una de las herramientas más populares para esta tarea.

React native hace uso de componentes en JSX, este te permite escribir elementos dentro de javascript y como JSX también es javascript puedes hacer uso de variables.

Empecemos…

Para este ejemplo crearemos una app en android. Primero que nada tenemos que tener nuestro entorno de desarrollo con lo siguiente:

  • Node
  • Watchman
  • Java Development Kit (JDK)
  • Android SDK
  • Tener configurada variable de entorno de ANDROID_HOME

Podemos encontrar la guia de configuración aquí.

Abriremos nuestra consola y con cd iremos a la carpeta donde queremos crear nuestro proyecto y escribiremos el siguiente comando:

npx react-native init miPrimerApp

La consola tardará unos minutos en crear el proyecto una vez terminado creará nuestra carpeta con el proyecto. Entremos a esta.

cd miPrimerApp

podemos observar que se encuentran varios archivos dentro de esta, vamos a abrir App.js que es donde se encuentra de momento todo el contenido de nuestra app.

Lo creado por defecto puede verse un poco raro para comenzar así que vamos a sutituirlo por lo siguiente:


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

class AppContainer extends React.Component {
  state = {
    counter: 0,
  }

  onIncrement = () => {
    this.setState({
      counter: this.state.counter + 1,
    })
  };
  onDecrement = () => {
    this.setState({
      counter: this.state.counter - 1,
    })
  };


  render() {
    const counter = this.state.counter;
    return (
      <>
        <View style={styles.container}>
          <Button
            title="-"
            onPress={this.onDecrement}
          />
          <Text style={styles.text}>{counter}</Text>
          <Button
            title="+"
            onPress={this.onIncrement}
          />
        </View>
      </>
    );
  }
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    marginRight: 15,
    marginLeft: 15,
    fontSize: 24,
    fontWeight: '400',
  }
});

export default function App() {
  return (
    <AppContainer />
  );
}

Vamos por partes

Primero que nada tenemos los imports:

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

Aquí nada la primera linea es obligatoria, en adelante tenemos el StyleSheet para dar estilo a nuestros componentes, View que seria un contenedor, Text y Button no tengo que explicarlos o si?

Despues creamos la clase principal de nuesta app y tenemos:

state = {
    counter: 0,
  }

  onIncrement = () => {
    this.setState({
      counter: this.state.counter + 1,
    })
  };
  onDecrement = () => {
    this.setState({
      counter: this.state.counter - 1,
    })
  };

Aquí estamos definiendo en nuestro state una variable llamada counter que modificaremos por medio de unos botones en la vista. Esta variable del state mostrará su valor actualizado sin necesidad de indicarlo en la vista

Creamos dos funciones para modificar esta variable contador una decrementa su valor y la otra lo aumenta en 1.

render() {
    const counter = this.state.counter;
    return (
      <>
        <View style={styles.container}>
          <Button
            title="-"
            onPress={this.onDecrement}
          />
          <Text style={styles.text}>{counter}</Text>
          <Button
            title="+"
            onPress={this.onIncrement}
          />
        </View>
      </>
    );
  }
};

Aquí vamos con la parte de la vista, llamamos al render y le pasamos nuestro contador. Definimos nuestros elementos en el contenedor del View y posteriormente le definimos un estilo.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    marginRight: 15,
    marginLeft: 15,
    fontSize: 24,
    fontWeight: '400',
  }
});

Visualizando

Para ver lo que hemos realizado debemos configurar un emulador de android con el sdk o tener un dispositivo real conectado por USB y en modo depuración.

Utilizaremos el comando:

npx react-native run-android

y tendrémos que ver lo siguiente:

Resultado

Realiza cambios dentro de la app y deberas ver los cambios en tiempo real una vez que lo hayas ejecutado.

Si tienes dudas sobre el proceso recuerda que puedes escribirnos en los comentarios.

Saludos! 😀

0