Un script pour aider les développeurs natifs à réagir

Bonjour !

Si vous avez travaillé avec React Native, vous avez probablement rencontré des problèmes d'émulateur. Vous exécutez la commande React Native, mais l'émulateur n'est pas détecté. Même après avoir défini toutes les variables d'environnement nécessaires dans vos fichiers .zshrc, .bash_profile ou similaires, cela ne fonctionne toujours pas.

Voici quelques problèmes et correctifs courants :

1. Émulateur introuvable : cela peut se produire si le chemin du SDK Android n'est pas correctement défini. Vérifiez à nouveau que les variables d'environnement ANDROID_HOME et PATH pointent vers les répertoires corrects. Vous pouvez ajouter ces lignes à votre .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
   

   Après avoir effectué ces modifications, redémarrez votre terminal ou exécutez source ~/.zshrc (ou source ~/.bash_profile).

2. Erreurs Watchman : Parfois, Watchman, le service de surveillance de fichiers de Facebook, peut provoquer des problèmes avec les caches de fichiers obsolètes. Pour résoudre ce problème, exécutez :
   

   watchman watch-del-all
   

   Ensuite, redémarrez votre serveur React Native.

3. adb reverse pour se connecter à localhost : si votre application ne parvient pas à se connecter à localhost à partir de l'émulateur Android, vous devrez peut-être exécuter :
   

   adb reverse tcp:8081 tcp:8081
   

   Cette commande achemine le trafic de l'émulateur vers votre machine locale. Assurez-vous que adb est accessible depuis votre terminal.

4. Vider le cache et reconstruire : Si vous rencontrez toujours des problèmes, essayez de vider le cache et de reconstruire le projet :
   

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

   Ensuite, exécutez à nouveau votre application React Native.

5. Utiliser directement React-native run-android ou run-ios : Si l'émulateur ne démarre pas correctement depuis votre IDE ou votre terminal, essayez d'exécuter l'application directement avec :
   

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

Le débogage de ces problèmes peut être frustrant, mais ces étapes m'ont aidé à résoudre de nombreux problèmes courants.

J'ai aussi créé un script facile à utiliser

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",

    ...
  },

En utilisant le script ci-dessus, vous pouvez exécuter simultanément l'émulateur et React Native.

Merci d'avoir lu !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!