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: 6.283 ]
Por: Fábio Berbert de Paula em 10/04/2020 | Blog: https://mestrefabio.com
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'}] } })
Viva o Linux finalmente de volta!
Criando um sistema de banners rotativos em PHP
Clicador automático de Tinder com Python
Como Turbinar sua Produtividade com VIM - Guia Definitivo do Desenvolvedor
EditorConfig - Padronização de código para seus projetos
Formulários HTML: Problemas com campos desabilitados?
Verificando a consistência de CPF e CNPJ em um formulário com JavaScript
Nenhum comentário foi encontrado.
Como escolher o melhor escalonador de CPU para melhorar o desempenho da máquina
Curiosidade sobre DOOM Guy e Isabelle de Animal Crossing
Inicializando servidor Ubuntu na AWS e rodando apache em Container
Conheça o Octopi, outro frontend para o Pacman com acesso ao ARU (Arch Linux e derivados)
Terminal transparente no Debian 12 com interface i3wm usando Xfce4-Terminal e Compton
Como compilar o DOOM RETRO no Linux
Stacer - um otimizador gráfico básico de Linux
Corrigindo o erro de "WARNING: Possibly missing firmware for module" no Arch Linux
no kubuntu 24.04 apaga monitor e não acende mais (2)
Como eu posso logar noutra distro sem subir o sistema? (0)
Notebook com Ubuntu 22.04.4 se reinicia após curtos períodos. (1)