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, Algum Texto View é um contêiner com suporte para layout e estilo-por exemplo, Algum texto

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 */ {/* usando o estado no botão e atualizando no clique */}