Criando Aplicativos Mobile com React Native
Este artigo é um pontapé inicial no desenvolvimento de aplicativos mobile (Android e iOS) com React Native. Vamos abordar a configuração do ambiente de desenvolvimento e o deploy de um "Hello World" em teu celular Android.
[ Hits: 7.054 ]
Por: Fábio Berbert de Paula em 10/04/2020 | Blog: https://fabio.automatizando.dev
List of devices attached 192.168.1.108:5555 deviceNOTA: estou supondo que você já habilitou depuração USB em opções do desenvolvedor no teu Android. Se nunca fez isso, dê um pulinho no Google e pesquise sobre o assunto. É molezinha! Qualquer coisa pergunte nos comentários aqui. E claro, o nome do teu dispositivo não será 192.168..5555.
###### ###### ### #### #### ### ## ### ### ## ## #### ## ## #### ## ## ## ## ## ## ### ### ## ## ######################## ## ###### ### ### ###### ### ## ## ## ## ### ### ## ### #### ### ## ### ## #### ######## #### ## ## ### ########## ### ## ## #### ######## #### ## ### ## ### #### ### ## ### ### ## ## ## ## ### ###### ### ### ###### ## ######################## ## ## ### ### ## ## ## ## ## ## #### ## ## #### ## ## ### ### ## ### #### #### ### ###### ###### Welcome to React Native! Learn once, write anywhere To reload the app press "r" To open developer menu press "d"O terminal ficará preso. Precisaremos abrir outro terminal na pasta do projeto...
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import React from 'react'; import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, } from 'react-native'; import { Header, LearnMoreLinks, Colors, DebugInstructions, ReloadInstructions, } from 'react-native/Libraries/NewAppScreen'; const App: () => React$Node = () => { return ( <> <StatusBar barStyle="dark-content" /> <SafeAreaView> <ScrollView contentInsetAdjustmentBehavior="automatic" style={styles.scrollView}> <Header /> {global.HermesInternal == null ? null : ( <View style={styles.engine}> <Text style={styles.footer}>Engine: Hermes</Text> </View> )} <View style={styles.body}> <View style={styles.sectionContainer}> <Text style={styles.sectionTitle}>Step One</Text> <Text style={styles.sectionDescription}> Edit <Text style={styles.highlight}>App.js</Text> to change this screen and then come back to see your edits. </Text> </View> <View style={styles.sectionContainer}> <Text style={styles.sectionTitle}>See Your Changes</Text> <Text style={styles.sectionDescription}> <ReloadInstructions /> </Text> </View> <View style={styles.sectionContainer}> <Text style={styles.sectionTitle}>Debug</Text> <Text style={styles.sectionDescription}> <DebugInstructions /> </Text> </View> <View style={styles.sectionContainer}> <Text style={styles.sectionTitle}>Learn More</Text> <Text style={styles.sectionDescription}> Read the docs to discover what to do next: </Text> </View> <LearnMoreLinks /> </View> </ScrollView> </SafeAreaView> </> ); }; const styles = StyleSheet.create({ scrollView: { backgroundColor: Colors.lighter, }, engine: { position: 'absolute', right: 0, }, body: { backgroundColor: Colors.white, }, sectionContainer: { marginTop: 32, paddingHorizontal: 24, }, sectionTitle: { fontSize: 24, fontWeight: '600', color: Colors.black, }, sectionDescription: { marginTop: 8, fontSize: 18, fontWeight: '400', color: Colors.dark, }, highlight: { fontWeight: '700', }, footer: { color: Colors.dark, fontSize: 12, fontWeight: '600', padding: 4, paddingRight: 12, textAlign: 'right', }, }); export default App;
import React, { Component } from 'react' import { Text } from 'react-native' export default class App extends Component { render() { return ( <Text>Viva o Linux!!!</Text> ) } }
import React, { Component } from 'react' import { StyleSheet, View, Text } from 'react-native' export default class App extends Component { render() { return ( <View style={styles.view}> <Text style={styles.text}>Vivao{'\n'}Linux</Text> </View> ) } } const styles = StyleSheet.create({ view: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: '#096A01', }, text: { color: '#ffffff', fontSize: 60, fontWeight: 'bold', textTransform: 'uppercase', textShadowColor: '#000000', textShadowRadius: 20, textShadowOffset: {width: 2, height: 2}, transform: [{ rotate: '-15deg'}] } })
Como criar um keylogger em Python
Criando um contador de downloads com PHP e MySQL
Como Turbinar sua Produtividade com VIM - Guia Definitivo do Desenvolvedor
Como jogar poker no Full Tilt Poker pelo Linux
Symbaloo para uso em Química e Pesquisa Científica
Jakarta JMeter - Testando o desempenho de seus sites
CSS - Manual de Estilo (parte 2)
Máquina Enigma e encriptação em XOR
Proteja seu website ou página html com encriptaçâo
Nenhum coment�rio foi encontrado.
Atualizando o Passado: Linux no Lenovo G460 em 2025
aaPanel - Um Painel de Hospedagem Gratuito e Poderoso
O macete do Warsaw no Linux Mint e cia
O que você quer para sua vida ao usar o Linux?
Visualizar arquivos em formato markdown (ex.: README.md) pelo terminal
Dando - teoricamente - um gás no Gnome-Shell do Arch Linux
Audio intermitente xubuntu notebook positivo c14 vision (1)
Encontrar o comando completo de uma janela [RESOLVIDO] (2)
Instalação de Ubuntu em SSD (interno) como se fosse um dispositivo ext... (2)
Zorin OS - Virtual Box não consigo abrir maquinas virtuais (10)