"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Um script para ajudar os desenvolvedores nativos a reagir

Um script para ajudar os desenvolvedores nativos a reagir

Publicado em 01/11/2024
Navegar:267

A Script To Help React Native Developers

Olá!

Se você trabalha com React Native, provavelmente encontrou problemas de emulador. Você executa o comando React Native, mas o emulador não é detectado. Mesmo depois de definir todas as variáveis ​​de ambiente necessárias em seu .zshrc, .bash_profile ou arquivos semelhantes, ainda não funciona.

Aqui estão alguns problemas comuns e soluções:

  1. Emulador não encontrado: isso pode acontecer se o caminho do Android SDK não estiver definido corretamente. Verifique novamente se as variáveis ​​de ambiente ANDROID_HOME e PATH apontam para os diretórios corretos. Você pode adicionar estas linhas ao seu .zshrc ou .bash_profile:

    export ANDROID_HOME=$HOME/Library/Android/sdk
    export PATH=$PATH:$ANDROID_HOME/emulator
    export PATH=$PATH:$ANDROID_HOME/tools
    export PATH=$PATH:$ANDROID_HOME/tools/bin
    export PATH=$PATH:$ANDROID_HOME/platform-tools
    

    Depois de fazer essas alterações, reinicie seu terminal ou execute source ~/.zshrc (ou source ~/.bash_profile).

  2. Erros do Watchman: Às vezes, o Watchman – serviço de monitoramento de arquivos do Facebook – pode causar problemas com caches de arquivos obsoletos. Para corrigir isso, execute:

    watchman watch-del-all
    

    Em seguida, reinicie seu servidor React Native.

  3. adb reverso para conectar ao localhost: se seu aplicativo não conseguir se conectar ao localhost no emulador do Android, talvez seja necessário executar:

    adb reverse tcp:8081 tcp:8081
    

    Este comando roteia o tráfego do emulador para sua máquina local. Certifique-se de que o adb esteja acessível em seu terminal.

  4. Limpar cache e reconstruir: Se você ainda enfrentar problemas, tente limpar o cache e reconstruir o projeto:

    npm start -- --reset-cache
    cd android && ./gradlew clean
    cd ios && xcodebuild clean
    

    Em seguida, execute seu aplicativo React Native novamente.

  5. Usando react-native run-android ou run-ios diretamente: Se o emulador não estiver iniciando corretamente em seu IDE ou terminal, tente executar o aplicativo diretamente com:

    npx react-native run-android
    npx react-native run-ios
    

Depurar esses problemas pode ser frustrante, mas essas etapas me ajudaram a resolver muitos problemas comuns.

Eu também criei um script fácil de usar

const {spawn, exec} = require('child_process');
const path = require('path');

// Define paths
const projectPath = path.resolve();

// Define commands
const watchDelCommand = `watchman watch-del '${projectPath}'`;
const watchProjectCommand = `watchman watch-project '${projectPath}'`;

// Function to execute commands
const clearWatchman = () => {
  // Execute watch-del command
  exec(watchDelCommand, (error, stdout, stderr) => {
    if (error) {
      console.error(`Error executing watch-del command: ${error.message}`);
      return;
    }
    if (stderr) {
      console.error(`stderr: ${stderr}`);
      return;
    }
    console.log(`watch-del command executed successfully: ${stdout}`);

    // Execute watch-project command
    exec(watchProjectCommand, (error, stdout, stderr) => {
      if (error) {
        console.error(
          `Error executing watch-project command: ${error.message}`,
        );
        return;
      }
      if (stderr) {
        console.error(`stderr: ${stderr}`);
        return;
      }
      console.log(`watch-project command executed successfully: ${stdout}`);
    });
  });
};

async function reverseAdb() {
  console.log('Running... adb reverse tcp:8080 tcp:8080');
  // After the emulator has started  adb reverse tcp:8080 tcp:8080
  const adbReverse = spawn('adb', ['reverse', 'tcp:8080', 'tcp:8080']);
  await new Promise((resolve, reject) => {
    let output = '';
    adbReverse.stdout.on('data', data => {
      output  = data.toString();
    });
    adbReverse.on('close', () => {
      resolve();
    });
    adbReverse.stderr.on('error', reject);
  }).catch(error => console.error('Error  reversing ADB port to 8080:', error));
}

async function runEmulator() {
  try {
    clearWatchman();
    // Check for running emulator
    const adbDevices = spawn('adb', ['devices']);
    const devices = await new Promise((resolve, reject) => {
      let output = '';
      adbDevices.stdout.on('data', data => {
        output  = data.toString();
      });
      adbDevices.on('close', () => {
        resolve(output.includes('emulator'));
      });
      adbDevices.stderr.on('error', reject);
    });

    if (devices) {
      console.log('Emulator is already running');
      reverseAdb();
      return;
    }

    // Get list of available emulators
    const emulatorList = spawn('emulator', ['-list-avds']);
    const emulatorName = await new Promise((resolve, reject) => {
      let output = '';
      emulatorList.stdout.on('data', data => {
        output  = data.toString();
      });
      emulatorList.on('close', () => {
        const lines = output.split('\n').filter(Boolean); // Filter out empty lines
        if (lines.length === 0) {
          reject(new Error('No AVDs found'));
        } else {
          resolve(lines[lines.length - 1]); // Get the last non-empty line
        }
      });
      emulatorList.stderr.on('error', reject);
    });

    // Start the emulator in detached mode
    const emulatorProcess = spawn('emulator', ['-avd', emulatorName], {
      detached: true,
      stdio: 'ignore',
    });

    emulatorProcess.unref(); // Allow the parent process to exit independently of the child

    reverseAdb();

    console.log(`Starting emulator: ${emulatorName}`);
  } catch (error) {
    console.error('Error running emulator:', error);
  }
}

runEmulator();


// package.json

  "scripts": {
    ...

    "dev:android": "yarn android:emulator && npx react-native@latest start",
    "android:emulator": "node runEmulator.js",

    ...
  },

Usando o script acima, você pode executar o emulador e o React Native simultaneamente.

Obrigado pela leitura!

Declaração de lançamento Este artigo foi reproduzido em: https://dev.to/frulow/a-script-to-help-react-native-developers-fk7?1 Se houver alguma violação, entre em contato com [email protected] para excluí-la
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3