Criando um aplicativo móvel no React Native

Olá pessoal. Esta será a primeira parte da criação do nosso aplicativo móvel.

Faremos um aplicativo móvel usando react native e expo. Não criaremos um ótimo aplicativo de notícias. Para isso, usaremos php via rest api.

Em nosso aplicativo, exibiremos artigos que estarão no phpmyadmin.

O que é expo?

Expo, é um conjunto de ferramentas, bibliotecas e serviços que permitem criar seus próprios aplicativos para iOS e Android usando JavaScript. Isso parece promissor. Simplificando, a Expo ajuda você a visualizar projetos enquanto você ainda os está desenvolvendo. A CLI da Expo cria uma URL de desenvolvimento (semelhante a um host local na Internet) que pode ser aberta no cliente Expo para visualizar o aplicativo.

Instalação da Expo

Antes de instalar o expo, certifique-se de instalar o npm.

npm install expo-cli —global 

Instalar expo no iphone

Instale expo no android


A Expo oferece opções. Você pode visualizar seu aplicativo através do aplicativo cliente Expo no seu dispositivo móvel ou usando o simulador iOS / Android no seu computador. Ao criar o aplicativo, usei expo no android.

Criando um aplicativo expo

 epxo init 

Após a instalação do Expo, a interface do CLI da Expo é aberta e permite selecionar o nome e o modelo do projeto. Vamos escolher uma página em branco.

 cd newsApp expo start —tunnel 

Depois disso, a expo iniciará o servidor de desenvolvimento local, abrirá uma nova janela para visualização do servidor e fornecerá um código QR para abrir seu projeto no seu dispositivo móvel. Ou você pode se registrar no aplicativo móvel e no expo cli, e ele mostrará automaticamente os desenvolvimentos atuais no aplicativo móvel.

Para entrar no expo no seu computador, use este comando:

 expo login 

Instale o react-navigation

Para que possamos mudar de uma tela para outra, precisamos fazer o download da reativação:

 yarn add react-nativation 

Início do desenvolvimento

Agora vamos começar nosso desenvolvimento.

A primeira coisa que faremos é abrir o App.js (nosso arquivo principal).

Layout

Para tornar nosso aplicativo atraente, adicionaremos alguns elementos e estilos a eles.

Primeiro, adicione o cabeçalho:

 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}, }); 

Agora vamos adicionar um bloco com a saída de artigos e estilizá-lo.

 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 }, }); 

Nisto, nossa lição termina.

Na próxima lição, mostraremos os dados do mysql.

Se você estiver interessado em como ele funciona, vá e faça o download deste aplicativo, haverá uma guia de notícias - um aplicativo móvel

Meu site é http://rapprogtrain.com

Eu vk e twitter