Ao desenvolver um aplicativo móvel, você precisa construir e executar seu aplicativo em um simulador ou dispositivo para testá-lo e visualizar as alterações. Isso é diferente de trabalhar com aplicativos da web em que você não precisa criar o aplicativo todas as vezes.
Ao trabalhar com React Native e iOS , é normal usar Xcode como ferramenta de construção. Construir aplicativos que rodam no iOS requer pelo menos algum conhecimento do Xcode.
Neste tutorial, vamos guiá-lo através de algumas práticas recomendadas para ajudá-lo a começar a usar o Xcode e oferecer algumas dicas isso mudará a maneira como você desenvolve aplicativos iOS com React Native.
Aqui está o que vamos cobrir:
- O que é Xcode?
- Criação de um aplicativo React Native no iOS com Xcode
- Executando um aplicativo React Native em um dispositivo iOS real
- Usando um simulador para executar e testar seu código
- esquemas Xcode
- Trabalho com o arquivo
info.plist
O que é Xcode?
Xcode é um IDE e editor de código criado pela Apple para ajudar os desenvolvedores a construir produtos Apple-ou seja, aplicativos móveis para iOS e aplicativos de desktop para macOS.
Xcode é um ambiente completo que contém um conjunto de ferramentas integradas e aplicativos projetados para auxiliar em todos os processos de desenvolvimento, incluindo teste, construção, implantação, compilação e depuração.
Criação de um aplicativo React Native no iOS com Xcode
Você pode construir um aplicativo React Native em um simulador ou em um dispositivo real. Se você pretende executá-lo em um dispositivo iOS ou simulador, o uso do Xcode é frequentemente necessário.
Você pode construir um aplicativo React Native usando a React Native CLI , que permite executar comandos de construção do seu terminal ou Xcode. Eu prefiro usar o Xcode pelos seguintes motivos:
- Xcode mostra mais detalhes sobre o processo de construção em tempo real, como logs
- O Xcode permite que você faça configurações de compilação personalizáveis. Ao usar o Xcode diretamente, você pode ajustar o processo de construção ao seu gosto. Por exemplo, você pode escolher o tipo de simulador ou dispositivo, construir com um esquema personalizado, etc.
- React Native CLI executa alguns recursos do Xcode usando código de script por baixo do capô. A CLI oferece a simplicidade de executar e construir o código com apenas uma linha de comando
- Ao usar apenas a CLI, você pode ter problemas inesperados com a construção. Usar o Xcode diretamente fornece uma imagem clara e ajuda a identificar a causa de um determinado problema
Vejamos como criar e executar um aplicativo React Native com a CLI React Native. Então, faremos o mesmo diretamente em um dispositivo real.
Usando o React Native CLI
O React Native CLI é uma maneira simples e direta de colocar seu aplicativo React Native em execução. Quando você instala pela primeira vez um aplicativo React Native usando a CLI, ele fornece instruções simples e permite que você inicie, crie e execute o aplicativo em um comando simples:
run-ios reac-nativo
Você também pode usar npx :
npx react-nativo run-ios
Basicamente, ele executa vários scripts em segundo plano que interagem e instruem o Xcode a executar e iniciar o simulador. Se você não especificar um simulador, a CLI usa o padrão que encontra no Xcode. Veja como informar à CLI em qual simulador você deseja executar o aplicativo:
react-native run-ios--simulator"iPhone X"
Se quiser executar seu aplicativo em um dispositivo, primeiro certifique-se de que seu dispositivo esteja conectado via USB ao computador. Em seguida, execute o comando CLI com --device"nome do iPhone":
react-native run-ios--device"Said's iPhone"
Usando o Xcode diretamente
A segunda maneira de construir e executar um aplicativo React Native é usar o Xcode diretamente, que é o método que uso.
Dentro do Xcode, navegue até Arquivo → Abrir e navegue até o diretório do seu projeto. Na pasta iOS , selecione appName.xcodeproject ou appName.xcodeworkspace se você tiver um.
Você pode construir o aplicativo acessando o navegador de guias ( Produto → Construir ) ou usando o atalho ⌘ + B :
É uma boa prática usar o simulador para executar e testar o aplicativo. No entanto, às vezes é necessário testar a precisão da IU em um dispositivo real.
Executando um aplicativo React Native em um dispositivo iOS real
O benefício mais óbvio de executar seu aplicativo no dispositivo é que ele permite que você experimente seu aplicativo da maneira como o usuário o vê. Os simuladores são limitados e nem sempre representam o aplicativo com precisão total. Por exemplo, você não pode acessar a câmera do dispositivo ao usar um simulador.
Prefiro usar sempre o dispositivo porque me dá uma ideia mais completa de como o aplicativo funciona no lado do usuário.
Para executar e construir um React Native em um dispositivo real, você deve ter:
- Um dispositivo iOS; o macOS só permite que você execute aplicativos iOS em dispositivos iOS (iPhone, iPad, Apple TV, etc.)
- Um conector USB para conectar o dispositivo ao seu computador Mac
- Uma conta de desenvolvedor Apple
Depois de conectar o iPhone, o Xcode mostrará os dispositivos conectados como um alvo:
No meu caso, o nome do meu iPhone é “iPhone”. Você pode ver um nome diferente para o seu dispositivo, como “iPhone de Tony”.
Selecione o dispositivo que deseja construir e execute o aplicativo, a seguir clique no botão construir . O React Native CLI abrirá automaticamente um terminal e iniciará o servidor. Se ainda não foi iniciado, você pode ir para o seu terminal e executar npm start :
Se sua construção for bem-sucedida, o aplicativo será iniciado automaticamente em seu dispositivo:
Para garantir que o dispositivo está conectado ao servidor, você pode ir ao terminal e pressionar r para recarregar o aplicativo ou d para abrir o menu do desenvolvedor. Como alternativa, você pode agitar seu dispositivo para abrir o menu do desenvolvedor.
Você deve ver o recarregamento ao vivo funcionando também:
Conforme você avança em sua jornada de desenvolvimento do React Native, você se verá lidando com problemas inesperados, especialmente com a construção do aplicativo. Esses problemas geralmente resultam de versões incompatíveis entre os pacotes React Native e iOS ou das ferramentas usadas para construir o aplicativo, como o Xcode.
Com o tempo, você se familiarizará com esses problemas e se tornará mais eficiente para resolvê-los.
Usando um simulador para executar e testar seu código
O simulador é apenas um dispositivo virtual, mas tem quase tudo que você precisa para testar e executar seu código. Vamos explorar algumas coisas que você pode fazer com um simulador.
Depuração
O simulador fornece uma variedade de recursos para depurar seu aplicativo, especialmente os recursos de acessibilidade. Por exemplo, você pode ativar Camadas combinadas de cores para testar a acessibilidade das cores.
No Xcode, abra a guia Depurar :
Testando o modo escuro
Se você tiver a versão mais recente do Xcode (12.4) , há um recurso que permite que você veja a aparência do seu aplicativo no modo escuro. Você pode visualizar seu modo escuro pressionando Shift + Command + A ou navegando até a guia Recursos e clicando em Alternar aparência :
Simulador de localização GPS
Você pode simular a localização GPS usando o simulador. Por padrão, o simulador tem um ponto GPS, mas você pode adicionar localizações GPS personalizadas:
Se você estiver usando o Xcode 10 ou anterior, navegue até Depurar → Local → Local personalizado . Insira a longitude e a latitude e o simulador usará essas coordenadas personalizadas como o local padrão para o dispositivo.
Esquemas Xcode
Um esquema Xcode define uma coleção de destinos para construir, uma configuração para usar na construção e uma coleção de testes para executar.
Você pode usar esquemas para criar diferentes construções para seu aplicativo. Isso permite que você teste o aplicativo em diferentes ambientes. Por exemplo, você pode criar uma compilação apenas para as compilações de teste, teste, desenvolvimento e produção.
Digamos que tenhamos que criar três construções diferentes: uma construção para teste ou preparação, uma construção de desenvolvimento e uma construção para produção. Cada construção terá um identificador de construção exclusivo e um nome personalizado.
Para ver como isso funciona, vamos criar os esquemas: teste, produção, desenvolvimento.
Vá para Produto → Gerenciar esquema :
Clique em + para criar um novo esquema:
Faça o mesmo com Production e Staging . Certifique-se de desmarcar o esquema padrão:
Verifique todas as três construções que você acabou de criar:
A próxima etapa é definir configurações de construção específicas para cada esquema. Vá para Produto → Esquema → Editar esquema :
Você pode selecionar o tipo de configuração de construção que deseja usar quando o aplicativo estiver em execução, entre muitas outras opções:
Working with the info.plist file
info.plist is an XML file that’s used to store a list of app properties, such as the AppName, version, permissions description, settings, etc.
When an Xcode project is created it comes with a info.plist by default. You can have multiple plist files in one workspace. You might create more than one plist file for different environments — for example, Staging.plist, Production.plist, Development.plist. Only one file can be used at a time.
Given that we created a file for staging (Staging.plist), right-click on the project directory and select New File:
Choose a Property Lis file and give it a name, such as Staging.
It’s best to copy the values from the info.plist, then make a change to it to avoid any syntax issues. Open the file as source code, then copy and paste.
Let’s change the app displayName in the Staging.plist file:
Now we need Xcode to use Staging.plist instead of info.plist when building.
First, we need to create a build configuration and associate the staging file with it. Click on the project icon, then look for Configurations in the Info tab. Simply duplicate a Debug or Release config, create a new configuration, and name it Staging:
After creating the staging build configuration, the next step is to tell the Xcode what property list file it should use when a specific build is used. In our case, we want it to use Staging, so we have to add the path of Staging.plist.
Go to the build settings, look for the Packaging tab, and click on the info.plist file. It will extend and the three build configurations we have — Debug, Release , and Staging — will display. Add the path to Staging, which is AppName/Staging.plist:
Now, when running the Staging Build configuration, it will use Staging.plist automatically.
You can use info.plist to add and declare permissions of the iOS feature your app has access to. If your app is trying to use APIs that requires permission, you need to add the description of the usage into the info.plist. For example, if your app is using the native camera feature, you need to add the usage description, as shown below.
Click the + button and look for the Privacy-Camera Usage Description:
Then, add the value description of the usage on the right:
Summary
Knowing how to use Xcode when building iOS apps with React Native is a game-changer. With a solid foundation in Xcode, you can more easily identify and fix build issues more efficiently. Most importantly, knowing how to get the most out of Xcode’s features will improve the developer experience overall and help you do more with your iOS applications in React Native than you previously thought possible.
The post Xcode for React Native developers: Tutorial and best practices appeared first on LogRocket Blog.
