React Native - Guia rápido
Para uma melhor compreensão dos conceitos do React Native, vamos pegar emprestadas algumas linhas da documentação oficial -
O React Native permite construir aplicativos móveis usando apenas JavaScript. Ele usa o mesmo design do React, permitindo compor uma rica IU móvel a partir de componentes declarativos. Com o React Native, você não constrói um aplicativo da web móvel, um aplicativo HTML5 ou um aplicativo híbrido; você constrói um aplicativo móvel real que é indistinguível de um aplicativo desenvolvido usando Objective-C ou Java. O React Native usa os mesmos blocos de construção fundamentais da IU que os aplicativos iOS e Android regulares. Você acabou de colocar esses blocos de construção juntos usando JavaScript e React.
React Native Features
A seguir estão os recursos do React Native -
React - Este é um Framework para construir aplicativos web e móveis usando JavaScript.
Native - Você pode usar componentes nativos controlados por JavaScript.
Platforms - React Native é compatível com a plataforma IOS e Android.
React Native Advantages
A seguir estão as vantagens do React Native -
JavaScript - Você pode usar o conhecimento existente de JavaScript para construir aplicativos móveis nativos.
Code sharing - Você pode compartilhar a maior parte do seu código em diferentes plataformas.
Community - A comunidade em torno do React and React Native é grande, e você poderá encontrar qualquer resposta que precisar.
Limitações nativas do React
A seguir estão as limitações do React Native -
Native Components - Se você deseja criar uma funcionalidade nativa que ainda não foi criada, você precisará escrever algum código específico para a plataforma.
Há algumas coisas que você precisa instalar para configurar o ambiente para React Native. Usaremos OSX como nossa plataforma de construção.
Sr. Não. | Programas | Descrição |
---|---|---|
1 | NodeJS e NPM | Você pode seguir nosso tutorial de configuração do ambiente NodeJS para instalar o NodeJS. |
Etapa 1: instalar create-react-native-app
Depois de instalar o NodeJS e o NPM com sucesso em seu sistema, você pode prosseguir com a instalação de create-react-native-app (globalmente como mostrado abaixo).
C:\Users\Tutorialspoint> npm install -g create-react-native-app
Etapa 2: Criar projeto
Navegue pela pasta necessária e crie um novo projeto reagente nativo conforme mostrado abaixo.
C:\Users\Tutorialspoint>cd Desktop
C:\Users\Tutorialspoint\Desktop>create-react-native-app MyReactNative
Depois de executar o comando acima, uma pasta com nome específico é criada com o seguinte conteúdo.
Etapa 3: NodeJS Python Jdk8
Certifique-se de ter Python NodeJS e jdk8 instalado em seu sistema, caso contrário, instale-os. Além disso, é recomendável instalar a versão mais recente do yarn para evitar certos problemas.
Etapa 4: instalar React Native CLI
Você pode instalar a interface de linha de comando react nativa no npm, usando o comando install -g react-native-cli conforme mostrado abaixo.
npm install -g react-native-cli
Etapa 5: comece a reagir nativo
Para verificar a instalação, navegue pela pasta do projeto e tente iniciar o projeto usando o comando start.
C:\Users\Tutorialspoint\Desktop>cd MyReactNative
C:\Users\Tutorialspoint\Desktop\MyReactNative>npm start
Se tudo correr bem, você receberá um código QR conforme mostrado abaixo.
Conforme instruído, uma maneira de executar apps nativos Rea em seu dispositivo Android é usar o Expo. Instale o cliente expo em seu dispositivo Android e digitalize o código QR obtido acima.
Etapa 6: Ejetar o projeto
Se você deseja executar o emulador do Android usando o Android Studio, saia da linha de comando atual pressionando ctrl+c.
Então, execute run eject command Como
npm run eject
Isso mostra as opções de ejeção, selecione a primeira usando as setas e pressione Enter.
Em seguida, você deve sugerir o nome do aplicativo na tela inicial e o nome do projeto do estúdio Android e projetos Xcode.
Embora seu projeto tenha sido ejetado com sucesso, você pode obter um erro como -
Ignore este erro e execute o react nativo para android usando o seguinte comando -
react-native run-android
Mas, antes disso, você precisa instalar o Android Studio.
Etapa 7: Instalando o Android Studio
Visite a página da web https://developer.android.com/studio/ e baixe o Android Studio.
Após baixar o arquivo de instalação do mesmo, clique duas vezes sobre ele e prossiga com a instalação.
Etapa 8: Configurando o AVD Manager
Para configurar o AVD Manager, clique no ícone respectivo na barra de menu.
Etapa 9: Configurando o AVD Manager
Escolha uma definição de dispositivo, Nexus 5X é sugerível.
Clique no botão Avançar para ver uma janela de imagem do sistema. Selecione osx86 Images aba.
Em seguida, selecione Marshmallow e clique em Avançar.
Por fim, clique no botão Concluir para finalizar a configuração do AVD.
Após configurar seu dispositivo virtual, clique no botão play na coluna Actions para iniciar o emulador de Android.
Etapa 10: executando o Android
Abra o prompt de comando, navegue pela pasta do seu projeto e execute o react-native run-android comando.
Então, a execução do aplicativo começa em outro prompt, você pode ver seu status.
Em seu emulador de Android, você pode ver a execução do aplicativo padrão como -
Etapa 11: local.properties
Abra o android pasta na pasta do seu projeto SampleReactNative/android(nesse caso). Crie um arquivo com nomelocal.properties e adicione o seguinte caminho nele.
sdk.dir = /C:\\Users\\Tutorialspoint\\AppData\\Local\\Android\\Sdk
aqui, substitua Tutorialspoint com seu nome de usuário.
Etapa 12: Recarga a quente
E para construir o aplicativo modifique o App.js e as mudanças serão atualizadas automaticamente no emulador do Android.
Caso contrário, clique em Android emulator pressione ctrl+m então, selecione Enable Hot Reloading opção.
Se você abrir o aplicativo padrão, poderá observar que o arquivo app.js se parece com
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style = {styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<Text>Changes you make will automatically reload.</Text>
<Text>Shake your phone to open the developer menu.</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Resultado
Olá Mundo
Para exibir uma mensagem simples dizendo “Bem-vindo ao Tutorialspoint”, remova a parte CSS e insira a mensagem a ser impressa envolvida pelas tags <text> </text> dentro de <view> </view> como mostrado abaixo.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View>
<Text>Welcome to Tutorialspoint</Text>
</View>
);
}
}
Os dados dentro do React Components são gerenciados por state e props. Neste capítulo, vamos falar sobrestate.
Diferença entre State e Props
o state é mutável enquanto propssão imutáveis. Isso significa questate pode ser atualizado no futuro, enquanto os adereços não podem ser atualizados.
Usando estado
Este é o nosso componente raiz. Estamos apenas importandoHome que será usado na maioria dos capítulos.
App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
state = {
myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.'
}
render() {
return (
<View>
<Text> {this.state.myState} </Text>
</View>
);
}
}
Podemos ver no texto do emulador do estado como na imagem a seguir.
Atualizando estado
Como o estado é mutável, podemos atualizá-lo criando o deleteState função e chamá-lo usando o onPress = {this.deleteText} evento.
Home.js
import React, { Component } from 'react'
import { Text, View } from 'react-native'
class Home extends Component {
state = {
myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.'
}
updateState = () ⇒ this.setState({ myState: 'The state is updated' })
render() {
return (
<View>
<Text onPress = {this.updateState}>
{this.state.myState}
</Text>
</View>
);
}
}
export default Home;
NOTES- Em todos os capítulos, usaremos a sintaxe de classe para componentes com estado (contêiner) e a sintaxe de função para componentes sem estado (apresentação). Aprenderemos mais sobre os componentes no próximo capítulo.
Também aprenderemos como usar a sintaxe da função de seta para updateState. Você deve ter em mente que esta sintaxe usa o escopo léxico, ethisa palavra-chave será associada ao objeto de ambiente (Classe). Isso às vezes leva a um comportamento inesperado.
A outra maneira de definir métodos é usar as funções EC5, mas nesse caso precisaremos vincular thismanualmente no construtor. Considere o seguinte exemplo para entender isso.
class Home extends Component {
constructor() {
super()
this.updateState = this.updateState.bind(this)
}
updateState() {
//
}
render() {
//
}
}
Em nosso último capítulo, mostramos como usar mutáveis state. Neste capítulo, mostraremos como combinar o estado e oprops.
Os componentes de apresentação devem obter todos os dados passando props. Apenas os componentes do contêiner devem terstate.
Componente do recipiente
Agora vamos entender o que é um componente de contêiner e também como funciona.
Teoria
Agora vamos atualizar nosso componente de contêiner. Este componente controlará o estado e passará os adereços para o componente de apresentação.
O componente do contêiner é usado apenas para lidar com o estado. Todas as funcionalidades relacionadas à visualização (estilo, etc.) serão tratadas no componente de apresentação.
Exemplo
Se quisermos usar o exemplo do último capítulo, precisamos remover o Textelemento da função de renderização, pois esse elemento é usado para apresentar o texto aos usuários. Isso deve estar dentro do componente de apresentação.
Vamos revisar o código no exemplo fornecido a seguir. Vamos importar oPresentationalComponent e passe para a função de renderização.
Depois de importar o PresentationalComponente passá-lo para a função de renderização, precisamos passar os adereços. Vamos passar os adereços adicionandomyText = {this.state.myText} e deleteText = {this.deleteText} para <PresentationalComponent>. Agora, poderemos acessar isso dentro do componente de apresentação.
App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PresentationalComponent from './PresentationalComponent'
export default class App extends React.Component {
state = {
myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.'
}
updateState = () => {
this.setState({ myState: 'The state is updated' })
}
render() {
return (
<View>
<PresentationalComponent myState = {this.state.myState} updateState = {this.updateState}/>
</View>
);
}
}
Componente Apresentacional
Agora vamos entender o que é um componente de apresentação e também como funciona.
Teoria
Os componentes de apresentação devem ser usados apenas para apresentar a visão aos usuários. Esses componentes não têm estado. Eles recebem todos os dados e funções como suportes.
A melhor prática é usar tantos componentes de apresentação quanto possível.
Exemplo
Como mencionamos em nosso capítulo anterior, estamos usando a sintaxe da função EC6 para componentes de apresentação.
Nosso componente receberá adereços, retornar elementos de visualização e apresentar texto usando {props.myText} e ligue para o {props.deleteText} função quando um usuário clica no texto.
PresentationalComponent.js
import React, { Component } from 'react'
import { Text, View } from 'react-native'
const PresentationalComponent = (props) => {
return (
<View>
<Text onPress = {props.updateState}>
{props.myState}
</Text>
</View>
)
}
export default PresentationalComponent
Agora, temos a mesma funcionalidade que em nosso Statecapítulo. A única diferença é que refatoramos nosso código para o contêiner e o componente de apresentação.
Você pode executar o aplicativo e ver o texto como na imagem a seguir.
Se você clicar no texto, ele será removido da tela.
Existem algumas maneiras de estilizar seus elementos no React Native.
Você pode usar o stylepropriedade para adicionar os estilos embutidos. No entanto, essa não é a prática recomendada porque pode ser difícil ler o código.
Neste capítulo, vamos usar o Stylesheet para estilizar.
Componente do recipiente
Nesta seção, simplificaremos nosso componente de contêiner de nosso capítulo anterior.
App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PresentationalComponent from './PresentationalComponent'
export default class App extends React.Component {
state = {
myState: 'This is my state'
}
render() {
return (
<View>
<PresentationalComponent myState = {this.state.myState}/>
</View>
);
}
}
Componente Apresentacional
No exemplo a seguir, vamos importar o StyleSheet. Na parte inferior do arquivo, vamos criar nossa folha de estilo e atribuí-la aostylesconstante. Observe que nossos estilos estão emcamelCase e nós não usamos px ou% para estilização.
Para aplicar estilos ao nosso texto, precisamos adicionar style = {styles.myText} propriedade para o Text elemento.
PresentationalComponent.js
import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'
const PresentationalComponent = (props) => {
return (
<View>
<Text style = {styles.myState}>
{props.myState}
</Text>
</View>
)
}
export default PresentationalComponent
const styles = StyleSheet.create ({
myState: {
marginTop: 20,
textAlign: 'center',
color: 'blue',
fontWeight: 'bold',
fontSize: 20
}
})
Ao executar o aplicativo, receberemos a seguinte saída.
Para acomodar diferentes tamanhos de tela, o React Native oferece Flexbox Apoio, suporte.
Usaremos o mesmo código que usamos em nosso React Native - Stylingcapítulo. Nós apenas mudaremos oPresentationalComponent.
Layout
Para obter o layout desejado, o flexbox oferece três propriedades principais - flexDirection justifyContent e alignItems.
A tabela a seguir mostra as opções possíveis.
Propriedade | Valores | Descrição |
---|---|---|
flexDirection | 'coluna', 'linha' | Usado para especificar se os elementos serão alinhados verticalmente ou horizontalmente. |
justifyContent | 'center', 'flex-start', 'flex-end', 'espaço ao redor', 'espaço entre' | Usado para determinar como os elementos devem ser distribuídos dentro do contêiner. |
alignItems | 'center', 'flex-start', 'flex-end', 'esticado' | Usado para determinar como os elementos devem ser distribuídos dentro do contêiner ao longo do eixo secundário (oposto de flexDirection) |
Se quiser alinhar os itens verticalmente e centralizá-los, você pode usar o código a seguir.
App.js
import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'
const Home = (props) => {
return (
<View style = {styles.container}>
<View style = {styles.redbox} />
<View style = {styles.bluebox} />
<View style = {styles.blackbox} />
</View>
)
}
export default Home
const styles = StyleSheet.create ({
container: {
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'grey',
height: 600
},
redbox: {
width: 100,
height: 100,
backgroundColor: 'red'
},
bluebox: {
width: 100,
height: 100,
backgroundColor: 'blue'
},
blackbox: {
width: 100,
height: 100,
backgroundColor: 'black'
},
})
Output
Se os itens precisam ser movidos para o lado direito e espaços precisam ser adicionados entre eles, então podemos usar o código a seguir.
App.js
import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'
const App = (props) => {
return (
<View style = {styles.container}>
<View style = {styles.redbox} />
<View style = {styles.bluebox} />
<View style = {styles.blackbox} />
</View>
)
}
export default App
const styles = StyleSheet.create ({
container: {
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'flex-end',
backgroundColor: 'grey',
height: 600
},
redbox: {
width: 100,
height: 100,
backgroundColor: 'red'
},
bluebox: {
width: 100,
height: 100,
backgroundColor: 'blue'
},
blackbox: {
width: 100,
height: 100,
backgroundColor: 'black'
},
})
Neste capítulo, mostraremos como criar uma lista no React Native. Vamos importarList na nossa Home componente e mostrá-lo na tela.
App.js
import React from 'react'
import List from './List.js'
const App = () => {
return (
<List />
)
}
export default App
Para criar uma lista, usaremos o map()método. Isso irá iterar sobre uma matriz de itens e renderizar cada um.
List.js
import React, { Component } from 'react'
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native'
class List extends Component {
state = {
names: [
{
id: 0,
name: 'Ben',
},
{
id: 1,
name: 'Susan',
},
{
id: 2,
name: 'Robert',
},
{
id: 3,
name: 'Mary',
}
]
}
alertItemName = (item) => {
alert(item.name)
}
render() {
return (
<View>
{
this.state.names.map((item, index) => (
<TouchableOpacity
key = {item.id}
style = {styles.container}
onPress = {() => this.alertItemName(item)}>
<Text style = {styles.text}>
{item.name}
</Text>
</TouchableOpacity>
))
}
</View>
)
}
}
export default List
const styles = StyleSheet.create ({
container: {
padding: 10,
marginTop: 3,
backgroundColor: '#d9f9b1',
alignItems: 'center',
},
text: {
color: '#4f603c'
}
})
Quando executarmos o aplicativo, veremos a lista de nomes.
Você pode clicar em cada item da lista para acionar um alerta com o nome.
Neste capítulo, mostraremos como trabalhar com TextInput elementos em React Native.
O componente Home importará e renderizará as entradas.
App.js
import React from 'react';
import Inputs from './inputs.js'
const App = () => {
return (
<Inputs />
)
}
export default App
Entradas
Vamos definir o estado inicial.
Depois de definir o estado inicial, vamos criar o handleEmail e a handlePasswordfunções. Essas funções são usadas para atualizar o estado.
o login() função irá apenas alertar o valor atual do estado.
Também adicionaremos algumas outras propriedades às entradas de texto para desativar a capitalização automática, remover a borda inferior em dispositivos Android e definir um espaço reservado.
inputs.js
import React, { Component } from 'react'
import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'
class Inputs extends Component {
state = {
email: '',
password: ''
}
handleEmail = (text) => {
this.setState({ email: text })
}
handlePassword = (text) => {
this.setState({ password: text })
}
login = (email, pass) => {
alert('email: ' + email + ' password: ' + pass)
}
render() {
return (
<View style = {styles.container}>
<TextInput style = {styles.input}
underlineColorAndroid = "transparent"
placeholder = "Email"
placeholderTextColor = "#9a73ef"
autoCapitalize = "none"
onChangeText = {this.handleEmail}/>
<TextInput style = {styles.input}
underlineColorAndroid = "transparent"
placeholder = "Password"
placeholderTextColor = "#9a73ef"
autoCapitalize = "none"
onChangeText = {this.handlePassword}/>
<TouchableOpacity
style = {styles.submitButton}
onPress = {
() => this.login(this.state.email, this.state.password)
}>
<Text style = {styles.submitButtonText}> Submit </Text>
</TouchableOpacity>
</View>
)
}
}
export default Inputs
const styles = StyleSheet.create({
container: {
paddingTop: 23
},
input: {
margin: 15,
height: 40,
borderColor: '#7a42f4',
borderWidth: 1
},
submitButton: {
backgroundColor: '#7a42f4',
padding: 10,
margin: 15,
height: 40,
},
submitButtonText:{
color: 'white'
}
})
Sempre que digitarmos em um dos campos de entrada, o estado será atualizado. Quando clicamos noSubmit botão, o texto das entradas será mostrado dentro da caixa de diálogo.
Sempre que digitarmos em um dos campos de entrada, o estado será atualizado. Quando clicamos noSubmit botão, o texto das entradas será mostrado dentro da caixa de diálogo.
Neste capítulo, mostraremos como trabalhar com o ScrollView elemento.
Vamos criar novamente ScrollViewExample.js e importá-lo em Home.
App.js
import React from 'react';
import ScrollViewExample from './scroll_view.js';
const App = () => {
return (
<ScrollViewExample />
)
}export default App
Scrollview irá renderizar uma lista de nomes. Vamos criá-lo no estado.
ScrollView.js
import React, { Component } from 'react';
import { Text, Image, View, StyleSheet, ScrollView } from 'react-native';
class ScrollViewExample extends Component {
state = {
names: [
{'name': 'Ben', 'id': 1},
{'name': 'Susan', 'id': 2},
{'name': 'Robert', 'id': 3},
{'name': 'Mary', 'id': 4},
{'name': 'Daniel', 'id': 5},
{'name': 'Laura', 'id': 6},
{'name': 'John', 'id': 7},
{'name': 'Debra', 'id': 8},
{'name': 'Aron', 'id': 9},
{'name': 'Ann', 'id': 10},
{'name': 'Steve', 'id': 11},
{'name': 'Olivia', 'id': 12}
]
}
render() {
return (
<View>
<ScrollView>
{
this.state.names.map((item, index) => (
<View key = {item.id} style = {styles.item}>
<Text>{item.name}</Text>
</View>
))
}
</ScrollView>
</View>
)
}
}
export default ScrollViewExample
const styles = StyleSheet.create ({
item: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: 30,
margin: 2,
borderColor: '#2a4944',
borderWidth: 1,
backgroundColor: '#d2f7f1'
}
})
Quando executamos o aplicativo, veremos a lista de nomes rolável.
Neste capítulo, entenderemos como trabalhar com imagens no React Native.
Adicionando Imagem
Vamos criar uma nova pasta img dentro de srcpasta. Vamos adicionar nossa imagem (myImage.png) dentro desta pasta.
Vamos mostrar imagens na tela inicial.
App.js
import React from 'react';
import ImagesExample from './ImagesExample.js'
const App = () => {
return (
<ImagesExample />
)
}
export default App
A imagem local pode ser acessada usando a seguinte sintaxe.
image_example.js
import React, { Component } from 'react'
import { Image } from 'react-native'
const ImagesExample = () => (
<Image source = {require('C:/Users/Tutorialspoint/Desktop/NativeReactSample/logo.png')} />
)
export default ImagesExample
Resultado
Densidade da tela
React Native oferece uma maneira de otimizar imagens para diferentes dispositivos usando @2x, @3xsufixo. O aplicativo carregará apenas a imagem necessária para uma densidade de tela específica.
A seguir estão os nomes da imagem dentro do img pasta.
[email protected]
[email protected]
Imagens de rede
Ao usar imagens de rede, em vez de require, precisamos do sourcepropriedade. Recomenda-se definir owidth e a height para imagens de rede.
App.js
import React from 'react';
import ImagesExample from './image_example.js'
const App = () => {
return (
<ImagesExample />
)
}
export default App
image_example.js
import React, { Component } from 'react'
import { View, Image } from 'react-native'
const ImagesExample = () => (
<Image source = {{uri:'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'}}
style = {{ width: 200, height: 200 }}
/>
)
export default ImagesExample
Resultado
Neste capítulo, mostraremos como usar fetch para lidar com solicitações de rede.
App.js
import React from 'react';
import HttpExample from './http_example.js'
const App = () => {
return (
<HttpExample />
)
}
export default App
Usando Fetch
Vamos usar o componentDidMountmétodo de ciclo de vida para carregar os dados do servidor assim que o componente é montado. Esta função enviará uma solicitação GET ao servidor, retornará dados JSON, registrará a saída para o console e atualizará nosso estado.
http_example.js
import React, { Component } from 'react'
import { View, Text } from 'react-native'
class HttpExample extends Component {
state = {
data: ''
}
componentDidMount = () => {
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'GET'
})
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson);
this.setState({
data: responseJson
})
})
.catch((error) => {
console.error(error);
});
}
render() {
return (
<View>
<Text>
{this.state.data.body}
</Text>
</View>
)
}
}
export default HttpExample
Resultado
Neste capítulo, mostraremos os componentes tocáveis no react Native. Nós os chamamos de 'tocáveis' porque oferecem animações integradas e podemos usar oonPress suporte para manipulação de eventos de toque.
O Facebook oferece o Buttoncomponente, que pode ser usado como um botão genérico. Considere o seguinte exemplo para entender o mesmo.
App.js
import React, { Component } from 'react'
import { Button } from 'react-native'
const App = () => {
const handlePress = () => false
return (
<Button
onPress = {handlePress}
title = "Red button!"
color = "red"
/>
)
}
export default App
Se o padrão Button componente não atende às suas necessidades, você pode usar um dos seguintes componentes.
Opacidade tocável
Este elemento mudará a opacidade de um elemento quando tocado.
App.js
import React from 'react'
import { TouchableOpacity, StyleSheet, View, Text } from 'react-native'
const App = () => {
return (
<View style = {styles.container}>
<TouchableOpacity>
<Text style = {styles.text}>
Button
</Text>
</TouchableOpacity>
</View>
)
}
export default App
const styles = StyleSheet.create ({
container: {
alignItems: 'center',
},
text: {
borderWidth: 1,
padding: 25,
borderColor: 'black',
backgroundColor: 'red'
}
})
Destaque tocável
Quando um usuário pressiona o elemento, ele fica mais escuro e a cor subjacente aparece.
App.js
import React from 'react'
import { View, TouchableHighlight, Text, StyleSheet } from 'react-native'
const App = (props) => {
return (
<View style = {styles.container}>
<TouchableHighlight>
<Text style = {styles.text}>
Button
</Text>
</TouchableHighlight>
</View>
)
}
export default App
const styles = StyleSheet.create ({
container: {
alignItems: 'center',
},
text: {
borderWidth: 1,
padding: 25,
borderColor: 'black',
backgroundColor: 'red'
}
})
Feedback nativo tocável
Isso simulará a animação da tinta quando o elemento for pressionado.
App.js
import React from 'react'
import { View, TouchableNativeFeedback, Text, StyleSheet } from 'react-native'
const Home = (props) => {
return (
<View style = {styles.container}>
<TouchableNativeFeedback>
<Text style = {styles.text}>
Button
</Text>
</TouchableNativeFeedback>
</View>
)
}
export default Home
const styles = StyleSheet.create ({
container: {
alignItems: 'center',
},
text: {
borderWidth: 1,
padding: 25,
borderColor: 'black',
backgroundColor: 'red'
}
})
Tocável sem feedback
Isso deve ser usado quando você deseja manipular o evento de toque sem qualquer animação. Normalmente, este componente não é muito usado.
<TouchableWithoutFeedback>
<Text>
Button
</Text>
</TouchableWithoutFeedback>
Neste capítulo, mostraremos como usar LayoutAnimation em React Native.
Componente de Animações
Vamos definir myStylecomo propriedade do estado. Esta propriedade é usada para estilizar um elemento dentroPresentationalAnimationComponent.
Também criaremos duas funções - expandElement e collapseElement. Essas funções irão atualizar os valores do estado. O primeiro usará ospring animação predefinida, enquanto a segunda terá o linearpredefinido. Vamos passar isso como adereços também. oExpand e a Collapse botões chamam o expandElement() e collapseElement() funções.
Neste exemplo, vamos alterar dinamicamente a largura e a altura da caixa. Desde oHome componente será o mesmo, vamos apenas mudar o Animations componente.
App.js
import React, { Component } from 'react'
import { View, StyleSheet, Animated, TouchableOpacity } from 'react-native'
class Animations extends Component {
componentWillMount = () => {
this.animatedWidth = new Animated.Value(50)
this.animatedHeight = new Animated.Value(100)
}
animatedBox = () => {
Animated.timing(this.animatedWidth, {
toValue: 200,
duration: 1000
}).start()
Animated.timing(this.animatedHeight, {
toValue: 500,
duration: 500
}).start()
}
render() {
const animatedStyle = { width: this.animatedWidth, height: this.animatedHeight }
return (
<TouchableOpacity style = {styles.container} onPress = {this.animatedBox}>
<Animated.View style = {[styles.box, animatedStyle]}/>
</TouchableOpacity>
)
}
}
export default Animations
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center'
},
box: {
backgroundColor: 'blue',
width: 50,
height: 100
}
})
O React native oferece alguns métodos que ajudam na depuração do seu código.
No menu do desenvolvedor de aplicativos
Você pode abrir o menu do desenvolvedor no simulador IOS pressionando command + D.
No emulador Android, você precisa pressionar command + M.
Reload- Usado para recarregar o simulador. Você pode usar o atalhocommand + R
Debug JS Remotely - Usado para ativar a depuração dentro do console do desenvolvedor do navegador.
Enable Live Reload- Usado para habilitar o recarregamento ao vivo sempre que seu código for salvo. O depurador abrirá àslocalhost:8081/debugger-ui.
Start Systrace - Usado para iniciar a ferramenta de criação de perfil baseada em marcador Android.
Show Inspector- Usado para abrir o inspetor onde você pode encontrar informações sobre seus componentes. Você pode usar o atalhocommand + I
Show Perf Monitor - O monitor de desempenho é usado para monitorar o desempenho do seu aplicativo.
Neste capítulo, entenderemos a navegação no React Native.
Etapa 1: instalar o roteador
Para começar, precisamos instalar o Router. Usaremos o React Native Router Flux neste capítulo. Você pode executar o seguinte comando no terminal, a partir da pasta do projeto.
npm i react-native-router-flux --save
Etapa 2: aplicativo inteiro
Como queremos que nosso roteador lide com todo o aplicativo, vamos adicioná-lo em index.ios.js. Para Android, você pode fazer o mesmo emindex.android.js.
App.js
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
import Routes from './Routes.js'
class reactTutorialApp extends Component {
render() {
return (
<Routes />
)
}
}
export default reactTutorialApp
AppRegistry.registerComponent('reactTutorialApp', () => reactTutorialApp)
Etapa 3: adicionar roteador
Agora vamos criar o Routescomponente dentro da pasta de componentes. Vai voltarRoutercom várias cenas. Cada cena vai precisarkey, component e title. O roteador usa a propriedade key para alternar entre as cenas, o componente será renderizado na tela e o título será mostrado na barra de navegação. Também podemos definir oinitial propriedade para a cena que deve ser renderizada inicialmente.
Routes.js
import React from 'react'
import { Router, Scene } from 'react-native-router-flux'
import Home from './Home.js'
import About from './About.js'
const Routes = () => (
<Router>
<Scene key = "root">
<Scene key = "home" component = {Home} title = "Home" initial = {true} />
<Scene key = "about" component = {About} title = "About" />
</Scene>
</Router>
)
export default Routes
Etapa 4: criar componentes
Nós já temos o Homecomponente de capítulos anteriores; agora, precisamos adicionar oAboutcomponente. Nós vamos adicionar ogoToAbout e a goToHome funções para alternar entre as cenas.
Home.js
import React from 'react'
import { TouchableOpacity, Text } from 'react-native';
import { Actions } from 'react-native-router-flux';
const Home = () => {
const goToAbout = () => {
Actions.about()
}
return (
<TouchableOpacity style = {{ margin: 128 }} onPress = {goToAbout}>
<Text>This is HOME!</Text>
</TouchableOpacity>
)
}
export default Home
About.js
import React from 'react'
import { TouchableOpacity, Text } from 'react-native'
import { Actions } from 'react-native-router-flux'
const About = () => {
const goToHome = () => {
Actions.home()
}
return (
<TouchableOpacity style = {{ margin: 128 }} onPress = {goToHome}>
<Text>This is ABOUT</Text>
</TouchableOpacity>
)
}
export default About
O aplicativo irá renderizar o Home tela.
Você pode pressionar o botão para alternar para a tela sobre. A seta Voltar aparecerá; você pode usá-lo para voltar à tela anterior.
Se você quiser testar seu aplicativo no simulador IOS, tudo que você precisa é abrir a pasta raiz do seu aplicativo no terminal e executar -
react-native run-ios
O comando acima irá iniciar o simulador e executar o aplicativo.
Também podemos especificar o dispositivo que queremos usar.
react-native run-ios --simulator "iPhone 5s
Depois de abrir o aplicativo no simulador, você pode pressionar command + Dno IOS para abrir o menu de desenvolvedores. Você pode verificar mais sobre isso em nossodebugging capítulo.
Você também pode recarregar o simulador IOS pressionando command + R.
Podemos executar o aplicativo React Native na plataforma Android executando o seguinte código no terminal.
react-native run-android
Antes de executar seu aplicativo no dispositivo Android, é necessário habilitar USB Debugging dentro de Developer Options.
Quando USB Debugging estiver habilitado, você pode conectar seu dispositivo e executar o trecho de código fornecido acima.
O emulador nativo do Android é lento. Recomendamos baixar Genymotion para testar seu aplicativo.
O menu do desenvolvedor pode ser acessado pressionando command + M.
View é o elemento mais comum no React Native. Você pode considerá-lo um equivalente dodiv elemento usado no desenvolvimento web.
Casos de Uso
Vejamos agora alguns casos de uso comuns.
Quando você precisar envolver seus elementos dentro do contêiner, você pode usar View como um elemento de contêiner.
Quando você deseja aninhar mais elementos dentro do elemento pai, tanto o pai quanto o filho podem ser View. Ele pode ter quantos filhos você quiser.
Quando quiser estilizar diferentes elementos, você pode colocá-los dentro View uma vez que suporta style propriedade, flexbox etc.
View também oferece suporte a eventos de toque sintético, que podem ser úteis para diferentes fins.
Já usamos Viewem nossos capítulos anteriores e nós o usaremos em quase todos os capítulos subsequentes também. oViewpode ser assumido como um elemento padrão no React Native. No exemplo fornecido a seguir, aninharemos duas visualizações e um texto.
App.js
import React, { Component } from 'react'
import { View, Text } from 'react-native'
const App = () => {
return (
<View>
<View>
<Text>This is my text</Text>
</View>
</View>
)
}
export default App
Resultado
Neste capítulo, aprenderemos como usar o WebView. É usado quando você deseja renderizar uma página da web para seu aplicativo móvel embutido.
Usando WebView
o HomeContainer será um componente de contêiner.
App.js
import React, { Component } from 'react'
import WebViewExample from './web_view_example.js'
const App = () => {
return (
<WebViewExample/>
)
}
export default App;
Vamos criar um novo arquivo chamado WebViewExample.js dentro de src/components/home pasta.
web_view_example.js
import React, { Component } from 'react'
import { View, WebView, StyleSheet }
from 'react-native'
const WebViewExample = () => {
return (
<View style = {styles.container}>
<WebView
source = {{ uri:
'https://www.google.com/?gws_rd=cr,ssl&ei=SICcV9_EFqqk6ASA3ZaABA#q=tutorialspoint' }}
/>
</View>
)
}
export default WebViewExample;
const styles = StyleSheet.create({
container: {
height: 350,
}
})
O programa acima irá gerar a seguinte saída.
Neste capítulo, mostraremos como usar o componente modal no React Native.
Vamos agora criar um novo arquivo: ModalExample.js
Vamos colocar a lógica dentro ModalExample. Podemos atualizar o estado inicial executando otoggleModal.
Depois de atualizar o estado inicial executando o toggleModal, vamos definir o visiblepropriedade para o nosso modal. Este prop será atualizado quando o estado mudar.
o onRequestClose é necessário para dispositivos Android.
App.js
import React, { Component } from 'react'
import WebViewExample from './modal_example.js'
const Home = () => {
return (
<WebViewExample/>
)
}
export default Home;
modal_example.js
import React, { Component } from 'react';
import { Modal, Text, TouchableHighlight, View, StyleSheet}
from 'react-native'
class ModalExample extends Component {
state = {
modalVisible: false,
}
toggleModal(visible) {
this.setState({ modalVisible: visible });
}
render() {
return (
<View style = {styles.container}>
<Modal animationType = {"slide"} transparent = {false}
visible = {this.state.modalVisible}
onRequestClose = {() => { console.log("Modal has been closed.") } }>
<View style = {styles.modal}>
<Text style = {styles.text}>Modal is open!</Text>
<TouchableHighlight onPress = {() => {
this.toggleModal(!this.state.modalVisible)}}>
<Text style = {styles.text}>Close Modal</Text>
</TouchableHighlight>
</View>
</Modal>
<TouchableHighlight onPress = {() => {this.toggleModal(true)}}>
<Text style = {styles.text}>Open Modal</Text>
</TouchableHighlight>
</View>
)
}
}
export default ModalExample
const styles = StyleSheet.create ({
container: {
alignItems: 'center',
backgroundColor: '#ede3f2',
padding: 100
},
modal: {
flex: 1,
alignItems: 'center',
backgroundColor: '#f7021a',
padding: 100
},
text: {
color: '#3f2949',
marginTop: 10
}
})
Nossa tela inicial será semelhante a esta -
Se clicarmos no botão, o modal será aberto.
Neste capítulo, mostraremos como usar o indicador de atividade no React Native.
Etapa 1: aplicativo
App componente será usado para importar e mostrar nosso ActivityIndicator.
App.js
import React from 'react'
import ActivityIndicatorExample from './activity_indicator_example.js'
const Home = () => {
return (
<ActivityIndicatorExample />
)
}
export default Home
Etapa 2: ActivityIndicatorExample
A propriedade Animating é um booleano que é usado para mostrar o indicador de atividade. Este último fecha seis segundos após o componente ser montado. Isso é feito usando ocloseActivityIndicator() função.
activity_indicator_example.js
import React, { Component } from 'react';
import { ActivityIndicator, View, Text, TouchableOpacity, StyleSheet } from 'react-native';
class ActivityIndicatorExample extends Component {
state = { animating: true }
closeActivityIndicator = () => setTimeout(() => this.setState({
animating: false }), 60000)
componentDidMount = () => this.closeActivityIndicator()
render() {
const animating = this.state.animating
return (
<View style = {styles.container}>
<ActivityIndicator
animating = {animating}
color = '#bc2b78'
size = "large"
style = {styles.activityIndicator}/>
</View>
)
}
}
export default ActivityIndicatorExample
const styles = StyleSheet.create ({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 70
},
activityIndicator: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
height: 80
}
})
Quando rodarmos o aplicativo, veremos o carregador na tela. Ele desaparecerá após seis segundos.
Neste capítulo, criaremos um Selecionador simples com duas opções disponíveis.
Etapa 1: Criar arquivo
Aqui o App.js pasta será usada como um componente de apresentação.
App.js
import React from 'react'
import PickerExample from './PickerExample.js'
const App = () => {
return (
<PickerExample />
)
}
export default App
Etapa 2: lógica
this.state.user é usado para controle do seletor.
o updateUser A função será acionada quando um usuário for escolhido.
PickerExample.js
import React, { Component } from 'react';
import { View, Text, Picker, StyleSheet } from 'react-native'
class PickerExample extends Component {
state = {user: ''}
updateUser = (user) => {
this.setState({ user: user })
}
render() {
return (
<View>
<Picker selectedValue = {this.state.user} onValueChange = {this.updateUser}>
<Picker.Item label = "Steve" value = "steve" />
<Picker.Item label = "Ellen" value = "ellen" />
<Picker.Item label = "Maria" value = "maria" />
</Picker>
<Text style = {styles.text}>{this.state.user}</Text>
</View>
)
}
}
export default PickerExample
const styles = StyleSheet.create({
text: {
fontSize: 30,
alignSelf: 'center',
color: 'red'
}
})
Resultado
Se você clicar no nome, verá todas as três opções como -
E você pode escolher um deles e a saída será semelhante.
Neste capítulo, mostraremos como controlar a aparência da barra de status no React Native.
A barra de status é fácil de usar e tudo que você precisa fazer é definir propriedades para alterá-la.
o hiddenpropriedade pode ser usada para ocultar a barra de status. Em nosso exemplo, é definido comofalse. Este é o valor padrão.
o barStyle pode ter três valores - dark-content, light-content e default.
Este componente possui várias outras propriedades que podem ser utilizadas. Alguns deles são específicos para Android ou IOS. Você pode verificar isso na documentação oficial.
App.js
import React, { Component } from 'react';
import { StatusBar } from 'react-native'
const App = () => {
return (
<StatusBar barStyle = "dark-content" hidden = {false} backgroundColor = "#00BCD4" translucent = {true}/>
)
}
export default App
Se executarmos o aplicativo, a barra de status ficará visível e o conteúdo terá uma cor escura.
Resultado
Neste capítulo, vamos explicar o Switch componente em algumas etapas.
Etapa 1: Criar arquivo
Vamos usar o HomeContainer componente para lógica, mas precisamos criar o componente de apresentação.
Vamos agora criar um novo arquivo: SwitchExample.js.
Etapa 2: lógica
Estamos transferindo valor do state e funções para alternar itens de troca para SwitchExamplecomponente. As funções de alternância serão usadas para atualizar o estado.
App.js
import React, { Component } from 'react'
import { View } from 'react-native'
import SwitchExample from './switch_example.js'
export default class HomeContainer extends Component {
constructor() {
super();
this.state = {
switch1Value: false,
}
}
toggleSwitch1 = (value) => {
this.setState({switch1Value: value})
console.log('Switch 1 is: ' + value)
}
render() {
return (
<View>
<SwitchExample
toggleSwitch1 = {this.toggleSwitch1}
switch1Value = {this.state.switch1Value}/>
</View>
);
}
}
Etapa 3: Apresentação
O componente de switch leva dois adereços. oonValueChangeprop irá acionar nossas funções de alternância após um usuário pressionar o botão. ovalue prop é vinculado ao estado do HomeContainer componente.
switch_example.js
import React, { Component } from 'react'
import { View, Switch, StyleSheet }
from 'react-native'
export default SwitchExample = (props) => {
return (
<View style = {styles.container}>
<Switch
onValueChange = {props.toggleSwitch1}
value = {props.switch1Value}/>
</View>
)
}
const styles = StyleSheet.create ({
container: {
flex: 1,
alignItems: 'center',
marginTop: 100
}
})
Se pressionarmos o botão, o estado será atualizado. Você pode verificar os valores no console.
Resultado
Neste capítulo, vamos falar sobre Text componente no React Native.
Este componente pode ser aninhado e pode herdar propriedades de pai para filho. Isso pode ser útil de várias maneiras. Mostraremos um exemplo de capitalização da primeira letra, estilização de palavras ou partes do texto, etc.
Etapa 1: Criar arquivo
O arquivo que vamos criar é text_example.js
Etapa 2: App.js
Nesta etapa, criaremos apenas um contêiner simples.
App.js
import React, { Component } from 'react'
import TextExample from './text_example.js'
const App = () => {
return (
<TextExample/>
)
}
export default App
Etapa 3: Texto
Nesta etapa, usaremos o padrão de herança. styles.text será aplicado a todos Text componentes.
Você também pode notar como definimos outras propriedades de estilo para algumas partes do texto. É importante saber que todos os elementos filhos têm estilos pais passados para eles.
text_example.js
import React, { Component } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native'
const TextExample = () => {
return (
<View style = {styles.container}>
<Text style = {styles.text}>
<Text style = {styles.capitalLetter}>
L
</Text>
<Text>
orem ipsum dolor sit amet, sed do eiusmod.
</Text>
<Text>
Ut enim ad <Text style = {styles.wordBold}>minim </Text> veniam,
quis aliquip ex ea commodo consequat.
</Text>
<Text style = {styles.italicText}>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
</Text>
<Text style = {styles.textShadow}>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</Text>
</Text>
</View>
)
}
export default TextExample
const styles = StyleSheet.create ({
container: {
alignItems: 'center',
marginTop: 100,
padding: 20
},
text: {
color: '#41cdf4',
},
capitalLetter: {
color: 'red',
fontSize: 20
},
wordBold: {
fontWeight: 'bold',
color: 'black'
},
italicText: {
color: '#37859b',
fontStyle: 'italic'
},
textShadow: {
textShadowColor: 'red',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius : 5
}
})
Você receberá a seguinte saída -
Neste capítulo, vamos entender como criar Alert componente.
Etapa 1: App.js
import React from 'react'
import AlertExample from './alert_example.js'
const App = () => {
return (
<AlertExample />
)
}
export default App
Etapa 2: alert_example.js
Vamos criar um botão para acionar o showAlert função.
import React from 'react'
import { Alert, Text, TouchableOpacity, StyleSheet } from 'react-native'
const AlertExample = () => {
const showAlert = () =>{
Alert.alert(
'You need to...'
)
}
return (
<TouchableOpacity onPress = {showAlert} style = {styles.button}>
<Text>Alert</Text>
</TouchableOpacity>
)
}
export default AlertExample
const styles = StyleSheet.create ({
button: {
backgroundColor: '#4ba37b',
width: 100,
borderRadius: 50,
alignItems: 'center',
marginTop: 100
}
})
Resultado
Ao clicar no botão, você verá o seguinte -
Neste capítulo, mostraremos como usar Geolocation.
Etapa 1: App.js
import React from 'react'
import GeolocationExample from './geolocation_example.js'
const App = () => {
return (
<GeolocationExample />
)
}
export default App
Etapa 2: geolocalização
Começaremos definindo o estado inicial para que mantenha a posição inicial e a última.
Agora, precisamos obter a posição atual do dispositivo quando um componente é montado usando o navigator.geolocation.getCurrentPosition. Vamos restringir a resposta para que possamos atualizar o estado.
navigator.geolocation.watchPositioné usado para rastrear a posição dos usuários. Também liberamos os observadores nesta etapa.
AsyncStorageExample.js
import React, { Component } from 'react'
import { View, Text, Switch, StyleSheet} from 'react-native'
class SwichExample extends Component {
state = {
initialPosition: 'unknown',
lastPosition: 'unknown',
}
watchID: ?number = null;
componentDidMount = () => {
navigator.geolocation.getCurrentPosition(
(position) => {
const initialPosition = JSON.stringify(position);
this.setState({ initialPosition });
},
(error) => alert(error.message),
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
);
this.watchID = navigator.geolocation.watchPosition((position) => {
const lastPosition = JSON.stringify(position);
this.setState({ lastPosition });
});
}
componentWillUnmount = () => {
navigator.geolocation.clearWatch(this.watchID);
}
render() {
return (
<View style = {styles.container}>
<Text style = {styles.boldText}>
Initial position:
</Text>
<Text>
{this.state.initialPosition}
</Text>
<Text style = {styles.boldText}>
Current position:
</Text>
<Text>
{this.state.lastPosition}
</Text>
</View>
)
}
}
export default SwichExample
const styles = StyleSheet.create ({
container: {
flex: 1,
alignItems: 'center',
marginTop: 50
},
boldText: {
fontSize: 30,
color: 'red',
}
})
Neste capítulo, mostraremos como persistir seus dados usando AsyncStorage.
Etapa 1: Apresentação
Nesta etapa, criaremos o App.js Arquivo.
import React from 'react'
import AsyncStorageExample from './async_storage_example.js'
const App = () => {
return (
<AsyncStorageExample />
)
}
export default App
Etapa 2: lógica
Namedo estado inicial é uma string vazia. Iremos atualizá-lo do armazenamento persistente quando o componente for montado.
setName pegará o texto do nosso campo de entrada, salve-o usando AsyncStorage e atualizar o estado.
async_storage_example.js
import React, { Component } from 'react'
import { StatusBar } from 'react-native'
import { AsyncStorage, Text, View, TextInput, StyleSheet } from 'react-native'
class AsyncStorageExample extends Component {
state = {
'name': ''
}
componentDidMount = () => AsyncStorage.getItem('name').then((value) => this.setState({ 'name': value }))
setName = (value) => {
AsyncStorage.setItem('name', value);
this.setState({ 'name': value });
}
render() {
return (
<View style = {styles.container}>
<TextInput style = {styles.textInput} autoCapitalize = 'none'
onChangeText = {this.setName}/>
<Text>
{this.state.name}
</Text>
</View>
)
}
}
export default AsyncStorageExample
const styles = StyleSheet.create ({
container: {
flex: 1,
alignItems: 'center',
marginTop: 50
},
textInput: {
margin: 5,
height: 100,
borderWidth: 1,
backgroundColor: '#7685ed'
}
})
Quando executamos o aplicativo, podemos atualizar o texto digitando no campo de entrada.