Ein Skript zur Unterstützung der Reaktion nativer Entwickler

Hallo!

Wenn Sie mit React Native gearbeitet haben, sind Sie wahrscheinlich auf Emulatorprobleme gestoßen. Sie führen den Befehl „React Native“ aus, aber der Emulator wird nicht erkannt. Selbst nachdem Sie alle erforderlichen Umgebungsvariablen in Ihren .zshrc-, .bash_profile- oder ähnlichen Dateien festgelegt haben, funktioniert es immer noch nicht.

Hier sind einige häufige Probleme und Lösungen:

1. Emulator nicht gefunden: Dies kann passieren, wenn der Android SDK-Pfad nicht richtig eingestellt ist. Überprüfen Sie noch einmal, ob die Umgebungsvariablen ANDROID_HOME und PATH auf die richtigen Verzeichnisse verweisen. Sie können diese Zeilen zu Ihrem .zshrc oder .bash_profile hinzufügen:
   

   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
   

   Nachdem Sie diese Änderungen vorgenommen haben, starten Sie Ihr Terminal neu oder führen Sie source ~/.zshrc (oder source ~/.bash_profile) aus.

2. Watchman-Fehler: Manchmal kann Watchman – der Dateiüberwachungsdienst von Facebook – Probleme mit veralteten Dateicaches verursachen. Um dies zu beheben, führen Sie Folgendes aus:
   

   watchman watch-del-all
   

   Dann starten Sie Ihren React Native-Server neu.

3. adb reverse to Connect to localhost: Wenn Ihre App im Android-Emulator keine Verbindung zu localhost herstellen kann, müssen Sie möglicherweise Folgendes ausführen:
   

   adb reverse tcp:8081 tcp:8081
   

   Dieser Befehl leitet den Datenverkehr vom Emulator an Ihren lokalen Computer weiter. Stellen Sie sicher, dass adb von Ihrem Terminal aus zugänglich ist.

4. Cache leeren und neu erstellen: Wenn weiterhin Probleme auftreten, versuchen Sie, den Cache zu leeren und das Projekt neu zu erstellen:
   

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

   Führen Sie dann Ihre React Native-App erneut aus.

5. React-native run-android oder run-ios direkt verwenden: Wenn der Emulator nicht korrekt von Ihrer IDE oder Ihrem Terminal aus startet, versuchen Sie, die App direkt auszuführen mit:
   

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

Das Debuggen dieser Probleme kann frustrierend sein, aber diese Schritte haben mir geholfen, viele häufige Probleme zu lösen.

Ich habe auch ein benutzerfreundliches Skript erstellt

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

    ...
  },

Mithilfe des obigen Skripts können Sie sowohl den Emulator als auch React Native gleichzeitig ausführen.

Danke fürs Lesen!

Das obige ist der detaillierte Inhalt vonEin Skript zur Unterstützung der Reaktion nativer Entwickler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!