Bootstrongtech DevWeb and Mobile

React Native - Guia Rápido

Rápido desenvolvimento de aplicativos móveis nativos

React Native - Guia Rápido

---

---

---

O React Native é uma estrutura JavaScript para criar aplicativos móveis nativos. Ele usa o framework React e oferece grande quantidade de componentes e APIs internos.

Público

Este tutorial foi desenvolvido para desenvolvedores de JavaScript e React que desejam aprender habilidades de desenvolvimento móvel. Ao seguir este curso, você expandirá seus conhecimentos em React e JavaScript, aprenderá alguns conceitos de programação funcional e se preparará para entrar no mundo móvel. Como o mundo do JavaScript está avançando, nós o acompanharemos e usaremos a sintaxe do EC6 neste tutorial.

Pré-requisitos

Para poder seguir este tutorial, você deve estar familiarizado com o React e ter um sólido conhecimento de JavaScript. Mesmo que você não tenha experiência anterior com o React, você deve ser capaz de segui-lo. Neste tutorial, vamos explicar alguns conceitos fundamentais do React.

Para uma melhor compreensão dos conceitos React Native, vamos emprestar algumas linhas da documentação oficial -

O React Native permite que você crie aplicativos móveis usando apenas JavaScript. Ele usa o mesmo design que o React, permitindo compor uma rica interface de usuário móvel a partir de componentes declarativos. Com o React Native, você não cria um aplicativo da Web para dispositivos móveis, um aplicativo HTML5 ou um aplicativo híbrido. você cria um aplicativo móvel real que é indistinguível de um aplicativo criado usando o Objective-C ou o Java. O React Native usa os mesmos blocos de construção fundamentais da interface do usuário dos aplicativos iOS e Android comuns. Você apenas coloca esses blocos de construção juntos usando JavaScript e React.

A seguir estão os recursos do React Native -

• React - Esta é uma estrutura para criar aplicativos da web e móveis usando JavaScript.
• Native - você pode usar componentes nativos controlados pelo JavaScript.
• Plataformas - Reagir Native suporta plataforma IOS e Android.

Siga as vantagens do React Native -

• JavaScript - Você pode usar o conhecimento JavaScript existente para criar aplicativos móveis nativos.
• Compartilhamento de código - você pode compartilhar a maior parte do seu código em diferentes plataformas.
• Comunidade - A comunidade em torno de React and React Native é grande e você poderá encontrar qualquer resposta que precisar.

A seguir estão as limitações de Reagir Nativa -

• Componentes nativos - Se você deseja criar uma funcionalidade nativa que ainda não foi criada, será necessário escrever algum código específico da plataforma.

Configuração do Ambiente

Etapa 1: Instale o aplicativo nativo de criar e reagir

Há algumas coisas que você precisa instalar para configurar o ambiente do React Native. Nós usaremos o OSX como nossa plataforma de construção.

Depois de instalar o NodeJS e o NPM com sucesso em seu sistema, você pode prosseguir com a instalação do aplicativo nativo de criar (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 nativo de reação, 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 o nome especificado é criada com o seguinte conteúdo.

Etapa 3: NodeJS Python Jdk8

Certifique-se de ter o Python NodeJS e o jdk8 instalados em seu sistema, caso contrário, instale-os. Além destes, recomenda-se instalar a versão mais recente do fio para evitar certos problemas.

Etapa 4: Instalar o React Native CLI

Você pode instalar a interface de linha de comando nativa do react no npm, usando o comando install -greagn-native-cli como mostrado abaixo.

npm install -g react-native-cli

Etapa 5: Comece a reactive native

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, como mostrado abaixo.

Como instruído, uma maneira de executar aplicativos nativos no seu dispositivo Android é usar o expo. Instale o cliente expo no seu dispositivo Android e escaneie o código QR obtido acima.

Etapa 6: ejetar o projeto

Se você deseja executar o emulador android usando o android studio, saia da linha de comando atual pressionando ctrl + c .

Em seguida, executar executar comando de ejeção como

npm run eject

Isto pede-lhe opções para ejetar, selecione o primeiro usando setas e pressione enter.

Em seguida, você deve sugerir o nome do aplicativo na tela inicial e no nome do projeto do estúdio Android e dos projetos Xcode.

Embora seu projeto seja ejetado com sucesso, você pode receber um erro como -

Ignore este erro e execute react native 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 faça o download do android studio.

Depois de baixar o arquivo de instalação, clique duas vezes nele e continue com a instalação.

Etapa 8: Configurando o AVD Manager

Para configurar o Gerenciador de AVD, clique no respectivo ícone na barra de menus.

Etapa 9: Configurando o AVD Manager

Escolha uma definição de dispositivo, o Nexus 5X é recomendável.

Clique no botão Next para ver a janela System Image. Selecione a guia x86 Images .

Em seguida, selecione Marshmallow e clique em Avançar.

Finalmente, clique no botão Finish para finalizar a configuração do AVD.

Depois de configurar o seu dispositivo virtual, clique no botão play na coluna Actions para iniciar seu emulador do Android.

Passo 10: Correr android

Abra o prompt de comando, navegue pela pasta do projeto e execute o comando run-android nativo .

Em seguida, a execução do seu aplicativo começa em outro prompt para que você possa ver seu status.

No seu emulador do Android, você pode ver a execução do aplicativo padrão como -

Etapa 11: local.properties

Abra a pasta android na pasta do projeto SampleReactNative / android(neste caso). Crie um arquivo com o nome local.properties e inclua o seguinte caminho nele.

sdk.dir = /C:\\Users\\Tutorialspoint\\AppData\\Local\\Android\\Sdk

aqui, substitua Tutorialspoint pelo seu nome de usuário.

Etapa 12: Recarregamento a quente

E para criar aplicativos, modifique o App.js e as alterações serão atualizadas automaticamente no emulador do Android.

Caso contrário, clique no emulador do Android pressione ctrl + m e selecione Ativar opção de recarregamento a quente .

App

Se você abrir o aplicativo padrão, poderá observar que o arquivo app.js se parece

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

Saída

Olá Mundo

Para exibir uma mensagem simples dizendo “Bem-vindo ao Tutorialspoint”, remova a parte CSS e insira a mensagem a ser impressa encapsulada 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>
      );
   }
}

