Configuração do Ambiente React Native para Desenvolvimento no macOS

Este guia detalha os passos necessários para configurar um ambiente de desenvolvimento React Native em macOS, abrangendo tanto a plataforma iOS quanto Android. A configuração envolve a instalação de ferramentas essenciais e a resolução de problemas comuns.

  1. Requisitos e Ferramentas Essenciais

Homebrew

O Homebrew é um gerenciador de pacotes indispensável no macOS, facilitando a instalação de muitas das ferramentas necessárias. Se ainda não o tem, instale-o com o seguinte comando:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Após a instalação, para otimizar a velocidade de download de pacotes, é recomendável configurar repositórios alternativos, especialmente se estiver em uma região com restrições de acesso a repositórios globais. Por exemplo, para repositórios chineses:

# Configurar o mirror para o brew.git
cd "$(brew --repo)"
git remote set-url origin https://mirrors.ustc.edu.cn/brew.git

# Configurar o mirror para o homebrew-core.git
cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"
git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git

Node.js e Watchman

O React Native requer Node.js (versão 10 ou superior) e Watchman, uma ferramenta para observar alterações no sistema de arquivos e acionar builds. Instale-os via Homebrew:

brew install node
brew install watchman

NPM e Yarn - Configuração de Registros (Opcional)

Para acelerar a instalação de pacotes npm e yarn, você pode configurar registos alternativos. Por exemplo, utilizando os registos da Taobao:

# Configurar registro para NPM
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

# Configurar registro para Yarn
yarn config set registry https://registry.npm.taobao.org
yarn config set disturl https://npm.taobao.org/dist

Ferramentas de Linha de Comando React Native e Yarn

Instale as ferramentas globais do React Native CLI e Yarn. O Yarn é uma alternativa ao npm, oferecendo melhor performance e estabilidade.

npm install -g yarn react-native-cli
  1. Configuração para Desenvolvimento iOS

Xcode

Para desenvolver aplicações iOS, é imprescindível ter o Xcode instalado. Baixe a versão mais recente (9.4 ou superior) diretamente da App Store. Após a instalação, certifique-se de abrir o Xcode pelo menos uma vez para que ele complete a instalação de componentes adicionais.

Criação e Execução de um Novo Projeto

Com as dependências instaladas, crie seu primeiro projeto React Native:

npx react-native init MyAwesomeApp

Navegue até o diretório do projeto e execute a aplicação no simulador iOS:

cd MyAwesomeApp
npx react-native run-ios

Solução de Problemas Comuns no iOS

Erro: xcrun: error: unable to find utility "instruments"

Este erro geralmente indica que as ferramentas de linha de comando do Xcode não estão configuradas corretamente. Resolva com:

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer

Erro: Could not find iPhone X simulator (ou similar)

Se o simulador padrão não for encontrado ou você desejar usar uma versão específica, especifique o nome do simulador:

npx react-native run-ios --simulator="iPhone 15 Pro"

Para listar os simuladores disponíveis, use xcrun simctl list devices.

Uma alternativa para problemas persistentes com a detecção de simuladores pode ser a modificação do arquivo node\_modules/react-native/local-cli/runIOS/findMatchingSimulator.js. Procure pela lógica que filtra as versões do iOS e ajuste-a. Por exemplo, se a condição atual for:

if (version.indexOf('iOS') !== 0) {
 continue;
}

Você pode tentar expandir a condição para garantir que 'iOS' esteja presente de alguma forma, ou depurar a variável version para entender o formato inesperado que está causando a falha.

  1. Configuração para Desenvolvimento Android

Android Studio

Para o desenvolvimento Android, faça o download e instale o Android Studio a partir do site oficial (developer.android.com/studio). O Android Studio instala o SDK do Android, emuladores e outras ferramentas necessárias.

Após a instalação, siga as instruções detalhadas na documentação oficial do React Native sobre a configuração das variáveis de ambiente do Android SDK, que são cruciais para o funcionamento do CLI.

Solução de Problemas Comuns no Android

Erro: installDebug FAILED ou Dispositivo Não Encontrado

Um problema comum ao tentar executar npx react-native run-android é a falha na instalação do APK devido à ausência de um emulador ou dispositivo conectado. A solução mais simples é:

  1. Abra o Android Studio.
  2. Vá em Tools > Device Manager (ou AVD Manager em versões mais antigas).
  3. Crie um novo dispositivo virtual (AVD) se ainda não tiver um.
  4. Inicie o emulador a partir do Android Studio antes de executar o comando npx react-native run-android.

A criação e execução de um emulador ativo garantirá que o React Native CLI encontre um alvo para a instalação e execução da aplicação Android.

Tags: react-native macOS ios android desenvolvimento-mobile

Publicado em 6-6 20:32 por Thomas