Aprende a configurar su primera aplicación React Native.

¿Cómo debería configurar una aplicación React Native?

El proceso de desarrollo de la aplicación móvil ha sido revolucionado por React Native principalmente después de algunos desarrollos de aplicaciones móviles como Ionic y algunos otros desarrollos basados ​​en la web. No será suficiente si su objetivo es desarrollar una aplicación de producción ampliable y mantenible. Así que hágase una idea de las diferentes bibliotecas y herramientas que debe considerar para su empresa de desarrollo de aplicaciones nativas react en la India mientras configura la próxima aplicación React Native.

Aspectos a considerar para la configuración de la aplicación React Native

React Native crea una API declarativa y de alto nivel para crear aplicaciones nativas. Cada componente de la interfaz de usuario se comunica con el componente de interfaz de usuario nativo de la plataforma de destino. Puede reutilizar la mayoría de los códigos entre plataformas, así como diferentes partes que simplemente funcionarán.

Marco base: Intente seguir el sitio web oficial de React Native y verá que sugiere dos formas de configurar React Native. Uno es Expo CLI y otro es React Native CLI. Puede considerar cualquiera de las dos razones :

Asegúrese de tener node.js instalado en su computadora.

Descargue la aplicación expo de Apple o Google Play Store. ¡Usaremos esto en un momento para ver nuestra aplicación en acción!

Descargue expo cli usando npm install expo-cli --globalen su terminal.

Ejecutar expo init todo-demo(todo-demo será el nombre del directorio de nuestro proyecto; siéntase libre de usar el nombre que desee).

ejecutar este comando le pedirá que haga algunas elecciones.

  • En Flujos de trabajo administrados, seleccione en blanco para su plantilla.
  • Dale un nombre a tu aplicación (puede ser el que quieras). Una vez más, utilizo todo-demo para el nombre de mi aplicación.

cd todo-demo y abra el contenido del directorio en el editor de texto de su elección.

Expo CLI

La documentación de configuración del entorno React Native tiene dos formas de comenzar a construir una aplicación React Native.

  1. Expo CLI
  2. Reaccionar CLI nativo

La CLI de React Native tiene instrucciones para los diversos sistemas operativos principales (Mac, Windows, Linux) y cómo descargar y configurar simuladores de iOS y Android para cada plataforma. Está fuera del alcance de este artículo entrar en los detalles de la configuración de diferentes entornos específicos de plataforma que, posteriormente, tienen entornos específicos de plataforma integrados.

Configuración del proyecto

Abra una nueva terminal y ejecute los siguientes comandos:

npm install -g expo-cli
expo init rapidapi-react-native

Luego, expo-cli le solicitará el tipo de proyecto a inicializar. Elija el flujo de trabajo administrado, pestañas.

Después de que el proyecto se instale, cambie los directorios al nuevo proyecto. Normalmente, esto se hace con el comando cd .

cd rapidapi-react-native/

En el directorio raíz de las aplicaciones, ejecute el comando npm starty tome su teléfono inteligente. Asegúrese de que tanto su teléfono inteligente como su computadora estén conectados a la misma red inalámbrica.

Si está usando Android, use la aplicación cliente de Expo para escanear el código QR que aparece en la terminal (o el código Qr en el navegador web). Si está utilizando iOS, puede utilizar el escáner de código QR integrado en la cámara. Seleccione la aplicación de la cámara y apúntela al código QR.

Después de escanear, la aplicación Expo se abre y el paquete Javascript comienza a compilarse. Esto puede tardar unos minutos. Cuando termine, nuestra aplicación debería aparecer con el código de la plantilla. ¡Su teléfono inteligente ahora debería mostrar el código de plantilla para nuestro proyecto!

Estructura de archivo

A continuación, abra el proyecto con su editor de código.

Tómese un momento para examinar la estructura del archivo. El proyecto comienza en el App.js  archivo.

En App.js, el diseño de la aplicación principal es creado y administrado por el componente NavigationContainer que acepta la importación de LinkingConfiguration .

Observe que el archivo LinkingConfiguration tiene las mismas opciones de pantalla que se encuentran en la carpeta de pantallas.

Además, las pantallas y carpetas de navegación son donde pasaremos la mayor parte de nuestro tiempo.