Estado

Os dados dentro do React Components são gerenciados por estado e props . Neste capítulo, vamos falar sobre o estado .

Diferença entre Estado e Adereços

O estado é mutável enquanto os suportes são imutáveis. Isso significa que o estado pode ser atualizado no futuro, enquanto os acessórios não podem ser atualizados.

Usando o estado

Este é o nosso componente raiz. Estamos apenas importando o Lar 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 captura de tela a seguir.

Estado de atualização

Como state é mutável, podemos atualizá-lo criando a função deleteState e chamá-lo usando o evento onPress = {this.deleteText} .

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;

NOTAS - Em todos os capítulos, usaremos a sintaxe de classe para componentes com estado (contêiner) e sintaxe de função para componentes sem estado (apresentação). Vamos aprender 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 essa sintaxe usa o escopo léxico e essa palavra - chave será vinculada ao objeto de ambiente (Classe). Isso às vezes leva a um comportamento inesperado.

A outra maneira de definir métodos é usar as funções do EC5, mas, nesse caso, precisaremos vincular isso manualmente no construtor. Considere o seguinte exemplo para entender isso.

class Home extends Component {
   constructor() {
      super()
      this.updateState = this.updateState.bind(this)
   }
   updateState() {
      //
   }
   render() {
      //
   }
}

Props

Em nosso último capítulo, mostramos como usar o estado mutável . Neste capítulo, mostraremos como combinar o estado e os adereços .

Componentes de apresentação devem obter todos os dados passando props . Somente componentes do contêiner devem ter estado .

Componente de contêiner

Vamos agora entender o que é um componente de contêiner e como ele funciona.

Teoria

Agora vamos atualizar nosso componente contêiner. Esse componente manipulará o estado e passará os props para o componente de apresentação.

O componente de 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 elemento Text da função render, pois esse elemento é usado para apresentar texto aos usuários. Isso deve estar dentro do componente de apresentação.

Vamos revisar o código no exemplo abaixo. Vamos importar o PresentationalComponent e passá-lo para a função render.

Depois de importarmos o PresentationalComponent e passá-lo para a função render, precisamos passar os props. Vamos passar os objetos adicionando myText = {this.state.myText} e deleteText = {this.deleteText} a <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

Vamos agora entender o que é um componente de apresentação e também como ele funciona.

Teoria

Os componentes de apresentação devem ser usados ​​apenas para apresentar a visão aos usuários. Esses componentes não possuem estado. Eles recebem todos os dados e funções como adereços.

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á props, retornará elementos de visualização, apresentará texto usando {props.myText} e chamará a função {props.deleteText} quando um usuário clicar 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 do nosso capítulo sobre o estado . A única diferença é que refatoramos nosso código no contêiner e no componente de apresentação.

Você pode executar o aplicativo e ver o texto como na captura de tela a seguir.

Se você clicar no texto, ele será removido da tela.

Estilo

