Estes são alguns problemas comuns que você pode encontrar ao configurar o React Native. Se você encontrar algo que não esteja listado aqui, tente pesquisar o problema no GitHub.
O empacotador Metro é executado na porta 8081. Se outro processo já estiver usando essa porta, você poderá encerrar esse processo ou alterar a porta que o empacotador usa.
Execute o seguinte comando para encontrar o ID do processo que está escutando na porta 8081:
sudo lsof -i :8081
Em seguida, execute o seguinte para encerrar o processo:
kill -9 <PID>
No Windows você pode encontrar o processo usando a porta 8081 usando o Monitor de Recursos e interrompê-lo usando o Gerenciador de Tarefas.
Você pode configurar o bundler para usar uma porta diferente de 8081 usando o parâmetro port, na raiz da execução do seu projeto:
npm start -- --port=8088
yarn start --port 8088
Você também precisará atualizar seus aplicativos para carregar o pacote JavaScript da nova porta. Se estiver executando no dispositivo do Xcode, você pode fazer isso atualizando as ocorrências de 8081 para a porta escolhida no arquivo ios/__App_Name__.xcodeproj/project.pbxproj
.
Se você encontrar um erro como npm WARN locking Error: EACCES
ao usar o React Native CLI, tente executar o seguinte:
sudo chown -R $USER ~/.npm
sudo chown -R $USER /usr/local/lib/node_modules
Se você adicionou React Native manualmente ao seu projeto, certifique-se de ter incluído todas as dependências relevantes que está usando, como RCTText.xcodeproj
, RCTImage.xcodeproj
. Em seguida, os binários criados por essas dependências devem ser vinculados ao binário do seu aplicativo. Use a seção Linked Frameworks and Binaries
nas configurações do projeto Xcode. Etapas mais detalhadas estão aqui: Vinculando Bibliotecas.
Se você estiver usando CocoaPods, verifique se adicionou React junto com as subespecificações ao Podfile
. Por exemplo, se você estivesse usando as APIs <Text />
, <Image />
e fetch()
, você precisaria adicioná-las em seu Podfile
:
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'RCTText',
'RCTImage',
'RCTNetwork',
'RCTWebSocket',
]
Em seguida, certifique-se de ter executado pod install
e de que um diretório Pods/
tenha sido criado em seu projeto com o React instalado. CocoaPods irá instruí-lo a usar o arquivo .xcworkspace
gerado daqui em diante para poder usar essas dependências instaladas.
Existe um plugin CocoaPods chamado cocoapods-fix-react-native
que lida com qualquer possível pós-correção do código-fonte devido a diferenças ao usar um gerenciador de dependências.
Nas configurações de construção do projeto, User Search Header Paths
e Header Search Paths
são duas configurações que especificam onde o Xcode deve procurar os arquivos de cabeçalho #import
especificados no código. Para pods, CocoaPods usa uma matriz padrão de pastas específicas para procurar. Verifique se essa configuração específica não foi substituída e se nenhuma das pastas configuradas é muito grande. Se uma das pastas for grande, o Xcode tentará pesquisar recursivamente o diretório inteiro e gerará o erro acima em algum momento.
Para reverter as configurações de compilação dos User Search Header Pathse
Header Search Paths` para seus padrões definidos pelo CocoaPods - selecione a entrada no painel Build Settings e clique em excluir. Isso removerá a substituição personalizada e retornará aos padrões do CocoaPod.
React Native implementa um polyfill para WebSockets. Esses polyfills são inicializados como parte do módulo react-native que você inclui em seu aplicativo por meio do import React from 'react'
. Se você carregar outro módulo que requer WebSockets, como Firebase, certifique-se de carregá-lo/solicitá-lo após o React Native:
import React from 'react';
import Firebase from 'firebase';
Se você encontrar uma exceção ShellCommandUnresponsiveException
como:
Execution failed for task ':app:installDebug'.
com.android.builder.testing.api.DeviceException: com.android.ddmlib.ShellCommandUnresponsiveException
Tente fazer o downgrade da sua versão do Gradle para 1.2.3 em android/build.gradle
.
Se você tiver problemas em que a execução do npx react-native init
trava em seu sistema, tente executá-lo novamente no modo detalhado e consulte #2797 para causas comuns:
npx react-native init --verbose
Quando você está depurando um processo ou precisa saber um pouco mais sobre o erro que está sendo gerado, você pode querer usar a opção detalhada para gerar mais logs e informações para resolver seu problema.
Execute o seguinte comando no diretório raiz do seu projeto.
npm run android -- --verbose
yarn android --verbose
Problema causado pelo número de diretórios que o inotify
(usado pelo watchman no Linux) pode monitorar. Para resolver isso, execute este comando na janela do seu terminal:
echo fs.inotify.max_user_watches=582222 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
Se você tiver um problema em que a execução do npm run android
ou yarn android
no macOS gera o erro acima, tente executar o comando sudo chmod +x android/gradlew
para tornar os arquivos gradlew em executáveis.