Skrip Untuk Membantu Bertindak Balas Pembangun Asli

Hai!

Jika anda telah menggunakan React Native, anda mungkin menghadapi masalah emulator. Anda menjalankan perintah React Native, tetapi emulator tidak dikesan. Walaupun selepas menetapkan semua pembolehubah persekitaran yang diperlukan dalam fail .zshrc, .bash_profile atau serupa anda, ia masih tidak berfungsi.

Berikut ialah beberapa masalah dan pembetulan biasa:

1. Emulator Tidak Ditemui: Ini boleh berlaku jika laluan SDK Android tidak ditetapkan dengan betul. Semak semula bahawa pembolehubah persekitaran ANDROID_HOME dan PATH menghala ke direktori yang betul. Anda boleh menambah baris ini pada .zshrc atau .bash_profile anda:
   

   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
   

   Selepas membuat perubahan ini, mulakan semula terminal anda atau jalankan sumber ~/.zshrc (atau sumber ~/.bash_profile).

2. Ralat Watchman: Kadangkala, Watchman—Perkhidmatan menonton fail Facebook—boleh menyebabkan masalah dengan cache fail lapuk. Untuk membetulkannya, jalankan:
   

   watchman watch-del-all
   

   Kemudian, mulakan semula pelayan React Native anda.

3. adb reverse to Connect to localhost: Jika apl anda tidak dapat menyambung ke localhost dari dalam emulator Android, anda mungkin perlu menjalankan:
   

   adb reverse tcp:8081 tcp:8081
   

   Arahan ini mengarahkan trafik dari emulator ke mesin tempatan anda. Pastikan adb boleh diakses dari terminal anda.

4. Kosongkan Cache dan Bina Semula: Jika anda masih menghadapi masalah, cuba kosongkan cache dan bina semula projek:
   

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

   Kemudian jalankan semula apl React Native anda.

5. Menggunakan react-native run-android atau run-ios Secara Terus: Jika emulator tidak bermula dengan betul dari IDE atau terminal anda, cuba jalankan apl terus dengan:
   

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

Menyahpepijat isu ini boleh mengecewakan, tetapi langkah ini telah membantu saya menyelesaikan banyak masalah biasa.

Saya juga mencipta skrip yang mudah digunakan

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

    ...
  },

Dengan menggunakan skrip di atas, anda boleh menjalankan kedua-dua emulator dan React Native secara serentak.

Terima kasih kerana membaca!

Atas ialah kandungan terperinci Skrip Untuk Membantu Bertindak Balas Pembangun Asli. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!