Existem algumas maneiras de estilizar seus elementos no React Native.

Você pode usar a propriedade style para adicionar os estilos inline. No entanto, essa não é a melhor prática porque pode ser difícil ler o código.

Neste capítulo, usaremos a folha de estilo para estilização.

Componente de contêiner

Nesta seção, simplificaremos nosso componente 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, importaremos a StyleSheet . Na parte inferior do arquivo, vamos criar nossa folha de estilo e atribuí-la à constante de estilos . Note que nossos estilos estão no camelCase e não usamos px ou% para estilização.

Para aplicar estilos ao nosso texto, precisamos adicionar a propriedade style = {styles.myText} ao elemento Text .

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

Quando executamos o aplicativo, receberemos a seguinte saída.

Flexbox

Para acomodar diferentes tamanhos de tela, o React Native oferece suporte a Flexbox .

Nós usaremos o mesmo código que usamos no nosso capítulo React Native - Styling . Vamos apenas mudar o PresentationalComponent .

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	'centro', '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	'centro', 'flex-start', 'flex-end', 'alongado'	Usado para determinar como os elementos devem ser distribuídos dentro do contêiner ao longo do eixo secundário (oposto de flexDirection)

Se você quiser alinhar os itens verticalmente e centralizá-los, poderá usar o seguinte código.

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

Saída

Se os itens precisarem ser movidos para o lado direito e os espaços precisarem ser adicionados entre eles, poderemos usar o seguinte código.

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

ListView

Neste capítulo, mostraremos como criar uma lista no React Native. Nós vamos importar lista em nosso componente Home 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 método map () . Isso iterará sobre uma matriz de itens e renderizará cada um deles.

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 executamos o aplicativo, veremos a lista de nomes.

Você pode clicar em cada item da lista para acionar um alerta com o nome.

Entrada de Texto

Neste capítulo, mostraremos como trabalhar com elementos TextInput no React Native.

O componente Home importará e renderizará 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, criaremos as funções handleEmail e handlePassword . Essas funções são usadas para atualizar o estado.

A função login () apenas alertará o valor atual do estado.

Também adicionaremos outras propriedades às entradas de texto para desativar a capitalização automática, remover a borda inferior dos 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 um dos campos de entrada, o estado será atualizado. Quando clicamos no botão Submit , o texto das entradas será mostrado dentro da caixa de diálogo.

Sempre que digitarmos um dos campos de entrada, o estado será atualizado. Quando clicamos no botão Submit , o texto das entradas será mostrado dentro da caixa de diálogo.

ScrollView

Neste capítulo, mostraremos como trabalhar com o elemento ScrollView .

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 />
   )
}

Scrollview irá renderizar uma lista de nomes. Nós 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áveis.

imagens

Neste capítulo, entenderemos como trabalhar com imagens no Reactive Native.

Adicionando Imagem

Vamos criar uma nova pasta img dentro da pasta src . 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/TutorialBootstrongtech/Desktop/NativeReact/logo.png')} />
)
export default ImagesExample

Saída

Densidade de tela

O React Native oferece uma maneira de otimizar imagens para diferentes dispositivos usando o sufixo @ 2x, @ 3x . O aplicativo carregará apenas a imagem necessária para uma densidade de tela específica.

A seguir, os nomes da imagem dentro da pasta img .

my-image@2x.jpg
my-image@3x.jpg

Imagens de rede

Ao usar imagens de rede, em vez de exigir , precisamos da propriedade de origem . Recomenda-se definir a largura e a altura das imagens da 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://TutorialBootstrongtech.com/profile_images/486929358120964097/gNLINY67_400x400.png'}}   style = {{ width: 200, height: 200 }}
   />
)
export default ImagesExample

Saída

 HTTP

Neste capítulo, mostraremos como usar o fetch para manipular solicitações de rede.

App.js

import React from 'react';
import HttpExample from './http_example.js'

const App = () => {
   return (
      <HttpExample />
   )
}
export default App

Usando o Fetch

Usaremos o método do ciclo de vida componentDidMount para carregar os dados do servidor assim que o componente for montado. Essa função enviará uma solicitação GET ao servidor, retornará dados JSON, registrará a saída no 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

Saída

botões

Neste capítulo, mostraremos componentes palpáveis ​​em react Native. Nós os chamamos de 'palpáveis' porque eles oferecem animações incorporadas e podemos usar o prop onPress para manipular eventos de toque.

O Facebook oferece o componente Button , 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 componente Button padrão não atender às suas necessidades, você poderá usar um dos seguintes componentes.

Opacidade Tocável