Cambiar navegación

Comprender la navegación es un paso importante en nuestra aplicación. Ábrete BottomTabNavigator.js.

Esta página controla la navegación de nuestra aplicación, al igual que una barra de navegación (o menú) controlaría la navegación en una aplicación web. ¡Es un archivo importante!

Nuestra aplicación será una aplicación simple de lanzamiento de monedas que envía una solicitud de API cuando el usuario presiona un botón para obtener un resultado. Nuestras dos pestañas serán "Flip Coin" y "Recursos".

En BottomTabNavigator.js, cambie la opción de título de la pantalla de inicio de ' Comenzar ' a ' Flip Coin '.

¡Nuestra aplicación, que se ejecuta en nuestro teléfono inteligente, debería reflejar este cambio! Una de las pestañas ahora debería ser Flip Coin. Si su aplicación no se actualizó, es posible que deba volver a abrir la aplicación desde el cliente de Expo.

Hay una función auxiliar en la parte inferior de BottomTabNavigator.js llamada getHeaderTitle que devuelve el título del encabezado para cada pantalla de inicio. Cambie el título del encabezado de 'Inicio' de 'Cómo comenzar' a '¡Lanzamiento de monedas!'. Una vez más, ¡la aplicación debería reflejar el nuevo cambio!

Agregar moneda

Ábrete HomeScreen.js. Esta página tiene mucho código que no vamos a utilizar. Por lo tanto, elimine todo el código que contiene y agregue el siguiente código para limpiar las cosas.

import * as React from "react";
import {
	Image,
	Animated,
	StyleSheet,
	Alert,
	Text,
	View,
	Button,
	ActivityIndicator,
	Easing,
} from "react-native";
import { ScrollView } from "react-native-gesture-handler";

export default function HomeScreen() {
	return (
		<View style={styles.container}>
			<ScrollView style={styles.container}>
				<Text
					style={
						(styles.flipTcontentContainerStyle =
							styles.contentContainer)
					}
				></Text>
				<Text style={styles.flipContainer}>Flip On It!</Text>
				<Text style={styles.basicText}>
					An app to help you achieve even odds in the digital age!
				</Text>
			</ScrollView>
		</View>
	);
}

HomeScreen.navigationOptions = {
	header: null,
};
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: "#fff",
	},
	contentContainer: {
		paddingTop: 30,
	},
	coinImageContainer: {
		alignItems: "center",
		marginTop: 10,
		marginBottom: 20,
	},
	welcomeImage: {
		width: 150,
		height: 124,
		resizeMode: "contain",
		marginTop: 3,
		marginLeft: -10,
	},
	flipContainer: {
		alignItems: "center",
		marginHorizontal: 50,
	},
	flipTitle: {
		fontSize: 25,
		color: "#000",
		marginVertical: 8,
		paddingTop: 10,
		paddingHorizontal: 10,
		lineHeight: 24,
		textAlign: "center",
	},
	basicText: {
		fontSize: 15,
		color: "rgba(96,100,109, 1)",
		lineHeight: 18,
		textAlign: "center",
	},
	flipResultText: {
		fontSize: 35,
		color: "#FF0000",
		textAlign: "center",
		fontWeight: "700",
	},
	buttonContainer: {
		backgroundColor: "#1a1aff",
		marginTop: 16,
		marginBottom: 16,
		borderRadius: 5,
		paddingVertical: 4,
		paddingHorizontal: 5,
	},
});

Botón

A continuación, agreguemos el botón que controla cuándo lanzar la moneda. El componente de botón React Native no tiene un componente de estilo, por lo que usamos un componente de Vista envolvente para diseñar el botón. Agregue el botón a continuación debajo del componente de texto de descripción de la aplicación (¡tiene el texto Una aplicación para ayudarlo a lograr probabilidades iguales en la era digital!) En HomeScreen.js.

<View style={styles.buttonContainer}>
 <Button
   title="Flip Coin"
   onPress={() => fetchData()}
   color="#FFFFFF"
   accessibilityLabel="Fetch heads or tails"
 />
</View>

El componente llama a la función de recuperación de datos cuando se presiona. Sin embargo, esta función aún no existe. Agregue la función al componente sobre la declaración de retorno.

