O React é muito simples e eficiente para criar grandes aplicativos. O React Native permite que você use o React para criar aplicativos móveis que funcionam no Android e no iOS.
Neste tutorial, vamos demonstrar como criar aplicativos iOS usando o React Native.
O que é React Native?
O React Native permite que você escreva aplicativos Android e iOS usando JavaScript. Ele usa o conceito de DOM virtual do React para manipular os componentes da IU da plataforma nativa, proporcionando uma experiência familiar aos usuários.
Os aplicativos iOS só podem ser construídos no macOS, então começaremos nosso tutorial demonstrando como instalar o React Native em um Mac.
Instalando React Native no macOS
O React Native CLI está disponível como um pacote npm. Antes de instalá-lo, certifique-se de que o Xcode esteja instalado em seu sistema. É aqui que você constrói o código iOS nativo para o React Native usar. Instale o Xcode da App Store.
Uma vez Xcode está instalado, podemos começar a construir nosso aplicativo. Usaremos Cocoapods como um gerenciador de dependência. Instale Ruby usando brew install ruby e instale Cocoapods como uma gema usando sudo gem install cocoapods.
npm i-g react-native-cli
Crie um novo projeto React Native usando init myproject react-native.
Uma nova pasta myproject deve ser criada em seu diretório de trabalho atual com a seguinte estrutura:
├── App.js ├── __tests__ ├── android ├── app.json ├── babel.config.js ├── index.js ├── ios ├── metro.config.js ├── node_modules ├── package.json └── yarn.lock
Inicie o projeto executando npm run ios. Isso iniciará o aplicativo no simulador iOS.
Construindo um aplicativo React Native para iOS
Os processos de construção de aplicativos React Native para iOS e Android são semelhantes até você começar a lidar com APIs específicas de plataforma. A maioria dos elementos de IU disponíveis funcionam para plataformas Android e iOS.
O React Native fornece elementos básicos de bloco de construção que são usados para construir IUs complexas. Entre os mais importantes estão:
Texto é usado para exibir texto no aplicativo-por exemplo,
Você pode encontrar a lista completa de componentes principais e APIs para botões, listas, imagens, estilos, entradas do usuário e muito mais em Documentos do React Native .
O ponto de entrada para um aplicativo React Native é index.js. Este contém o componente principal para renderizar o aplicativo.
import {AppRegistry} from’react-native’; importar aplicativo de’./App’; importar {name as appName} de’./app.json’;//registrar o componente a ser processado. AppRegistry.registerComponent (appName, ()=> App);
Componentes React Native
Um componente React Native é muito semelhante a um componente React. Todas as APIs React também estão disponíveis em React Native.
Vamos criar um botão de incremento simples para entender melhor as APIs React Native:
import React, {useState} de’react’;/* Importar componentes básicos do react native */import {Button, SafeAreaView, StatusBar, View, Text} from’react-native’; const App=()=> {/* usando o gancho useState para criar o estado */const [contagem, setCount]=useState (0); return (/* usando o estado no botão e atualizando no clique */
Todos os React Hooks podem ser usados no React Native.
Fazendo chamadas de rede
A comunicação com serviços externos é muito importante para qualquer aplicação. React Native fornece uma abstração uniforme sobre APIs de plataforma. Este exemplo demonstra o uso de fetch de maneira muito eficaz com a imagem fornecida pelo React Native:
import React, {useEffect, useState} from’react’; importar {ActivityIndicator, SafeAreaView, Text, View, Image} de’react-native’; exportar App=()=> {//estado para carregar const [isLoading, setLoading]=useState (true);//estado para conter os dados buscados const [data, setData]=useState (null);//use o efeito para disparar na carga do componente useEffect (()=> {fetch (‘https://random.dog/woof.json’).then ((response)=> response.json ())//set the data.then ((json)=> setData (json.url))//se log de erro o erro.catch ((error)=> console.error (error))//parar o carregamento (definindo o isLoading false).finalmente (()=> setLoading (false));}, []); return (
Usando pacotes npm
O React Native tem uma grande comunidade de desenvolvedores que estão constantemente produzindo bibliotecas de alta qualidade para ajudar em várias tarefas.
Para demonstrar como integrar bibliotecas de terceiros em seu aplicativo React Native iOS, vamos adicionar cache ao nosso aplicativo usando uma biblioteca de armazenamento popular. react-native-mmkv-storage é escrito em C ++.
Como o react-native-mmkv-storage usa código nativo, o processo de instalação é ligeiramente diferente dos módulos JavaScript puros.
Primeiro, instale react-native-mmkv-storage usando npm:
npm install react-native-mmkv-storage
Em seguida, atualize ios/Podfile alterando o destino de implantação:
# PodFile require_relative’../node_modules/react-native/scripts/react_native_pods’require_relative’../node_modules/@react-native-community/cli-platform-ios/native_modules’# mudou de plataforma 10.0 para 11.0: ios,’11.0’//…
Agora instale a parte nativa do módulo usando o comando pod install no diretório ios. A instalação varia dependendo do módulo.
Use a biblioteca no código para armazenar os dados retornados da API:
//App.js import React, {useEffect, useState} from’react’; importar {ActivityIndicator, FlatList, SafeAreaView, Text, View} de’react-native’; importar {MMKV} de’./storage’; exportar App=()=> {//estado para carregar const [isLoading, setLoading]=useState (true);//estado para conter os dados buscados const [data, setData]=useState ([]);//use o efeito para disparar na carga do componente useEffect (()=> {MMKV.getArrayAsync (“data_val”). then ((cachedValue)=> {if (cachedValue && cachedValue.length) {setData (cachedValue) return} buscar (‘https://api.github.com/users’).then ((response)=> response.json ())//defina os dados.then (async (json)=> {await MMKV.setArrayAsync (“data_val”, json) setData (json)})//se o erro registrar o erro.catch ((erro)=> console.error (erro))//parar o carregamento (definindo o isLoading falso)}). finally (( )=> setLoading (false));}, []) return (
Usando APIs nativas fornecidas pelo React Native
O React Native fornece um JavaScript de wrapper fino em torno de algumas APIs nativas, incluindo ActionSheetIOS, DynamicColorIOS e Settings.
Configurações são usadas para armazenar pares de valores-chave no dispositivo. ActionSheetIOS abre a folha inferior da ação e compartilha a folha inferior com o dispositivo iOS. DynamicColorIOS é usado para definir as cores com base no tema do dispositivo (ou seja, tema escuro ou claro).
O exemplo abaixo do Documentos nativos do React usa ActionSheetIOS. Essas APIs são usadas como se funções ou objetos JavaScript normais fossem usados.
import React, {useState} de”react”; importar {ActionSheetIOS, Button, StyleSheet, Text, View} de”react-native”; const App=()=> {const [resultado, setResult]=useState (“& # x1f52e;”); const onPress=()=>//abrir a planilha ActionSheetIOS.showActionSheetWithOptions ({options: [“Cancel”,”Generate number”,”Reset”], destructiveButtonIndex: 2, cancelButtonIndex: 0, userInterfaceStyle:’dark’}, buttonIndex=> {//manipular botão pressionado na planilha if (buttonIndex===0) {//cancelar ação} else if (buttonIndex===1) {setResult (Math.floor (Math.random () * 100) + 1 );} else if (buttonIndex===2) {setResult (“& # x1f52e;”);}}); return (
Conclusão
Criar aplicativos iOS é muito fácil usando o React Native. Neste tutorial, demonstramos como instalar o React Native usando o conceito React no React Native. Cobrimos os componentes básicos fornecidos imediatamente pelo React Native, mostramos como instalar bibliotecas e apresentamos alguns wrappers em torno de APIs nativas fornecidas pelo React Native.