Este elemento irá alterar 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 é exibida.

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 de 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ê quiser manipular o evento de toque sem qualquer animação. Normalmente, esse componente não é muito usado.

<TouchableWithoutFeedback>
   <Text>
      Button
   </Text>
</TouchableWithoutFeedback>

Animações

Neste capítulo, mostraremos como usar o LayoutAnimation no React Native.

Componente de Animações

Vamos definir myStyle como uma propriedade do estado. Esta propriedade é usada para estilizar um elemento dentro de PresentationalAnimationComponent .

Também criaremos duas funções - expandElement e collapseElement . Essas funções atualizam valores do estado. O primeiro usará a animação predefinida de mola , enquanto o segundo terá a predefinição linear . Nós vamos passar isso como adereços também. Os botões Expandir e Recolherchamam as funções expandElement () e collapseElement () .

Neste exemplo, alteraremos dinamicamente a largura e a altura da caixa. Como o componente Home será o mesmo, apenas alteraremos o componente Animations .

Neste exemplo, alteraremos dinamicamente a largura e a altura da caixa. Como o componente Home será o mesmo, apenas alteraremos o componente Animations .

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

Debugging

Reactive native oferece alguns métodos que ajudam na depuração de seu código.

No menu do desenvolvedor de aplicativos

Você pode abrir o menu de desenvolvedor no simulador IOS pressionando comando + D .

No emulador Android, você precisa pressionar Command + M .

• Recarregar - Usado para recarregar o simulador. Você pode usar o comando de atalho + R
• Depurar JS Remotamente - Usado para ativar a depuração dentro do console do desenvolvedor do navegador.
• Ativar Live Reload - Usado para ativar o recarregamento ao vivo sempre que seu código for salvo. O depurador será aberto no localhost: 8081 / debugger-ui .
• Start Systrace - Usado para iniciar a ferramenta de criação de perfil baseada em marcadores Android.
• Show Inspector - Usado para abrir o inspetor, onde você pode encontrar informações sobre seus componentes. Você pode usar o comando de atalho + I
• Show Perf Monitor - Perf monitor é usado para acompanhar o desempenho do seu aplicativo.

Rotas

Neste capítulo, entenderemos a navegação no Reactive Native.

Etapa 1: instalar o roteador

Para começar, precisamos instalar o roteador . Nós usaremos o fluxo de roteador nativo do React neste capítulo. Você pode executar o seguinte comando no terminal, na pasta do projeto.

npm i react-native-router-flux --save

Etapa 2: aplicativo inteiro

Como queremos que nosso roteador manipule o aplicativo inteiro, nós o adicionaremos em index.ios.js . Para Android, você pode fazer o mesmo em index.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 componente Routes dentro da pasta de componentes. Ele retornará o roteador com várias cenas. Cada cena precisará de chave, componente e título . 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 a propriedade inicial para a cena que 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

Já temos o componente Home dos capítulos anteriores; agora, precisamos adicionar o componente Sobre . Vamos adicionar as funções goToAbout e goToHome 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 renderizará a tela inicial .

Você pode pressionar o botão para mudar para a tela sobre. A seta Voltar aparecerá; você pode usá-lo para voltar à tela anterior.

Executando o IOS

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 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 o comando + D no IOS para abrir o menu de desenvolvedores. Você pode verificar mais sobre isso em nosso capítulo de depuração .

Você também pode recarregar o simulador IOS pressionando comando + R .

Rodando Android

Podemos executar o aplicativo React Native na plataforma Android executando o seguinte código no terminal.

react-native run-android

Antes de poder executar seu aplicativo no dispositivo Android, você precisa ativar a depuração USB dentro das opções do desenvolvedor .

Quando a depuração USB está ativada, você pode conectar seu dispositivo e executar o snippet de código fornecido acima.

O emulador nativo do Android é lento. Recomendamos fazer o download do Genymotion para testar seu aplicativo.

O menu desenvolvedor pode ser acessada pressionando comando + M .

View

A visualização é o elemento mais comum no React Native. Você pode considerá-lo como um equivalente do elemento div usado no desenvolvimento da web.

Casos de Uso

Vamos ver agora alguns casos de uso comuns.

• Quando você precisa envolver seus elementos dentro do contêiner, você pode usar o View como um elemento de contêiner.
• Quando você deseja aninhar mais elementos dentro do elemento pai, pai e filho podem ser Ver . Pode ter quantos filhos quiser.
• Quando você quer estilizar diferentes elementos, você pode colocá-los dentro do View, já que ele suporta propriedades de estilo , flexboxetc.
• O View também suporta eventos de toque sintético, que podem ser úteis para diferentes propósitos.