const fetchData = () => {
    console.log('flipped')
};

Imagen

En la parte superior de los <ScrollView>componentes, agregue el componente de imagen:

<Image
    source={{ uri: 'https://cdn.pixabay.com/photo/2018/05/17/00/24/quarter-3407493_960_720.png' }}
    style={styles.welcomeImage}
/>

Las imágenes se pueden agregar desde el sistema de archivos del proyecto, desde un URI o por datos (base64). Las dimensiones de la imagen deben especificarse si se usa un URI o datos codificados. Estamos especificando las dimensiones de la imagen en el objeto de estilo con un estilo de imagen de bienvenida. La imagen aún no está centrada porque no hemos terminado con ella.

Animación

Las animaciones son muy diferentes en comparación con las animaciones con una aplicación web. Las animaciones se logran con el componente Animated y existen una serie de métodos que se pueden llamar para manejar eventos. Una inmersión más profunda en las animaciones está más allá de esta aplicación, pero implementemos una de todos modos.

En la parte superior del componente, arriba de fetchData, inicialice nuestro parámetro de animación con la línea de abajo.

const rotateAnim = React.useRef(newAnimated.Value(0)).current;

A continuación, agregue dos funciones debajo de la línea anterior que controlan el cambio de valor para el parámetro de animación.

const startFlip = () => {
	Animated.timing(rotateAnim, {
		toValue: 100,
		easing: Easing.inOut(Easing.exp),
	}).start();
};
const resetFlip = () => {
	Animated.timing(rotateAnim, {
		toValue: 0,
	}).reset();
};

Como no podemos animar la imagen directamente, la vamos a envolver en un componente animado.

Reemplace el componente de imagen con el animado. Vea el componente a continuación.

<Animated.View
	style={{
		...styles.coinImageContainer,
		transform: [
			{ scale: 1.1 },
			{ rotateX: rotateAnim },
			{ perspective: 1000 },
		],
	}}
>
	<Image
		source={{
			uri:
				"https://cdn.pixabay.com/photo/2018/05/17/00/24/quarter-3407493_960_720.png",
		}}
		style={styles.welcomeImage}
	/>
</Animated.View>;

Todavía tenemos la etiqueta de imagen como elemento secundario del componente de animación, pero esta es la configuración necesaria para los componentes animados.

Dile a la función startFlip que se active cuando ejecutamos fetchData agregando una llamada a la función en la parte superior de la función fetchData .

const fetchData = () => {
	startFlip(); // added
	console.log("flipped");
};

Ahora, la imagen de la moneda está centrada y se voltea la primera vez que presionamos el botón Flip Coin. Sin embargo, solo funciona una vez porque todavía no hemos agregado la llamada a la función resetFlip a fetchData . Eso se hará cuando implementemos la llamada a la API.

React Native le permite crear aplicaciones móviles utilizando solo JavaScript. Utiliza el mismo diseño que React, lo que le permite componer una interfaz de usuario móvil enriquecida a partir del componente declarativo React Native le permite crear su aplicación más rápido. En lugar de volver a compilar, puede volver a cargar su aplicación al instante. Con la recarga en caliente, incluso puede ejecutar un nuevo código mientras conserva el estado de su aplicación. Pruébelo, es una experiencia mágica.

Con React Native, no crea una "aplicación web móvil", una "aplicación HTML5" o una "aplicación híbrida". Usted crea una aplicación móvil real que es indistinguible de una aplicación creada con Objective-C o Java. React Native usa los mismos bloques de construcción de UI fundamentales que las aplicaciones regulares de iOS y Android. Simplemente junta esos bloques de construcción usando JavaScript y React.

React Native se combina sin problemas con componentes escritos en Objective-C, Java o Swift. Es fácil acceder al código nativo si necesita optimizar algunos aspectos de su aplicación. También es fácil construir parte de su aplicación en React Native y parte de su aplicación usando código nativo directamente; así es como funciona la aplicación de Facebook.

React Native fue solo una solución para el único iOS. Pero ahora React Native está disponible para varios sistemas operativos como Android, VR, React Native Web y muchos más. Por lo tanto, utilícelo y cree aplicaciones para su empresa.


Conviertete en un programador más sociable

Patrocinadores