Skrip Untuk Membantu Bertindak Balas Pembangun Asli

WBOY
Lepaskan: 2024-09-07 06:36:32
asal
555 orang telah melayarinya

A Script To Help React Native Developers

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
    
    Salin selepas log masuk

    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
    
    Salin selepas log masuk

    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
    
    Salin selepas log masuk

    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
    
    Salin selepas log masuk

    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
    
    Salin selepas log masuk

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

    ...
  },

Salin selepas log masuk

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!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!