Nós já usamos o View em nossos capítulos anteriores e vamos usá-lo em quase todos os capítulos subseqüentes também. A View pode ser considerada como um elemento padrão no React Native. No exemplo abaixo, aninhamos duas Views 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

Saída

WebView

Neste capítulo, aprenderemos a usar o WebView. Ele é usado quando você deseja processar a página da web para seu aplicativo móvel inline.

Usando o 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 da pasta src / components / home .

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.

Modal

Neste capítulo, mostraremos como usar o componente modal no React Native.

Vamos agora criar um novo arquivo: ModalExample.js

Colocaremos a lógica dentro do ModalExample . Podemos atualizar o estado inicial executando o toggleModal .

Depois de atualizar o estado inicial executando o toggleModal , vamos definir a propriedade visible para o nosso modal. Este adereço 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 ficará assim -

Se clicarmos no botão, o modal será aberto.

ActivityIndicator

Neste capítulo, mostraremos como usar o indicador de atividade em React Native.

Etapa 1: aplicativo

O componente de aplicativo 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 de animação é um booleano que é usado para mostrar o indicador de atividade. O último fecha seis segundos após o componente ser montado. Isso é feito usando a função closeActivityIndicator () .

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 executamos o aplicativo, veremos o carregador na tela. Ele desaparecerá depois de seis segundos.

selecionador

Neste capítulo, criaremos o Seletor simples com duas opções disponíveis.

Etapa 1: criar arquivo

Aqui, a pasta App.js 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 o controle do selecionador.

A função updateUser 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'
   }
})

Saída

Se você clicar no nome, você pergunta a todas as três opções como -

E você pode escolher um deles e a saída será como.

Barra de Status

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.

A propriedade oculta pode ser usada para ocultar a barra de status. No nosso exemplo, está definido como falso . Este é o valor padrão.

O barStyle pode ter três valores - conteúdo escuro, conteúdo leve e padrão .

Este componente tem várias outras propriedades que podem ser usadas. Alguns deles são específicos do 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á cor escura.

Saída

Switch

Neste capítulo, explicaremos o componente Switch em alguns passos.

Etapa 1: criar arquivo

Usaremos o componente HomeContainer para lógica, mas precisamos criar o componente de apresentação.

Vamos agora criar um novo arquivo: SwitchExample.js .

Etapa 2: lógica

Estamos passando valor do estado e funções para alternar itens de switch para o componente SwitchExample . 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 troca leva dois adereços. O prop onValueChange ativará nossas funções de alternância depois que um usuário pressionar o comutador. O valor prop é ligado ao estado do componente HomeContainer .

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 interruptor, o estado será atualizado. Você pode verificar valores no console.

Saída

Texto

Neste capítulo, falaremos sobre o componente Text no React Native.

Esse componente pode ser aninhado e herdar propriedades de pai para filho. Isso pode ser útil de várias maneiras. Vamos mostrar-lhe o exemplo de capitalizar a primeira letra, estilizando 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. O styles.text será aplicado a todos os componentes do texto .

Você também pode perceber como definimos outras propriedades de estilo em algumas partes do texto. É importante saber que todos os elementos filho têm estilos pai 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, entenderemos como criar um componente de alertapersonalizado .

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 a função showAlert .

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

Saída

Quando você clica no botão, você verá o seguinte -

Geolocalização

Neste capítulo, mostraremos como usar a geolocalização .

Etapa 1: App.js

import React from 'react'
import GeolocationExample from './geolocation_example.js'

const App = () => {
   return (
      <GeolocationExample />
   )
}
export default App

Etapa 2: localização geográfica

Vamos começar configurando o estado inicial para que mantenha a posição inicial e a última posição.

Agora, precisamos obter a posição atual do dispositivo quando um componente é montado usando o navigator.geolocation.getCurrentPosition . Nós vamos restringir a resposta para que possamos atualizar o estado.

navigator.geolocation.watchPosition é usado para rastrear a posição dos usuários. Também limpamos 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',
   }
})

AsyncStorage

Neste capítulo, mostraremos como persistir seus dados usando o AsyncStorage .

Etapa 1: apresentação

Nesta etapa, criaremos o arquivo App.js.

import React from 'react'
import AsyncStorageExample from './async_storage_example.js'

const App = () => {
   return (
      <AsyncStorageExample />
   )
}
export default App

Etapa 2: lógica

Nome do estado inicial é string vazia. Vamos atualizá-lo a partir do armazenamento persistente quando o componente estiver montado.

setName levará 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.

Beleza pessoal tomara que tenha ajudado, até a próxima!!!