Esta é uma tradução do artigo original do blogueiro sob o pseudônimo de Soujanya PS. Ela é profissional em sua área e adora não apenas desenvolver aplicativos e serviços, mas também escrever artigos sobre o assunto. Aqui está sua revisão do lançamento de um aplicativo iOS usando a estrutura React Native.
Há pouco tempo, comecei a usar o React Native para aplicativos iOS. Este é o meu primeiro mergulho profundo em um ambiente de desenvolvimento de aplicativos nativo. Percebo que fiquei surpreso com a facilidade de todo o processo, bem como com o nível de abstração que a interface da linha de comandos do React Native fornece. Na verdade, esse foi um dos fatores que me levou a escrever sobre essa estrutura. Gostaria de compartilhar minha própria experiência com aqueles que acabaram de começar a trabalhar com ele.
A Skillbox recomenda: "Mobile Developer PRO" .
Lembramos que: para todos os leitores de "Habr" - um desconto de 10.000 rublos ao se inscrever em qualquer curso Skillbox usando o código promocional "Habr".
O React Native fornece ferramentas de linha de comando para executar aplicativos iOS e Android em emuladores e dispositivos. Vamos tentar entender o que e como fazer para implantar um aplicativo React Native para iOS.
Realmente lançar
O React Native fornece um excelente utilitário chamado init. Ele fornece um modelo de aplicativo, enquanto cria arquivos de projeto Xcode relevantes na pasta iOS deste aplicativo.
Por sua vez, pode ser iniciado tanto no ambiente do emulador iOS quanto no telefone / tablet, digitando o seguinte comando na pasta raiz do aplicativo:
run-ios react-nativeA execução bem-sucedida do comando é acompanhada pelo lançamento do aplicativo no emulador ou no dispositivo. Nós dizemos o que precisa ser feito para isso.
Comando Run-ios
O React Native fornece ao desenvolvedor vários utilitários de linha de comando para interagir com o aplicativo. Eles estão localizados na pasta local-cli dos nós do módulo React Native. Run-ios é um dos utilitários que executa a função runIOS () definida no arquivo runIOS.js.
O Run-ios permite usar as seguintes opções:
#Lance o aplicativo em um simulador específico
react-native run-ios - simulador "iPhone 5"
#Passar um local não padrão do diretório iOS
react-native run-ios --project-path "./app/ios"
#Execute em um dispositivo conectado, por exemplo, o iPhone de Max
react-native run-ios - dispositivo "iPhone de Max"
#Construir o aplicativo no modo Release
react-native run-ios - versão de configuraçãoSeleção de dispositivo / emulador
Se o dispositivo não for especificado, o run-ios iniciará o modo de depuração do aplicativo no emulador padrão. Isso é possível graças a uma série de comandos xcrun / simctl. Primeiro, verifique a lista de emuladores disponíveis, selecione um deles e carregue o aplicativo em seu ambiente.
Se você deseja executar o aplicativo em um dispositivo físico, basta conectá-lo ao seu laptop e definir os detalhes via run-ios.
O próximo passo é criar um projeto de aplicativo do Xcode.
Código da aplicação
Normalmente, o projeto do aplicativo React Native Xcode está localizado na pasta iOS no diretório raiz. Um projeto Xcode é criado usando o comando xcodebuild. Quaisquer parâmetros definidos anteriormente para run-ios são passados para este comando.
Depois que o projeto é criado, o aplicativo é instalado e iniciado no emulador ou dispositivo conectado.
Adicionando código do aplicativo no modo de depuração
Durante o processo de desenvolvimento, o React Native carrega dinamicamente seu código. Para que tudo corra bem e o código esteja disponível conforme necessário, você precisará de um servidor.
Enquanto o projeto Xcode está sendo depurado, o servidor Metro inicia em paralelo com ele. É usado por aplicativos criados usando a interface da linha de comandos React Native. Tudo isso permite acelerar e simplificar o processo usando a reinicialização "quente" e outros métodos.
Por padrão, o Metro escuta na porta 8081. Assim que o aplicativo é iniciado no emulador, uma solicitação é enviada ao servidor.
#Code in AppDelegate.m sends the request for the bundle: #index.bundle to server jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"MobileApp initialProperties:nil launchOptions:launchOptions];
O servidor carrega todas as dependências necessárias, coleta o código JavaScript e o envia ao aplicativo. Após esta etapa, você pode ver o aplicativo em execução no emulador ou no dispositivo conectado.
Pacote JavaScript
No modo de liberação, você deve primeiro compactar o JavaScript, colocando-o no aplicativo. Para fazer isso, são necessárias algumas alterações para fornecer a capacidade de baixar um pacote estático. Você precisa alterar jsCodeLocation no arquivo AppDelegate.m, indicando o local do pacote estático fora do modo de depuração:
#ifdef DEBUG jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@ fallbackResource:nil]; #else jsCodeLocation = [[NSBundle mainBundle] URLForResource:@ withExtension:@]; #endif
Agora, isso é uma indicação do arquivo de recurso main.bundle que apareceu durante o processamento do projeto Xcode.Nesta fase, o script react-native-xcode.sh é executado. Pode ser encontrado na pasta de scripts do módulo React Native.
Criando um aplicativo a partir do Xcode
Você também pode criar um projeto Xcode diretamente no Mac, em vez de usar a CLI do React Native. Depois de criar o aplicativo, você também pode executá-lo no emulador selecionado nas opções do Xcode ou no dispositivo físico.
Espero que este material tenha ajudado a entender os processos iniciados quando o comando react-native run-ios é executado, o que cria mágica e permite executar o aplicativo no ambiente iOS.
A Skillbox recomenda: