Crear una aplicación móvil en React Native

Hola a todos Esta será la primera parte en la creación de nuestra aplicación móvil.

Haremos una aplicación móvil usando react native y expo. No crearemos una gran aplicación de noticias. Para esto usaremos php a través de rest api.

En nuestra aplicación, mostraremos artículos que estarán en phpmyadmin.

¿Qué es la expo?

Expo, es un conjunto de herramientas, bibliotecas y servicios que le permiten crear sus propias aplicaciones para iOS y Android usando JavaScript. Eso suena prometedor. En pocas palabras, Expo lo ayuda a ver proyectos mientras aún los está desarrollando. Expo CLI crea una URL de desarrollo (similar a un host local en Internet) que luego puede abrir en el cliente Expo para obtener una vista previa de la aplicación.

Instalación de Expo

Antes de instalar expo, asegúrese de instalar npm.

npm install expo-cli —global 

Instalar expo en iphone

Instalar expo en android


Expo te da opciones. Puede obtener una vista previa de su aplicación a través de la aplicación cliente de Expo en su dispositivo móvil o usando el simulador iOS / Android en su computadora. Al crear la aplicación, utilicé expo en Android.

Crear una aplicación expo

 epxo init 

Después de instalar Expo, se abre la interfaz Expo CLI y le permite seleccionar el nombre y la plantilla del proyecto. Elegiremos una página en blanco.

 cd newsApp expo start —tunnel 

Después de eso, expo lanzará el servidor de desarrollo local, abrirá una nueva ventana para ver el servidor y le proporcionará un código QR para abrir su proyecto en su dispositivo móvil. O puede registrarse en la aplicación móvil y expo cli, y mostrará automáticamente los desarrollos actuales en la aplicación móvil.

Para ingresar a la expo en su computadora, use este comando:

 expo login 

Instalar react-navigation

Para que podamos cambiar de una pantalla a otra, necesitamos descargar react-nativation:

 yarn add react-nativation 

Inicio del desarrollo

Ahora comencemos nuestro desarrollo.

Lo primero que haremos es abrir App.js (nuestro archivo principal).

Diseño

Para que nuestra aplicación se vea atractiva, agregaremos un par de elementos y les agregaremos estilos.

Primero, agregue el encabezado:

 render() { return ( <SafeAreaView style={styles.MainContainer}> <ScrollView > <Text style={styles.textTitle}>:</Text> </ScrollView> </SafeAreaView> ); } const styles = StyleSheet.create({ textTitle :{fontSize:22,fontFamily: 'Roboto-M',fontWeight:'700', padding:10}, }); 

Ahora agreguemos un bloque con la salida de artículos y estiloéelo.

 import * as React from 'react'; import { View, Text, SafeAreaView, StyleSheet, Image, Dimensions, ScrollView } from 'react-native'; import Icon from 'react-native-vector-icons/Ionicons' export default class App extends React.Component { constructor(props) { super(props); this.state = { isLoading: true, fontLoaded: false } } async componentDidMount() { return fetch('http://rapprogtrain.com/server-side/test.php') .then((response) => response.json()) .then((responseJson) => { this.setState({ isLoading: false, dataSource: responseJson }, function() { // In this block you can do something with new state. }); }) .catch((error) => { console.error(error); }); } FlatListItemSeparator = () => { return ( <View /> ); } render() { return ( <SafeAreaView style={styles.MainContainer}> <ScrollView > <Text style={styles.textTitle}>:</Text> <View style={styles.postContainer}> <Image source = {{ uri: "https://tinyjpg.com/images/social/website.jpg" }} style={{resizeMode:'cover',width:null,height:null, flex:1, borderRadius:4, borderWidth:1, borderColor:'#dddddd'}} /> <Text style={styles.textOfArticle} > Lorem Ipsum is simply dummy text of the printing and typesetting industry. </Text> <View style={{marginTop:10, flexDirection: 'row', justifyContent: 'space-between'}}> <Text style={{color:'#727272',fontSize:13}}>Lorem</Text> <View style={{flexDirection: 'row'}}> <Icon name="ios-eye" size={18} style={{color:'#727272', marginRight:3}} /> <Text style={{color:'#727272',fontSize:13}}>22</Text> </View> </View> </View> </ScrollView> </SafeAreaView> ); } } const styles = StyleSheet.create({ MainContainer :{ // Setting up View inside content in Vertically center. justifyContent: 'center', flex:1 }, textTitle :{fontSize:22,fontFamily: 'Roboto-M',fontWeight:'700', padding:10}, textOfArticle:{ marginTop:7, fontSize:16, fontFamily: 'Roboto-M' }, postContainer :{ width: Dimensions.get('window').width, height:250, paddingBottom:10, padding:10 }, }); 

En esto termina nuestra lección.

En la próxima lección, sacaremos los datos de mysql.

Si está interesado en cómo funciona, vaya y descargue esta aplicación, habrá una pestaña de noticias, una aplicación móvil

Mi sitio web es http://rapprogtrain.com

Yo vk y twitter